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

前言

若是你手動部署過項目,必定會深感持續集成的必要性,由於手動部署實在又繁瑣又耗時,雖然部署流程基本固定,依然仍是容易出錯。java

若是你很熟悉持續集成,必定會贊成這樣的觀點:「使用它已經成爲一種標配」。node

什麼是持續集成 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
翻譯過來就是:持續集成是一個開發行爲,它要求開發者天天屢次將代碼集成到一個共享的倉庫,每次提交都會被自動構建所檢查,團隊可所以提早檢測出問題。git

持續集成的工具很是多,例如用java語言開發的Jenkins,因爲其能夠在多臺機器上進行分佈式地構建和負載測試的特性,不少大公司都在使用它。github

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

隨着GitHub的發展,出現了愈來愈多支持GitHub的CI/CD產品。在GitHub市場上,能夠看到,已經支持的持續集成服務提供商已超過300多家(詳情)。 選擇Travis CI,是由於身邊不少朋友的推薦。 緩存

github continuous integration.jpg

下面分享一下我是如何利用Travis CI+GitHub實現持續集成和自動部署的,經過個人一些研究和實戰經驗,但願能夠幫到有須要的朋友。bash

什麼是Travis CI

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

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

travis-CI-0.jpg

1、獲取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只有如今能夠看到,再次進入就看不到了,並且是再也看不到了,忘記了就只能從新生成了,因此要記住保管好。

personal-access-token-variable.jpg

2、使用GitHub帳號登陸Travis

進入Travis官網,用GitHub帳號登陸。(我目前使用的是它的舊平臺)

travis-ci-1.jpg

登陸後,會在Travis裏看到本身GitHub帳號下全部的public open source repo。

3、開啓對項目的監控

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

travis-CI-4.jpg

4、配置travis

  • 點擊開關右側Settings,進入該項目的travis配置頁
  • 勾選觸發條件
    travis-CI-7.jpg
  • 設置全局變量
    travis-CI-8.jpg
    注意:第一步獲取的access token,必須設置
    設置好的變量能夠在配置文件中以 ${變量名}來引用。
    travis-CI-9.jpg

5、在項目根目錄添加.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_installbefore_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-CI-6.jpg

  • 構建完,travis 會根據個人配置,自動部署到 GitHub:

    travis-CI-10.jpg

And One More Thing

構建成功後,咱們就能夠在本身的GitHub項目裏添加build徽章了。 方法:在Travis裏,點擊項目右側的徽章,便可獲取小徽章地址,將地址放在README.md文檔中便可。

travis-CI-12.jpg
效果:
travis-CI-11.jpg

關於 GitHub 徽章的自定義,能夠參考個人另外一篇文章 github項目徽標

--

歡迎轉載,轉載請註明出處:champyin.com/2019/09/27/…

相關文章
相關標籤/搜索