前端工程化：圍繞Jenkins打造工做流的過程

背景

1年前入職時，公司前端部門的靜態代碼部署都是用ftp工具拖拽部署，沒有記錄，沒有關聯，常常形成許多困擾的問題，

好比：今天有沒有其餘人在我要部署的路徑上工做？個人代碼爲啥被蓋掉了？被誰蓋掉的？啥時候蓋掉的？

本地build，ftp拖拽部署這種方式，致使git版本與手動的構建、部署沒啥關聯，更有在本地寫完代碼部署上去後，壓根沒傳git這種失誤可能發生。

靠人去遵照規範來控制工做流，總會有失誤、疏忽的發生。

想法

要靠機器和代碼去規範工做流，提升效率、準確性，實現真正的前端工程化。

具體目標

不討論通用模板(項目開發層面)，只關心構建之後的事情，精確的說，就是從npm run build:xxx 這個腳本開始對接，npm run build:xxx以前的事情不在本文討論範圍內。 實現構建-部署-測試(多個環境)-沙箱-上線(可回滾)的所有半自動化流程把控。

爲何選擇jenkins：優先選擇強大的開源工具，避免重複造輪子，主要緣由是插件特別豐富，基本能夠知足全部實際需求

先把成果貼上來，總體示意圖

核心思想是分離構建、部署，因此每一個項目，jenkins會建兩個job。

jenkins服務部署在公司內網堡壘機上，使用tomcat管理jenkins的war包，佔用系統服務、全量部署定時任務都跑在同一臺堡壘機上(Linux)。

由於內容不少，因此我直接採用一張圖 + 註釋 來零碎的講解每一個功能的實現，由於每一個公司的前端業務環境都不同，因此我也不打算花太大的筆墨去描述全部的實現。寫這篇文章的目的就是可能某個思想、某一段對jenkins插件的使用等等會幫助到有相似需求的人。註釋會是截圖，或者是關鍵代碼，對應圖中的數字。

先放幾張實際使用的圖

jenkins項目界面部分截圖

構建job部分截圖

部署job部分截圖（使用jenkins-pipeline實現流程圖）

多套測試環境佔用系統部分截圖（佔用環境後別人沒法部署，全量腳本也不會覆蓋）

全量部署腳本日誌展現部分截圖

總體示意圖的註釋（每一條都對應示意圖中的紅色阿拉伯數字）：

1. 構建和部署分離開來，便於後續的各類操做，好比全量部署、分環境部署、回滾代碼等都是不須要構建操做的，耦合在一塊兒會作不少無用功。
2. 同上
3. 一次構建三個包，保證了測試環境和沙箱、線上的構建環境/反作用參數的一致性（用shell腳本實現，具體如何實現不細說，就是循環變量執行npm腳本，shell腳本由git倉庫管理，jenkins配置時統一拉取代碼，這樣全部的項目配置能夠同步。示例以下）

4. 下圖展現了部署job可操做的選項

5. 上圖中有說明
6. 貼一段jenkinsfile代碼，語法爲pipeline script

   

7. 原理同6
8. 佔用系統是另外開發的，配套使用，上面有佔用系統的示意圖，是用node作後臺，vue+element作前臺快速開發的，這裏不展開說；
9. 這個利用jenkins的Url Auth Plugin，再開發一下對接公司統一登陸系統的api，就能夠直接用了，本質上是圍繞cookie來進行的，每一個公司都有本身的統一登陸(也可能沒有，那就使用jenkins自帶的用戶系統)，這裏不展開說。
10. 全量部署腳本用corntab，用node腳本實現，核心思想在於讀取說明6中的"now_online.json"來得知是哪個包是線上的，取到這個包，同步到全部測試環境。同時檢測是否有改動，沒改動則跳過；同時檢測說明8中的標記，查明環境是否有人佔用，佔用也跳過。上面我有貼日誌的截圖。
11. 這裏的意思就是，構建任務還沒執行完的時候，打開了部署任務進行部署，此時要檢查一下構建任務是否插入了構建完成的標記，否則不能部署。
12. 這裏是我自認爲最大的亮點，「如何保證當前分支上的代碼絕對不落後於master」？咱們都知道master上的代碼便是線上最新代碼，當多人協做開發的時候，有人先上線，此時master代碼更新，然後上線的人還在用老的代碼測試、上線，這樣就會形成問題，除了人爲保證主動去pull代碼，有沒有更可靠的方式？ 這裏就是工程化的一大亮點，咱們設想，若是後上線的人的分支上有落後於master的代碼，那麼咱們就不讓jenkins的構建/部署成功！ 如何經過代碼實現並整合進jenkins？我研究了一下git的命令，若是執行 git log [你的當前分支]..origin/master 打印了空值，那麼說明當前分支沒有落後，若是打印了內容，那麼就說明分支落後與master！具體用shell實現示例：

check_results=`git log $branchName..origin/master`
if [[ ! $check_results = "" ]]
   then
   	echo "【Error】：當前代碼比master落後，須要合併master或更新代碼從新打包以後才能進行構建！"
   	exit 1
   else
   	echo "【info】:當前代碼正常，能夠部署！"
fi
複製代碼

13. 沒太多好說的，打包出來的dist文件夾額外用eslint檢測一下就好，shell腳本實現。
14. 經過說明6中的pipeline script 中的 input 語法實現
15. 回滾的關鍵代碼也在說明6中有。

整篇文章比較零散，主要講了一下我對前端工程化探索的思想和實踐，由於手頭的需求也不少(18年一塊兒工做的好幾個小夥伴被裁了，你猜他們剩下的工做誰來作)，斷斷續續搞了兩三個月，目前這套系統已經穩定運行幾個月了，不斷的完善使它如今很好用，線上不再會出現由於忘了某些分支操做致使的bug；這套系統的優勢就是，基於開源jenkins+核心思想，就能夠很快的經過node/shell/pipelinescript搭建起一套完整的系統，成本極低！超級實用的功能卻實現不少！

若是你以爲讀完沒啥收穫或我寫的實在不知所云，那就好好看看說明12，我以爲把這一個小技巧分享出去，而且讓你有所收穫，那也值了，畢竟寫做能力有限~