👉 这是一个或许对你有用的社群
🐱 一对一交流/面试小册/简历优化/求职解惑，欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料：
《项目实战（视频）》：从书中学，往事上“练”
《互联网高频面试题》：面朝简历学习，春暖花开
《架构 x 系统设计》：摧枯拉朽，掌控面试高频场景题
《精进 Java 学习指南》：系统学习，互联网主流技术栈
《必读 Java 源码专栏》：知其然，知其所以然
👉这是一个或许对你有用的开源项目
国产 Star 破 10w+ 的开源项目，前端包括管理后台 + 微信小程序，后端支持单体和微服务架构。
功能涵盖 RBAC 权限、SaaS 多租户、数据权限、商城、支付、工作流、大屏报表、微信公众号、CRM 等等功能：
Boot 仓库：https://gitee.com/zhijiantianya/ruoyi-vue-pro
Cloud 仓库：https://gitee.com/zhijiantianya/yudao-cloud
视频教程：https://doc.iocoder.cn
【国内首批】支持 JDK 21 + SpringBoot 3.2.2、JDK 8 + Spring Boot 2.7.18 双版本
这次我们要接着上面的话题聊下如何通过 Jenkins 工具一键部署 Gitlab 上前端代码到服务器。
前提条件：该演示案例所用到的前端代码基于 Angular 框架，如果你用的是 Vue 框架，同样适用。
一、前端部署和后端部署差异：
前端只需要把前端工程生成静态文件丢到服务器上即可，而后端不只需要将 jar 包丢到服务器，还需要重启服务。
前端打包需要依赖 nodejs。而且 nodejs 的版本也需要高度适配前端所用的技术框架的版本（如 Angular JS 的版本）。
后端打包需要依赖 Maven。Maven 版本不需要和 JDK 的版本高度适配。
基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能
项目地址：https://github.com/YunaiV/ruoyi-vue-pro
视频教程：https://doc.iocoder.cn/video/
二、前端部署依赖
在编译打包的时候，我们需要安装指定的 NodeJS 版本和 NPM 版本。
2.1 NodeJS
Node.js是一个基于Chrome V8引擎的JavaScript运行环境 ，它使得JavaScript能够在服务端运行。Node.js是对Google V8引擎进行的封装，是服务器端的JavaScript解释器，极大地扩展了JavaScript的使用范围。如今，JavaScript不仅用于创建Web应用程序，还用于桌面应用程序、移动应用程序等各个领域。
我部署的 Jenkins 的在本机部署的，Windows 版本。因用 Jenkins 的 NodeJS 插件打包失败，所以在本地安装了 NodeJS，对应的版本为 18.10。NodeJS 的安装包可以到 NodeJS 的官网上获取。安装包地址如下：
https://nodejs.org/dist/可以通过 node -v 命令查看 node 版本。
如果你想使用 Jenkins 的 NodeJS 插件，可以在这下载安装。
2.2 NPM
npm 则是Node.js的包管理器 ，全称为Node Package Manager。npm则提供了管理JavaScript代码库和依赖的工具。
在打包前端项目时，需要通过 npm run build 打包。
npm run build 是一个npm命令，用于在项目中运行预定义的构建脚本。当在项目的根目录中执行这个命令时，npm会查找package.json文件中的"scripts"字段，并执行对应的构建命令。
安装 nodejs 时会自动安装 NPM。通过命令 npm -v 可以查看 npm 安装的版本。
基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能
项目地址：https://github.com/YunaiV/yudao-cloud
视频教程：https://doc.iocoder.cn/video/
三、Jenkins 前端部署思路
通过 Jenkins 从 Git 仓库获取代码
通过命令删除 Jenkins 工作空间的前端编译文件
通过 npm 安装依赖
通过 npm run build 编译打包前端项目
通过压缩命令将编译好的目录压缩成一个文件 tar.gz
通过 Jenkins ssh 插件将压缩包文件 tar.gz 拷贝到 linux 服务器
通过文件操作命令将之前的前端项目备份
通过解压命令将编译的压缩包解压到指定目录
四、配置任务
4.1 配置拉取的代码仓库
仓库 URL
用户名和密码
Jenkins 会从 Git 仓库拉取代码到本地工作空间，如下图所示：
Jenkins 会从 Git 仓库拉取代码到本地工作空间
4.2 删除 Jenkins 工作空间的编译文件
通过添加 Execute Windows batch command 配置来删除 Jenkins 工作空间的编译文件以及压缩包文件
del /q/a/f "%workspace%\dist\*.*"
del /q/a/f "%workspace%\dist.tar.gz"4.3 编译项目
通过添加 Execute Windows batch command 配置来执行打包命令。因多个 npm 命令放在同一个 command 里面执行会报错，所以拆分成了多个命令。如下所示，拆分成了 3 个命令。
执行上面的 npm 命令后，会在 Jenkins 工作空间生成对应的 node_modules 目录和编译文件，如下图所示：
4.4 压缩前端编译文件
将前端编译的 dist 目录压缩成 dist.tar.gz 包
4.5 拷贝和解压编译文件
4.5.1 安装插件
拷贝安装包需要用到一个插件：Publish Over SSH。
Dashboard>Manage Jenkins->插件管理->Avaliable plugins。
下图是已经安装好了这款 SSH 插件的截图。
配置这个插件的全局配置：
SSH Server Name：远程服务器的名字，后面在配置拷贝包的时候可以根据名字选择拷贝到哪台服务器。
Hostname：SSH Server 的 Hostname。
Username：SSH Server 登录名和密码或密钥。
Remote Directory：指定将文件拷贝到哪个目录。
示例配置如下所示：
4.5.2 拷贝编译文件的压缩包
通过 ssh 插件拷贝文件的配置如下图所示：
SSH Server：指定要将文件拷贝到哪个服务器，格式为 <用户名>@<ip 地址>。
Transfer Set Source files：jenkins 编译后的 前端项目 地址。通过之前的编译信息我们知道，dist 包地址在如下路径：
C:\ProgramData\Jenkins\.jenkins\workspace\<Jenkins 任务名>\dist.tar.gzRemove prefix：要移除的文件路径前缀。
Remte directory：拷贝到哪个路径下，如果之前已经配置过全局的文件夹，则拷贝的文件会放到 <全局文件夹>/之下，如果全局文件夹之下没有这个
Remote directory目录，则创建一个。这里我们不需要配置，全局配置已经可以满足条件了。
4.5.3 备份和解压服务器上的前端文件
在上传打包好的前端包之前，需要将应用服务器上的前端文件备份。
备份的步骤如下：
在远程服务器创建一个备份目录
bak。在备份目录
bak上创建一个以当前时间作为目录名的目录。将远程服务器的上 前端目录 重命名为原文件名+时间戳的名字。
#备份文件
cd /nfs-data/wukongliaojiagou/web-bak
timestamp=$(date +%Y%m%d%H%M%S)
mkdir ${timestamp}
cd /nfs-data/wukongliaojiagou
mv admin ./web-bak/${timestamp}/admin-${timestamp}
mv front ./web-bak/${timestamp}/front-${timestamp}
mv control ./web-bak/${timestamp}/control-${timestamp}
cd /nfs-data/wukongliaojiagou
# 解压文件
tar -zxvf dist.tar.gz
# 拷贝文件到前端目录
cp -r ./dist/admin admin
cp -r ./dist/front front
cp -r ./dist/control control
exit4.6 测试执行结果
通过点击 Build Now 按钮执行这个任务，可以看到执行成功，如下所示。
欢迎加入我的知识星球，全面提升技术能力。
👉 加入方式，“长按”或“扫描”下方二维码噢：
星球的内容包括：项目实战、面试招聘、源码解析、学习路线。
文章有帮助的话，在看，转发吧。
谢谢支持哟 (*^__^*）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
