背景

1年前入職時(shí)，公司前端部門(mén)的靜態(tài)代碼部署都是用ftp工具拖拽部署，沒(méi)有記錄，沒(méi)有關(guān)聯(lián)，經(jīng)常造成許多困擾的問(wèn)題，

比如：今天有沒(méi)有其他人在我要部署的路徑上工作？我的代碼為啥被蓋掉了？被誰(shuí)蓋掉的？啥時(shí)候蓋掉的？

本地build，ftp拖拽部署這種方式，導(dǎo)致git版本與手動(dòng)的構(gòu)建、部署沒(méi)啥關(guān)聯(lián)，更有在本地寫(xiě)完代碼部署上去后，壓根沒(méi)傳git這種失誤可能發(fā)生。

靠人去遵守規(guī)范來(lái)控制工作流，總會(huì)有失誤、疏忽的發(fā)生。

想法

要靠機(jī)器和代碼去規(guī)范工作流，提高效率、準(zhǔn)確性，實(shí)現(xiàn)真正的前端工程化。

具體目標(biāo)

不討論通用模板(項(xiàng)目開(kāi)發(fā)層面)，只關(guān)心構(gòu)建以后的事情，精確的說(shuō)，就是從npm run build:xxx 這個(gè)腳本開(kāi)始對(duì)接，npm run build:xxx之前的事情不在本文討論范圍內(nèi)。 實(shí)現(xiàn)構(gòu)建-部署-測(cè)試(多個(gè)環(huán)境)-沙箱-上線(可回滾)的全部半自動(dòng)化流程把控。

為什么選擇jenkins：優(yōu)先選擇強(qiáng)大的開(kāi)源工具，避免重復(fù)造輪子，主要原因是插件特別豐富，基本可以滿足所有實(shí)際需求

先把成果貼上來(lái)，整體示意圖

核心思想是分離構(gòu)建、部署，所以每個(gè)項(xiàng)目，jenkins會(huì)建兩個(gè)job。

jenkins服務(wù)部署在公司內(nèi)網(wǎng)堡壘機(jī)上，使用tomcat管理jenkins的war包，占用系統(tǒng)服務(wù)、全量部署定時(shí)任務(wù)都跑在同一臺(tái)堡壘機(jī)上(Linux)。

因?yàn)閮?nèi)容很多，所以我直接采用一張圖 + 注釋 來(lái)零碎的講解每個(gè)功能的實(shí)現(xiàn)，因?yàn)槊總€(gè)公司的前端業(yè)務(wù)環(huán)境都不一樣，所以我也不打算花太大的筆墨去描述所有的實(shí)現(xiàn)。寫(xiě)這篇文章的目的就是可能某個(gè)思想、某一段對(duì)jenkins插件的使用等等會(huì)幫助到有類似需求的人。注釋會(huì)是截圖，或者是關(guān)鍵代碼，對(duì)應(yīng)圖中的數(shù)字。

先放幾張實(shí)際使用的圖

jenkins項(xiàng)目界面部分截圖

構(gòu)建job部分截圖

部署job部分截圖（使用jenkins-pipeline實(shí)現(xiàn)流程圖）

多套測(cè)試環(huán)境占用系統(tǒng)部分截圖（占用環(huán)境后別人無(wú)法部署，全量腳本也不會(huì)覆蓋）

全量部署腳本日志展示部分截圖

整體示意圖的注釋（每一條都對(duì)應(yīng)示意圖中的紅色阿拉伯?dāng)?shù)字）：

構(gòu)建和部署分離開(kāi)來(lái)，便于后續(xù)的各種操作，比如全量部署、分環(huán)境部署、回滾代碼等都是不需要構(gòu)建操作的，耦合在一起會(huì)做很多無(wú)用功。

同上

一次構(gòu)建三個(gè)包，保證了測(cè)試環(huán)境和沙箱、線上的構(gòu)建環(huán)境/副作用參數(shù)的一致性（用shell腳本實(shí)現(xiàn)，具體如何實(shí)現(xiàn)不細(xì)說(shuō)，就是循環(huán)變量執(zhí)行npm腳本，shell腳本由git倉(cāng)庫(kù)管理，jenkins配置時(shí)統(tǒng)一拉取代碼，這樣所有的項(xiàng)目配置可以同步。示例如下）

4. 下圖展示了部署job可操作的選項(xiàng)

上圖中有說(shuō)明

貼一段jenkinsfile代碼，語(yǔ)法為pipeline script

原理同6

占用系統(tǒng)是另外開(kāi)發(fā)的，配套使用，上面有占用系統(tǒng)的示意圖，是用node做后臺(tái)，vue+element做前臺(tái)快速開(kāi)發(fā)的，這里不展開(kāi)說(shuō)；

這個(gè)利用jenkins的Url Auth Plugin，再開(kāi)發(fā)一下對(duì)接公司統(tǒng)一登錄系統(tǒng)的api，就可以直接用了，本質(zhì)上是圍繞cookie來(lái)進(jìn)行的，每個(gè)公司都有自己的統(tǒng)一登錄(也可能沒(méi)有，那就使用jenkins自帶的用戶系統(tǒng))，這里不展開(kāi)說(shuō)。

全量部署腳本用corntab，用node腳本實(shí)現(xiàn)，核心思想在于讀取說(shuō)明6中的"now_online.json"來(lái)得知是哪一個(gè)包是線上的，取到這個(gè)包，同步到所有測(cè)試環(huán)境。同時(shí)檢測(cè)是否有改動(dòng)，沒(méi)改動(dòng)則跳過(guò)；同時(shí)檢測(cè)說(shuō)明8中的標(biāo)記，查明環(huán)境是否有人占用，占用也跳過(guò)。上面我有貼日志的截圖。

這里的意思就是，構(gòu)建任務(wù)還沒(méi)執(zhí)行完的時(shí)候，打開(kāi)了部署任務(wù)進(jìn)行部署，此時(shí)要檢查一下構(gòu)建任務(wù)是否插入了構(gòu)建完成的標(biāo)記，不然不能部署。

這里是我自認(rèn)為最大的亮點(diǎn)，“如何保證當(dāng)前分支上的代碼絕對(duì)不落后于master”？我們都知道m(xù)aster上的代碼即是線上最新代碼，當(dāng)多人協(xié)作開(kāi)發(fā)的時(shí)候，有人先上線，此時(shí)master代碼更新，而后上線的人還在用老的代碼測(cè)試、上線，這樣就會(huì)造成問(wèn)題，除了人為保證主動(dòng)去pull代碼，有沒(méi)有更可靠的方式？ 這里就是工程化的一大亮點(diǎn)，我們?cè)O(shè)想，如果后上線的人的分支上有落后于master的代碼，那么我們就不讓jenkins的構(gòu)建/部署成功！ 如何通過(guò)代碼實(shí)現(xiàn)并整合進(jìn)jenkins？我研究了一下git的命令，如果執(zhí)行 git log [你的當(dāng)前分支]..origin/master 打印了空值，那么說(shuō)明當(dāng)前分支沒(méi)有落后，如果打印了內(nèi)容，那么就說(shuō)明分支落后與master！具體用shell實(shí)現(xiàn)示例：

check_results=`git log $branchName..origin/master` if [[ ! $check_results = "" ]]thenecho "【Error】：當(dāng)前代碼比master落后，需要合并master或更新代碼重新打包之后才能進(jìn)行構(gòu)建！"exit 1elseecho "【info】:當(dāng)前代碼正常，可以部署！" fi 復(fù)制代碼

沒(méi)太多好說(shuō)的，打包出來(lái)的dist文件夾額外用eslint檢測(cè)一下就好，shell腳本實(shí)現(xiàn)。

通過(guò)說(shuō)明6中的pipeline script 中的 input 語(yǔ)法實(shí)現(xiàn)

回滾的關(guān)鍵代碼也在說(shuō)明6中有。

整篇文章比較零散，主要講了一下我對(duì)前端工程化探索的思想和實(shí)踐，因?yàn)槭诸^的需求也很多(18年一起工作的好幾個(gè)小伙伴被裁了，你猜他們剩下的工作誰(shuí)來(lái)做)，斷斷續(xù)續(xù)搞了兩三個(gè)月，目前這套系統(tǒng)已經(jīng)穩(wěn)定運(yùn)行幾個(gè)月了，不斷的完善使它現(xiàn)在很好用，線上再也不會(huì)出現(xiàn)因?yàn)橥四承┓种Р僮鲗?dǎo)致的bug；這套系統(tǒng)的優(yōu)點(diǎn)就是，基于開(kāi)源jenkins+核心思想，就可以很快的通過(guò)node/shell/pipelinescript搭建起一套完整的系統(tǒng)，成本極低！超級(jí)實(shí)用的功能卻實(shí)現(xiàn)很多！

如果你覺(jué)得讀完沒(méi)啥收獲或我寫(xiě)的實(shí)在不知所云，那就好好看看說(shuō)明12，我覺(jué)得把這一個(gè)小技巧分享出去，并且讓你有所收獲，那也值了，畢竟寫(xiě)作能力有限~

總結(jié)

以上是生活随笔為你收集整理的前端工程化：围绕Jenkins打造工作流的过程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。