圖解 Jenkins Pipeline 的前端自動化部署，用上后真香！

你好，我是悟空。

本文目錄如下：

• 一、Jenkins 前端部署思路

• 1.1 整體架構(gòu)圖

• 1.2 部署步驟

• 二、Pipeline和自由風(fēng)格對比

• 三、Pipeline 核心腳本

• 3.1 獲取 Git 代碼分支

• 3.2 拷貝依賴包

• 3.3 編譯代碼

• 3.4 備份代碼

• 3.5 上傳代碼

• 3.6 更新代碼

• 3.7 清理代碼

• 3.8 郵件通知

• 四、總結(jié)

二、Jenkins 前端部署思路

1.1 整體架構(gòu)圖

1.2 部署步驟

二、Pipeline和自由風(fēng)格對比

Jenkins是一個開源的自動化服務(wù)器，它可以幫助自動化各種任務(wù)，包括構(gòu)建、測試和部署軟件。

上次我們講解了如何通過 Jenkins 的自由風(fēng)格的軟件項(xiàng)目來配置前端的自動化部署，如下圖所示，如何選擇自由風(fēng)格的軟件項(xiàng)目。優(yōu)點(diǎn)就是簡單！

這次我們將講解如何通過流水線（Pipeline）方式來部署前端項(xiàng)目。優(yōu)點(diǎn)就是更加靈活！如下圖所示，就是選擇 Pipeline 方式。

在Jenkins中，有兩種主要類型的任務(wù)：Pipeline任務(wù)和自由風(fēng)格項(xiàng)目（Freestyle project）。

1. Pipeline任務(wù)：
• Pipeline任務(wù)是Jenkins 2.0引入的一個新特性，它使用Jenkinsfile來定義整個構(gòu)建流程。
• Jenkinsfile是一個文本文件，使用Groovy語言的DSL（領(lǐng)域特定語言），可以定義構(gòu)建的各個階段和步驟。
• Pipeline任務(wù)支持復(fù)雜的構(gòu)建流程，包括多個階段和步驟，以及并行執(zhí)行等高級功能。
• Pipeline任務(wù)可以很容易地與源代碼管理系統(tǒng)集成，支持持續(xù)集成（CI）和持續(xù)交付（CD）。
2. 自由風(fēng)格項(xiàng)目：
• 自由風(fēng)格項(xiàng)目是Jenkins早期版本中的主要任務(wù)類型，允許用戶通過Jenkins的Web界面配置構(gòu)建步驟。
• 這種類型的項(xiàng)目沒有固定的構(gòu)建流程定義方式，用戶可以手動添加構(gòu)建步驟、配置插件和參數(shù)等。
• 自由風(fēng)格項(xiàng)目適合快速設(shè)置簡單的構(gòu)建任務(wù)，但對于復(fù)雜的構(gòu)建流程，可能不如Pipeline任務(wù)靈活和強(qiáng)大。

兩者的主要區(qū)別包括：

• 定義方式：Pipeline任務(wù)通過Jenkinsfile定義，而自由風(fēng)格項(xiàng)目通過Jenkins的Web界面配置。
• 靈活性和擴(kuò)展性：Pipeline任務(wù)更加靈活，支持復(fù)雜的構(gòu)建流程和高級功能，如并行執(zhí)行和模板化。
• 集成度：Pipeline任務(wù)更容易與源代碼管理系統(tǒng)集成，實(shí)現(xiàn)自動化的CI/CD流程。
• 學(xué)習(xí)和使用難度：Pipeline任務(wù)可能需要用戶學(xué)習(xí)Jenkinsfile的語法和DSL，而自由風(fēng)格項(xiàng)目則更直觀，易于上手。

“

提示：Pipeline 任務(wù)代表了Jenkins的未來方向，提供了更高級的自動化構(gòu)建能力，而自由風(fēng)格項(xiàng)目則適合快速設(shè)置簡單的構(gòu)建任務(wù)。隨著Jenkins的發(fā)展，越來越多的用戶和組織傾向于使用Pipeline任務(wù)來實(shí)現(xiàn)更高效的自動化流程。

3.1 獲取 Git 代碼分支

3.1.1 Git 分支插件

用了一個插件 gitParameter，可以獲取 git 倉庫的分支，部署的時候，可以選擇分支。如下圖所示，Git 倉庫有 develop 和 master 分支，默認(rèn)選中 develop 分支。

3.1.2 Git 環(huán)境變量

3.1.3 獲取 Git 分支代碼

這個步驟中有一一行關(guān)鍵的代碼，可以通過 Git 插件獲取選擇的 Git 分支。

3.2 拷貝依賴包

因?yàn)?node_modules 不會上傳到 git 倉庫，所以我們需要提前準(zhǔn)備好。

而我們項(xiàng)目我是先在有網(wǎng)的 Linux 服務(wù)器上用 npm install 命令下載的依賴包，然后手動壓縮拷貝到 jenkins 服務(wù)器的 passjava 目錄。

當(dāng)執(zhí)行部署的時候，會從 passjava 目錄將 node_modules 壓縮包拷貝并解壓到 jenkins 的當(dāng)前工作目錄。

3.3 編譯代碼

編譯前端代碼可以用 npm run build xx 命令，然后將編譯后的 dist 目錄壓縮。

3.4 備份代碼

將 web 服務(wù)器上多個前端項(xiàng)目移動到備份目錄 web-bak 。

3.5 上傳代碼

將編譯后的代碼包上傳到 web 服務(wù)器。

3.6 更新代碼

將 dist 壓縮包解壓，然后將多個前端工程拷貝到 web 目錄。如 passjavabase, passjava-channel, project-contract 目錄拷貝到 passjava-web-micro 目錄。

3.7 清理代碼

清理 web 服務(wù)器上備份的代碼。

以下命令是查找并刪除指定路徑下超過7天未修改的目錄。

這條命令會找到 /nfs-data/passjava/web-bak/ 目錄下所有超過7天未修改的子目錄，并將其打印出來，然后刪除這些目錄。

1. 查找超過7天未修改的目錄：
• -mindepth 1：確保查找從指定目錄的子目錄開始，不包括指定的根目錄。
• -maxdepth 1：限制查找僅在指定目錄的第一層子目錄中進(jìn)行。
• -type d：只考慮目錄，不包括文件。“-type -f” 只考慮文件，不包括目錄。
• -mtime +7：篩選出修改時間超過7天的目錄。
• -print：打印出這些目錄的路徑。
2. 刪除找到的目錄：
• -exec rm -rf {} +：對找到的每個目錄執(zhí)行 rm -rf 命令，遞歸且強(qiáng)制刪除該目錄及其內(nèi)容。

該步驟的完整代碼如下：

3.8 郵件通知

詳見筆者之前寫的一篇：持續(xù)集成：Jenkins Pipeline 郵件通知

四、總結(jié)

通過使用 Jenkins Pipeline 進(jìn)行前端自動化部署，團(tuán)隊(duì)可以更加高效地管理和部署前端應(yīng)用程序，減少人為錯誤和手動操作帶來的風(fēng)險(xiǎn)，提升整體的開發(fā)和部署效率。

本文通過圖解+代碼的方式講解了前端自動化部署的步驟，文中的腳本針對前端的三個模塊進(jìn)行打包，比較耗時，所以后續(xù)可以優(yōu)化的地方是支持選擇部署前端的不同模塊。

Jenkins 文章匯總?cè)缦拢?/p>

• 1、持續(xù)集成：絲滑的 Docker 打包部署，一套帶走
• 2、持續(xù)集成：喝杯咖啡，一鍵部署后端完成！（建議收藏）
• 3、持續(xù)集成：喝杯咖啡，一鍵部署前端項(xiàng)目
• 4、持續(xù)集成：用代碼實(shí)現(xiàn)流水線部署后端項(xiàng)目，像詩一般優(yōu)雅
• 5、持續(xù)集成：如果你還不理解 RBAC，看看 Jenkins 如何做到的
• 6、持續(xù)集成：離線部署 Jenkins 填坑指南
• 7、持續(xù)集成：Jenkins Pipeline 郵件通知
• 8、持續(xù)集成：如何找到“BB”之人？（Break Build)