實戰筆記：Jenkins打造強大的前端自動化工做流

背景

公司的前端構建及部署工做都是人工去作，隨着業務擴大，項目迭代速度變快，人員增多，各類問題都暴露出來，本文是對前端自動化工做流進行探索後的一篇經驗分享，將經過一個簡單案例分享一下基於Jenkins的前端自動化工做流搭建的過程，搭建完這套工做流，咱們只須要在本地發起一個git提交，剩下的單元測試，打包構建，代碼部署，郵件提醒等功能所有自動化完成，讓持續集成、持續交付、持續部署變得簡單易操做，真正解決人工構建部署的諸多問題。

Jenkins是什麼？

Jenkins 是一款業界流行的開源持續集成工具，普遍用於項目開發，具備自動化構建、測試和部署等功能。

本案例要實現的功能

本地項目發起一個git提交，剩下的單元測試，打包構建，代碼部署，郵件提醒等所有自動化完成。

開始

準備工做

1. 先準備一個項目，我這裏直接使用vue-cli腳手架生成了一個項目，其餘技術棧也同樣，只要是個項目就行。
   

2. 創建這個項目的遠端git倉庫，並把本地代碼提交上去。我這裏用的碼雲，github也一致。
3. 準備一臺能外網訪問的服務器，非要用你本身的電腦當服務器也能夠，保證外網可訪問便可。我這裏用的是阿里雲ubantu14.04，另外，阿里雲新手註冊有一個月的免費服務器可領，不想花錢的能夠試一下。
4. 服務器上配好Java環境。

Jenkins的安裝與啓動

linux下：ubuntu 14.04中安裝Jenkins
windows下：

1. 從Jenkins官網下載最新war文件。
   
2. 運行java -jar jenkins.war便可。

Jenkins初始化

1. jenkins的默認端口是8080,啓動成功後在瀏覽器打開。
2. 進入後會讓咱們輸管理員密碼，打開網頁上提示路徑下的文件，複製密碼粘貼輸入便可。
3. 而後會讓安裝須要的插件，此處選默認便可，等待安裝完成。
4. 建立一個管理員帳戶。
5. 上面都完成後會看到這個界面。

建立任務

1. 點擊建立一個新任務

   

2. 選擇自由風格的軟件項目，並起一個名字

   

至此，基礎準備工做已經完成，咱們在服務器上安裝了Jenkins並啓動，而後進行了初始化配置，創建了一個新任務。接下來咱們開始配置咱們須要的功能。

實現git鉤子功能

首先咱們要實現一個git鉤子功能，就是咱們向github/碼雲等遠程倉庫push咱們的代碼時，jenkins能知道咱們提交了代碼，這是自動構建自動部署的前提，鉤子的實現原理是在遠端倉庫上配置一個Jenkins服務器的接口地址，當本地向遠端倉庫發起push時，遠端倉庫會向配置的Jenkins服務器的接口地址發起一個帶參數的請求，jenkins收到後開始工做。

1. 打開剛建立的任務，選擇配置，添加遠程倉庫地址，配置登陸名及密碼及分支。
   

   

2. 安裝Generic Webhook Trigger Plugin插件（系統管理-插件管理-搜索Generic Webhook Trigger Plugin）若是可選插件列表爲空，點擊高級標籤頁，替換升級站點的URL爲：http://mirror.xmission.com/jenkins/updates/update-center.json而且點擊提交和當即獲取。
   
3. 添加觸發器
   第2步安裝的觸發器插件功能很強大，能夠根據不一樣的觸發參數觸發不一樣的構建操做，好比我向遠程倉庫提交的是master分支的代碼，就執行代碼部署工做，我向遠程倉庫提交的是某個feature分支，就執行單元測試，單元測試經過後合併至dev分支。靈活性很高，能夠自定義配置適合本身公司的方案，這裏方便演示咱們不作任何條件判斷，只要有提交就觸發。在任務配置裏勾選Generic Webhook Trigger便可
   

   

4. 倉庫配置鉤子 此處以碼云爲例，由於公司用的是碼雲，github的配置基本一致，進入碼雲項目主頁後，點擊管理-webhooks-添加，會跳出一個這樣的框來。
   

   

   URL格式爲 http://<User ID>:<API Token>@<Jenkins IP地址>:端口/generic-webhook-trigger/invoke userid和api token在jenkins的系統管理-管理用戶-admin-設置裏，這是個人

   

   Jenkins IP地址和端口是你部署jenkins服務器的ip地址，端口號沒改過的話就是8080。
   密碼填你和上面userid對應的密碼，我這裏是root。
   下面的幾個選項是你在倉庫執行什麼操做的時候觸發鉤子，這裏默認用push。
   點擊提交完成配置。
   
5. 測試鉤子
   

   

   點擊測試，若是配置是成功的，你的Jenkins左側欄構建執行狀態裏將會出現一個任務。
   

另外，你也能夠試下本地提交代碼，提交代碼後，jenkins也會開始一個任務,目前咱們沒有配置任務開始後讓它作什麼，因此默認它只會在你提交新代碼後，將新代碼拉取到jenkins服務器上。到此爲止，git鉤子咱們配置完成。

gif效果圖：

實現自動化構建

git push觸發鉤子後，jenkins就要開始工做了，自動化的構建任務能夠有不少種，好比說安裝升級依賴包，單元測試，e2e測試，壓縮靜態資源，批量重命名等等，不管是npm script仍是webpack，gulp之類的工做流，你以前在本地能作的，在這裏一樣能夠作。
做爲演示，這裏只演示三個基本經常使用的工做流程，安裝依賴包->單元測試->打包，也就是下面這三個命令。

npm install
npm run test
npm run build
複製代碼

1. 首先，和本地運行npm script同樣，咱們要想在jenkins裏面執行npm命令，先要在jenkins裏面配置node的環境，能夠經過配置環境變量的方式引入node，也能夠經過安裝插件的方式，這裏使用了插件的方式，安裝一下nvm wrapper這個插件。
   
2. 打開剛剛的jenkins任務，點擊配置裏面的構建環境，勾選這個，並指定一個node版本。
   

   

3. 點擊構建，把要執行的命令輸進去，多個命令使用&&分開。
   

4. 保存。
5. 此時本地修改一下代碼push測試一下（也能夠點擊當即構建測試），點擊本次觸發的那個任務，選擇控制檯輸出，將會看到Jenkins在雲端執行的過程。

命令行最後一行是Finished狀態的若是是SUCCESS（藍色）則證實執行的任務都順利進行，是FAILURE（紅色）則證實中間有重大錯誤致使任務失敗，UNSTABLE（黃色）表明有雖然有些小問題，但不阻礙任務進行，黃色或者紅色能夠去命令行看下錯誤輸出，看下哪裏出了問題。

6. 若是上一步是SUCCESS，點擊項目的工做空間，將會發現多了dist和node_modules兩個文件夾。

至此，咱們已經搭建了一個簡易的構建工做流程，構建完成了，咱們須要自動化部署。

實現自動化部署

自動化部署多是咱們最須要的功能了，公司就一臺服務器，咱們可使用人工部署的方式，可是若是公司有100臺服務器呢，人工部署就有些吃力了，並且一旦線上出了問題，回滾也很麻煩。因此這一節實現一下自動部署的功能。

1. 首先，先在Jenkins上裝一個插件Publish Over SSH，咱們將經過這個工具實現服務器部署功能。
2. 在要部署代碼的服務器上建立一個文件夾用於接收Jenkins傳過來的代碼，我在服務器上建了一個testjenkins的文件夾。
3. Jenkins想要往服務器上部署代碼必須登陸服務器才能夠，這裏有兩種登陸驗證方式，一種是ssh驗證，一種是密碼驗證，就像你本身登陸你的服務器，你可使用ssh免密登陸，也能夠每次輸密碼登陸，系統管理-系統設置裏找到Publish over SSH這一項。 重點參數說明：

Passphrase：密碼（key的密碼，沒設置就是空）
Path to key：key文件（私鑰）的路徑
Key：將私鑰複製到這個框中(path to key和key寫一個便可)

SSH Servers的配置：
SSH Server Name：標識的名字（隨便你取什麼）
Hostname：須要鏈接ssh的主機名或ip地址（建議ip）
Username：用戶名
Remote Directory：遠程目錄（上面第二步建的testjenkins文件夾的路徑）

高級配置：
Use password authentication, or use a different key：勾選這個可使用密碼登陸，不想配ssh的能夠用這個先試試
Passphrase / Password：密碼登陸模式的密碼
Port：端口（默認22）
Timeout (ms)：超時時間（毫秒）默認300000
複製代碼

配置完成後，點擊Test Configuration測試一下是否能夠鏈接上，若是成功會返回success，失敗會返回報錯信息，根據報錯信息改正便可。

4. 接下來進入咱們建立的任務，點擊構建，增長2行代碼，意思是將dist裏面的東西打包成一個文件，由於咱們要傳輸。

cd dist&&
tar -zcvf dist.tar.gz *
複製代碼

5. 點擊構建後操做，增長構建後操做步驟，選擇send build artificial over SSH， 參數說明：

Name:選擇一個你配好的ssh服務器
Source files ：寫你要傳輸的文件路徑
Remove prefix ：要去掉的前綴，不寫遠程服務器的目錄結構將和Source files寫的一致
Remote directory ：寫你要部署在遠程服務器的那個目錄地址下，不寫就是SSH Servers配置裏默認遠程目錄
Exec command ：傳輸完了要執行的命令，我這裏執行了解壓縮和解壓縮完成後刪除壓縮包2個命令
複製代碼

6. 如今當咱們在本地將 Welcome to Your Vue.js App修改成 Jenkins後發出一個git push，過一會就會發現咱們的服務器上已經部署好了最新的代碼，是否是很6。

至此，咱們的自動化部署也完成了，可是若是過程當中有異常怎麼辦，或是咱們想知道每次Jenkins運行的日誌及運行結果，咱們能夠經過配置郵件服務來讓Jenkins每次完成任務後通知相關人員。

實現郵件提醒

這裏咱們不用E-mail Notification，由於它的郵件服務功能太少，沒法自定義郵件內容及自定義觸發鉤子，並且只能在異常狀況下才能發郵件。咱們使用Editable Email Notification這個。

1. 打開系統管理-系統配置-Extended E-mail Notification，不是系統管理-系統配置-郵件通知，千萬不要配錯了，不然不起做用。配置一下用來發郵件的郵箱，我這裏用的是我本身的qq郵箱。

   

   要是用別的廠家的郵箱服務就查下別的郵箱廠家smtp怎麼配，用qq郵箱的除了user Name和password其餘的和我寫同樣就行。另外password寫的不是qq郵箱的密碼，而是開啓smtp服務後發短信獲取的密碼。
2. 打開建立的那個任務，增長構建後操做步驟選擇Editable Email Notification，Project Recipient List那裏寫你要發給誰郵件，能夠多個，用分號隔開。

而後點擊Advanced Settings-Triggers-Add Trigger，選擇always，意思是不管什麼狀況任務執行完就發郵件，也能夠選擇其餘模式，如任務執行異常了才發郵件。

我這裏配置的接收郵件的地址也是個人qq郵箱，這個能夠根據本身公司的工做流程配。
4. 如今當咱們在本地修改代碼後發出一個git push，Jenkins自動構建部署完成後就會給我發一封郵件，郵件附件裏會有本次任務的日誌。

至此，咱們的郵件提醒功能也配置完了。

最後

經過上面這個案例，咱們搭建了一套簡單的自動化工做流，只須要在本地發起一個git提交，就能夠在雲端自動化構建，自動化部署，部署完成或出現異常後自動郵件通知，讓持續集成、持續交付、持續部署變得簡單易操做，解放了人力構建部署的生產力，也統一了構建環境，真實線上的CI服務配置比這個要複雜，大致流程能夠參考下阮一峯老師的這篇文章:

持續集成是什麼？

Jenkins還有不少強大的特性，如Pipeline，slave等，插件也很豐富，社區生態也很好，若是公司暫時沒有自行搭建CI服務的能力，使用免費開源的Jenkins是很好的選擇。另外，若是你的項目是開源項目，也可使用Travis CI作持續集成，這個配置起來比Jenkins簡單，能夠參考百度EFE的這篇文章：

前端開源項目持續集成三劍客

(文章原創整理，轉載請註明出處，若是以爲文章對你有幫助，就點個贊吧，謝~)