在之前的文章中介紹過《使用Jenkins一鍵打包部署SpringBoot項目》，其實Jenkins也可以用來打包部署前端項目。今天就以mall電商實戰項目的前端為例，來講解下如何使用Jenkins一鍵打包部署前端項目。

學習準備

學習本文需要有一定的Jenkins基礎，比如瞭解Jenkins的安裝和基本使用，這些內容可以參考這篇文章：

《Jenkins+Docker一鍵部署SpringBoot項目！步驟齊全，少走坑路！》

mall項目

這裏先簡單介紹下mall項目，mall項目是一套基於SpringBoot3 + Vue 的電商系統（Github標星60K），後端支持多模塊和2024最新微服務架構，採用Docker和K8S部署。包括前台商城項目和後台管理系統，能支持完整的訂單流程！涵蓋商品、訂單、購物車、權限、優惠券、會員、支付等功能！

• Boot項目：https://github.com/macrozheng/mall
• Cloud項目：https://github.com/macrozheng/mall-swarm
• 教程網站：https://www.macrozheng.com

項目演示：

安裝及配置插件

Vue前端應用的打包需要依賴NodeJS插件，所以我們需要先安裝並配置該插件。

• 首先在系統管理->插件管理中選擇安裝插件，Jenkins訪問地址：http://192.168.3.101:8180

• 搜索NodeJS插件並進行安裝；

• 插件安裝成功後在系統管理->全局工具配置中進行插件配置，選擇新增NodeJS，這裏選擇的是v20.18.1版本，點擊保存即可完成設置。

一鍵部署Vue前端項目

我們需要創建一個任務來打包部署我們的前端應用，這裏以mall電商實戰項目的前端mall-admin-web項目為例。

• 整個任務執行流程如下；

• 我們選擇構建一個自由風格的軟件項目；

• 在源碼管理中添加Git代碼倉庫相關配置，這裏直接使用Gitee上的代碼倉庫即可：https://gitee.com/macrozheng/mall-admin-web

• 在構建環境中把我們之前配置好的的Node環境添加進去；

• 然後在構建步驟添加一個執行shell的步驟，用於將我們的前端代碼進行編譯打包；

• 執行的shell腳本如下；

# 查看版本信息
npm -v
# 將鏡像源替換為淘寶的加速訪問
npm config set registry https://registry.npmmirror.com
# 安裝項目依賴
npm install
# 項目打包
npm run build

• 再添加一個使用ssh執行遠程腳本的步驟，用於將我們打包後的代碼發佈到Nginx中去；

• 遠程執行腳本如下：

docker stop nginx
echo '----stop nginx----'
rm -rf /mydata/nginx/html/admin
echo '----rm html dir----'
cp -r /mydata/jenkins_home/workspace/mall-admin-web/dist /mydata/nginx/html/admin
echo '----cp dist dir to html dir----'
docker start nginx
echo '----start nginx----'

• 點擊保存後，直接在任務列表中點擊運行按鈕即可完成前端項目的自動化部署。

• 運行成功後即可正常訪問mall項目後台管理系統，訪問地址：http://192.168.3.101/admin/

總結

使用Jenkins不僅可以一鍵打包部署基於SpringBoot的後端項目，也可以一鍵打包基於Vue的前端項目，感興趣的小夥伴可以嘗試下！

項目地址

https://github.com/macrozheng/mall-admin-web