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

笑在秋風中發表於2018-10-13

原文網址 : https://juejin.im/post/5bc000826fb9a05d330adf9d

三個問題（是什麼？為什麼？怎麼做？）

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

是什麼？

維基百科給出如下解釋：

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的下載與安裝

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開頭的檔案。

上面的命令只是完成了最基礎的部署工作，專案真正上線的時候，肯定是需要有備份操作的，下面是後端同事幫忙寫的一個通用的shell命令，

{
    uploadFileName=dist.tar.gz;
    frontHtmlFolder=/data/html/xyz/;
    backName=xyz
    cur_time=$(date '+%Y%m%d%H%M%S');
    mkdir -p /data/html;
    mkdir -p /data/backup/;
    rm -rf $frontHtmlFolder;
    mkdir -p $frontHtmlFolder;
    tar -zxvf /data/html/$uploadFileName -C $frontHtmlFolder;
    mv /data/html/$uploadFileName /data/backup/$cur_time"_"$backName"_"$uploadFileName;
}
複製程式碼

uploadFileName為專案壓縮檔案的名字，frontHtmlFolder為專案部署的路徑，backName為專案備份的名字。