前端進階之路-利用Jenkins快速打造前端專案自動化工作流

Hudson 工作流 · 發表 2018-10-17 14:08:14

摘要：如果你之前沒有接觸過持續整合相關的知識，難免會生出標題上的三個問題，現在我們就從上面說的三個問題開始講起：是什麼？維基百科給出如下解釋： Jenkins是一款由Java編寫的開源的持續整合工具。在與Oracle發生爭執後，專案從Hudson專案復刻。 Jenkin...

如果你之前沒有接觸過持續整合相關的知識，難免會生出標題上的三個問題，現在我們就從上面說的三個問題開始講起：

是什麼？

維基百科給出如下解釋：

Jenkins是一款由Java編寫的開源的持續整合工具。在與Oracle發生爭執後，專案從Hudson專案復刻。 Jenkins提供了軟體開發的持續整合服務。它執行在Servlet容器中（例如Apache Tomcat）。它支援軟體配置管理（SCM）工具（包括AccuRev SCM、CVS、Subversion、Git、Perforce、Clearcase和RTC），可以執行基於Apache Ant和Apache Maven的專案，以及任意的Shell指令碼和Windows批處理命令。Jenkins的主要開發者是川口耕介。[3]Jenkins是在MIT許可證下發布的自由軟體。[4]

說人話就是，Jenkins是一個持續整合的工具，我們可以通過它豐富的外掛系統，搭建自己需要的打包和編譯環境，通過設定的觸發機制，自動開始打包專案，並將打包好的專案部署到伺服器。

為什麼？

一句話，我可以一個操作或者自動完成專案的打包部署工作。想看更多，點此

怎麼做？

往下看，往下看，往下看。

基礎環境

本文以Mac-10.13.1，Jenkins-2.146，伺服器為linux作業系統，程式碼倉庫為GitLib為例

Jenkins的下載與安裝

ofollow,noindex">Jenkins下載地址

我這下載的是pkg檔案，直接雙擊進行安裝，

下面直接按照提示進行操作即可，安裝成功之後，會自動開啟瀏覽器顯示如下頁面

這個Administrator password並不是你電腦的密碼，而是安裝的時候，Jenkins自動生成的密碼，上面給出了密碼存放的路徑 /Users/Shared/Jenkins/Home/secrets/initialAdminPassword 在mac終端輸入 sudo vi /Users/Shared/Jenkins/Home/secrets/initialAdminPassword

就能看到視窗上面有一段字串，即為密碼，複製貼上進去即可

點選右下角的Continue按鈕進入如下介面

這一步操作是讓安裝Jenkins的外掛，有安裝推薦的外掛和自定義安裝外掛兩個選項，我們選擇安裝推薦的外掛，之後進入外掛安裝介面

等待安裝完成之後，如果有些外掛沒有安裝成功，先不用管，點選Continue進入建立使用者介面

建立完成之後，進入配置Jenkins地址介面，直接點選繼續就可以，當所有都配置完成之後，我們就進入到了Jenkins的主頁

恭喜你，已經成功安裝了Jenkins!

安裝相關外掛

點選Jenkins首頁 系統管理》外掛管理》可選外掛 ,如果未安裝以下外掛，請自行安裝。

NodeJs

新增Node環境，前端專案打包命令，需要依賴Node環境。安裝好之後，Build Environment 會出現

Publish Over SSH 將打包好的檔案上傳到伺服器，配置上傳成功之後要執行的命令。安裝完成後會出現在 Post-build Actions（構建後操作）

Git Parameter

通過這個外掛jenkins可以選擇任意一個branch來構建程式碼。在配置任務 General 》引數化構建 的下拉框中，在安裝這個外掛之後會出現 Git Parameter 選項

GitHub Branch Source

打包之前從遠端Git倉庫自動拉取程式碼，新增之後 Source Code Management 下會出現Git選項

注意：安裝的時候，外掛需要重啟才能生效的，可以把下面的選擇框勾選上，這樣安裝完外掛就會自動重啟

建立自動化部署任

點選首頁的 New 任務 或者 create new jobs ,進入建立頁面，輸入專案名字，選擇第一個 構建一個自由風格的軟體專案 ，

點選OK之後進入配置介面

General配置

原始碼管理

注意：

如果出現下面的錯誤

這個是許可權問題，需要Git倉庫的管理員，為Jenkins新增許可權。

構建觸發器

這個我並沒有配置，後面的測試會通過Jenkins直接進行Build，你可以根據你的需要選擇合適的觸發器

構建環境

選中 Provide Node & npm bin/ folder to PATH 之後，你會發現NodeJS Installation並沒有可選項

不要著急，點選 系統設定》全域性工具配置

找到NodeJS,選擇和你開發環境一樣的NodeJS版本，然後點選儲存

回到配置頁面，重新整理一下，就能正確的顯示

構建

選擇 執行shell 在Command視窗中填寫你平常打包使用的命令，因為打包完成後要上傳到伺服器，所以添加了壓縮檔案的命令

程式碼

echo $WORKSPACE
node -v
npm -v

npm install&&
npm run build

cd dist
tar -acvf dist.tar.gz *
複製程式碼

構建後操作

在進行這個操作之前，我們需要新增對要上傳的伺服器進行全域性的配置，進入 系統管理》系統設定 ,找到 Publish over SSH ,點選Add按鈕，

新增如下配置

當然，這樣的配置是訪問不到伺服器的，密碼都還沒有呢，點選高階按鈕，勾選 Use password authentication, or use a different key

，輸入密碼，

好了，大功告成，我們點選 Test Configuration

按鈕，一個菊花轉過之後，會出現Success字樣，

最後一步，點選儲存

按鈕。

讓我們回到配置頁面，在構建後操作下選擇 Send build artifacts over SSH ,新增如下配置，

Exec command

中的程式碼為

tar -zxvf /data/html/delivery/dist.tar.gz -C /data/html/delivery/
rm -rf /data/html/delivery/dist*
複製程式碼

命令的意思是將dist.tar.gz解壓到 /data/html/delivery/ 下面，並刪除dist開頭的檔案。

執行打包釋出操作

回到Jenkins，找到你剛才新建的任務，點選任務後面的按鈕

或者進入任務詳情頁面，點選 Build with Parameters

,選擇你要構建的分支，並點選開始構建

在 Build History

中我們能看到正在進行中的任務和已完成的任務

等進度條走完，並且前面的小球顏色為藍色，也就是#29一樣的顏色，表明打包成功，我們還能點選#30旁邊的小三角，選擇檢視控制檯輸出，就如同在本機打包一樣，控制檯提供了詳細的日誌資訊，我們拉到結尾處可看到，