利用Travis CI+GitHub實現持續集成和自動部署

前言

如果你手動部署過項目，一定會深感持續集成的必要性，因爲手動部署實在又繁瑣又耗時，雖然部署流程基本固定，依然還是容易出錯。

如果你很熟悉持續集成，一定會同意這樣的觀點：“使用它已經成爲一種標配”。

什麼是持續集成
Continuous Integration(CI) is a development practice that requires developers to integrate code into a shared repository several times a day. Each check-in is then verified by an automated build, allowing teams to detect problems early.
———ThoughtWorks
翻譯過來就是：持續集成是一個開發行爲，它要求開發者每天多次將代碼集成到一個共享的倉庫，每次提交都會被自動構建所檢查，團隊可因此提前檢測出問題。

持續集成的工具非常多，例如用java語言開發的Jenkins，由於其可以在多臺機器上進行分佈式地構建和負載測試的特性，很多大公司都在使用它。

但是Jenkins的不加修飾的界面界面讓我有些嫌棄...

隨着GitHub的發展，出現了越來越多支持GitHub的CI/CD產品。在GitHub市場上，可以看到，已經支持的持續集成服務提供商已超過300多家（詳情）。

選擇Travis CI，是因爲身邊很多朋友的推薦。

下面分享一下我是如何利用Travis CI+GitHub實現持續集成和自動部署的，通過我的一些研究和實戰經驗，希望可以幫到有需要的朋友。

什麼是Travis CI

Travis CI是用Ruby語言開發的一個開源的分佈式持續集成服務，用於自動構建和測試在GitHub託管的項目。支持包括Javascript、Node.js、Ruby等20多種程序語言。對於開源項目免費提供CI服務。你也可以買他的收費版，享受更多的服務。

Travis CI目前有兩個官網，分別是 https://travis-ci.org 和 https://travis-ci.com 。
https://travis-ci.org 是舊平臺，已經逐漸往新平臺 https://travis-ci.com 上遷移了。對於私有倉庫的免費自動構建，Travis CI在新平臺上給予了支持。

一、獲取GitHub Access Token

Travis CI在自動部署的時候，需要push內容到倉庫的某個分支，而訪問GitHub倉庫需要用戶授權，授權方式就是用戶提供 Access Token 給Travis CI。

獲取token的位置：GitHub->Settings->Developer Settings->Personal access tokens。

勾選repo下的所有項，以及user下的user:email後，生成一個token，複製token值。

注意：這個token只有現在可以看到，再次進入就看不到了，而且是再也看不到了，忘記了就只能重新生成了，所以要記住保管好。

二、使用GitHub賬號登錄Travis

進入Travis官網，用GitHub賬號登錄。（我目前使用的是它的舊平臺）

登錄後，會在Travis裏看到自己GitHub賬號下所有的public open source repo。

三、開啓對項目的監控

選擇目標項目，打開右側開關。

四、配置travis

• 點擊開關右側Settings，進入該項目的travis配置頁
• 勾選觸發條件
  
• 設置全局變量
  
  注意：第一步獲取的access token，必須設置
  設置好的變量可以在配置文件中以 ${變量名}來引用。
  

五、在項目根目錄添加.travis.yml配置文件

注意文件名以.開頭。

Travis CI的一次構建分兩個步驟：

1. install安裝，安裝任何所需的依賴
2. script腳本，運行構建腳本

Travis CI提供了一些構建生命週期的“鉤子”

一個完整的 Travis CI 構建生命週期：

1. OPTIONAL Install apt addons
2. OPTIONAL Install cache components
3. before_install
4. install
5. before_script
6. script
7. OPTIONAL before_cache(for cleaning up cache)
8. after_success or after_failure
9. OPTIONAL before_deploy
10. OPTIONAL deploy
11. OPTIONAL after_deploy
12. after_script

在 before_install、before_script之前，或者after_script之後，都可以運行自定義命令，詳細資料可參考官方文檔：Job Lifecycle

我在footprint項目中的.travis.yml完整配置：

language: node_js #設置語言

node_js: "10.16.3" #設置語言版本

cache:
  directories:
    - node_modules #緩存依賴

# S: Build Lifecycle
install:
  - npm i

script:
  - npm run build

#after_script前5句是把部署分支的.git文件夾保護起來，用於保留歷史部署的commit日誌，否則部署分支永遠只有一條commit記錄。
#命令裏面的變量都是在Travis CI裏配置過的。
after_script:
  - git clone https://${GH_REF} .temp
  - cd .temp
  - git checkout gh-pages
  - cd ../
  - mv .temp/.git dist
  - cd dist
  - git config user.name "${U_NAME}"
  - git config user.email "${U_EMAIL}"
  - git add .
  - git commit -m ":construction_worker:- Build & Deploy by Travis CI"
  - git push --force --quiet "https://${Travis_Token}@${GH_REF}" gh-pages:${D_BRANCH}
# E: Build LifeCycle

# 只有指定的分支提交時纔會運行腳本
branches:
  only:
    - master

Done！

將 .travis.yml push 到遠程，可以看到 travis 開始構建編譯了。並且之後每次push代碼，travis 都會自動執行.travis.yml裏配置的腳本任務了。

• 自動編譯：
  
• 構建完，travis 會根據我的配置，自動部署到 GitHub：
  

And One More Thing

構建成功後，我們就可以在自己的GitHub項目裏添加build徽章了。
方法：在Travis裏，點擊項目右側的徽章，即可獲取小徽章地址，將地址放在README.md文檔中即可。

效果：

--
GOODLUCK！

歡迎轉載，轉載請註明出處：https://champyin.com/2019/09/...

本文同步發表於：
利用Travis CI+GitHub實現持續集成和自動部署 | 掘金