圖解 Jenkins Pipeline 的前端自動化部署，用上後真香！
你好，我是悟空。
本文目錄如下：
-
一、Jenkins 前端部署思路
-
1.1 整體架構圖
-
1.2 部署步驟
-
二、Pipeline和自由風格對比
-
三、Pipeline 核心指令碼
-
3.1 獲取 Git 程式碼分支
-
3.2 複製依賴包
-
3.3 編譯程式碼
-
3.4 備份程式碼
-
3.5 上傳程式碼
-
3.6 更新程式碼
-
3.7 清理程式碼
-
3.8 郵件通知
-
四、總結
二、Jenkins 前端部署思路
1.1 整體架構圖
1.2 部署步驟
二、Pipeline和自由風格對比
Jenkins是一個開源的自動化伺服器，它可以幫助自動化各種任務，包括構建、測試和部署軟體。
上次我們講解了如何透過 Jenkins 的自由風格的軟體專案來配置前端的自動化部署，如下圖所示，如何選擇自由風格的軟體專案。優點就是簡單！
這次我們將講解如何透過流水線（Pipeline）方式來部署前端專案。優點就是更加靈活！如下圖所示，就是選擇 Pipeline 方式。
在Jenkins中，有兩種主要型別的任務：Pipeline任務和自由風格專案（Freestyle project）。
- Pipeline任務：
- Pipeline任務是Jenkins 2.0引入的一個新特性，它使用Jenkinsfile來定義整個構建流程。
- Jenkinsfile是一個文字檔案，使用Groovy語言的DSL（領域特定語言），可以定義構建的各個階段和步驟。
- Pipeline任務支援複雜的構建流程，包括多個階段和步驟，以及並行執行等高階功能。
- Pipeline任務可以很容易地與原始碼管理系統整合，支援持續整合（CI）和持續交付（CD）。
- 自由風格專案：
- 自由風格專案是Jenkins早期版本中的主要任務型別，允許使用者透過Jenkins的Web介面配置構建步驟。
- 這種型別的專案沒有固定的構建流程定義方式，使用者可以手動新增構建步驟、配置外掛和引數等。
- 自由風格專案適合快速設定簡單的構建任務，但對於複雜的構建流程，可能不如Pipeline任務靈活和強大。
兩者的主要區別包括：
- 定義方式：Pipeline任務透過Jenkinsfile定義，而自由風格專案透過Jenkins的Web介面配置。
- 靈活性和擴充套件性：Pipeline任務更加靈活，支援複雜的構建流程和高階功能，如並行執行和模板化。
- 整合度：Pipeline任務更容易與原始碼管理系統整合，實現自動化的CI/CD流程。
- 學習和使用難度：Pipeline任務可能需要使用者學習Jenkinsfile的語法和DSL，而自由風格專案則更直觀，易於上手。
“三、Pipeline 核心指令碼提示：Pipeline 任務代表了Jenkins的未來方向，提供了更高階的自動化構建能力，而自由風格專案則適合快速設定簡單的構建任務。隨著Jenkins的發展，越來越多的使用者和組織傾向於使用Pipeline任務來實現更高效的自動化流程。
3.1 獲取 Git 程式碼分支
3.1.1 Git 分支外掛
用了一個外掛 gitParameter，可以獲取 git 倉庫的分支，部署的時候，可以選擇分支。如下圖所示，Git 倉庫有 develop 和 master 分支，預設選中 develop 分支。
3.1.2 Git 環境變數
3.1.3 獲取 Git 分支程式碼
這個步驟中有一一行關鍵的程式碼，可以透過 Git 外掛獲取選擇的 Git 分支。
3.2 複製依賴包
因為 node_modules 不會上傳到 git 倉庫，所以我們需要提前準備好。
而我們專案我是先在有網的 Linux 伺服器上用 npm install 命令下載的依賴包，然後手動壓縮複製到 jenkins 伺服器的 passjava 目錄。
當執行部署的時候，會從 passjava 目錄將 node_modules 壓縮包複製並解壓到 jenkins 的當前工作目錄。
3.3 編譯程式碼
編譯前端程式碼可以用 npm run build xx 命令，然後將編譯後的 dist 目錄壓縮。
3.4 備份程式碼
將 web 伺服器上多個前端專案移動到備份目錄 web-bak 。
3.5 上傳程式碼
將編譯後的程式碼包上傳到 web 伺服器。
3.6 更新程式碼
將 dist 壓縮包解壓，然後將多個前端工程複製到 web 目錄。如 passjavabase, passjava-channel, project-contract 目錄複製到 passjava-web-micro 目錄。
3.7 清理程式碼
清理 web 伺服器上備份的程式碼。
以下命令是查詢並刪除指定路徑下超過7天未修改的目錄。
這條命令會找到 /nfs-data/passjava/web-bak/ 目錄下所有超過7天未修改的子目錄，並將其列印出來，然後刪除這些目錄。
- 查詢超過7天未修改的目錄：
-mindepth 1：確保查詢從指定目錄的子目錄開始，不包括指定的根目錄。-maxdepth 1：限制查詢僅在指定目錄的第一層子目錄中進行。-type d：只考慮目錄，不包括檔案。“-type -f” 只考慮檔案，不包括目錄。-mtime +7：篩選出修改時間超過7天的目錄。-print：列印出這些目錄的路徑。- 刪除找到的目錄：
-exec rm -rf {} +：對找到的每個目錄執行rm -rf命令，遞迴且強制刪除該目錄及其內容。
該步驟的完整程式碼如下：
3.8 郵件通知
詳見筆者之前寫的一篇：持續整合：Jenkins Pipeline 郵件通知
四、總結
透過使用 Jenkins Pipeline 進行前端自動化部署，團隊可以更加高效地管理和部署前端應用程式，減少人為錯誤和手動操作帶來的風險，提升整體的開發和部署效率。
本文透過圖解+程式碼的方式講解了前端自動化部署的步驟，文中的指令碼針對前端的三個模組進行打包，比較耗時，所以後續可以最佳化的地方是支援選擇部署前端的不同模組。
Jenkins 文章彙總如下：
- 1、持續整合：絲滑的 Docker 打包部署，一套帶走
- 2、持續整合：喝杯咖啡，一鍵部署後端完成！（建議收藏）
- 3、持續整合：喝杯咖啡，一鍵部署前端專案
- 4、持續整合：用程式碼實現流水線部署後端專案，像詩一般優雅
- 5、持續整合：如果你還不理解 RBAC，看看 Jenkins 如何做到的
- 6、持續整合：離線部署 Jenkins 填坑指南
- 7、持續整合：Jenkins Pipeline 郵件通知
- 8、持續整合：如何找到“BB”之人？（Break Build)
![[社會社會]](https://i.iter01.com/images/1a2e5a81fc54c623d950456057296916a07be4e938773c5d3490bdedf2d303f0.png)