Jenkins丝滑的打包部署，一套带走！

在之前的文章中介绍过《使用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