背景

公司的前端構建及部署工作都是人工去做，隨著業務擴大，專案迭代速度變快，人員增多，各種問題都暴露出來，本文是對前端自動化工作流進行探索後的一篇經驗分享，將通過一個簡單案例分享一下基於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的這篇文章：

前端開源專案持續整合三劍客

(文章原創整理，轉載請註明出處，如果覺得文章對你有幫助，就點個贊吧，謝~)