jenkins 部署前端一步到位

最新推荐文章于 2025-08-18 14:10:46 发布

原创最新推荐文章于 2025-08-18 14:10:46 发布 · 437 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#jenkins #前端 #运维

项目部署专栏收录该内容

12 篇文章

订阅专栏

文章详细介绍了如何在Jenkins中安装和配置NodeJs及PublishOverSSH插件，用于从Gitee获取代码并自动化执行NodeJs构建与打包流程。打包完成后，通过PublishOverSSH将文件上传至宿主机的Nginx目录，实现版本更新。

一. 安装必要插件

【首页】–【系统管理】–【插件管理】–【可选插件】

gitee : 码云插件
nodeJs 前端打包软件
Publish Over SSH 用于将容器内的文件推送到容器外面

在这里插入图片描述

| 如果出现插件安装失败

在这里插入图片描述

| 一般是jenkins版本不兼容,升级jenkins版本试一下

在这里插入图片描述

二. 对插件进行配置

1.nodeJs

系统管理 -> 全局工具配置
在这里插入图片描述

拉到最底下,找到nodeJs改这两个地方就行

2. Publish Over SSH

系统管理->系统设置
在这里插入图片描述

下拉找到 Publish Over SSH
在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/6e3024f74b524e168c9be226f7d7707e.png
这5个设置完后点击

然后保存,这两个配置完我们就可以创建任务啦

三. 新建一个任务

1. 新建任务

在这里插入图片描述

2. 配置gitee

在这里插入图片描述

进入gitee

然后这里选择上面加的

在这里插入图片描述

3. 选择nodeJs

在这里插入图片描述

4. 执行nodeJs命令

在这里插入图片描述

cd yudao-ui-admin
pwd
npm install # 因为node_modules没有提交所以需要install
npm run build:dev # npm命令打包项目
find ./dist -type d -name ".svn"|xargs rm -rf # 删除dist包下所有的.svn文件,因为,svn没用且大
rm -rf dist.tar.gz # 删除上一个\已存在的dist压缩包
tar -zcvf dist.tar.gz dist # 将新打的dist包进行压缩
echo "打包完成"
echo "当前位置"

5. 将打包好的文件上传至宿主机

在这里插入图片描述

# 进入宿主机nginx目录
cd /usr/local/nginx/html 
# 备份上一个版本的文件如果有的话
mv dist dist.`(date +%Y%m%d_%H:%M)`  || true 
# # 解压dist压缩包
tar -zxvf dist.tar.gz 
# 解压完成后删除tar包
rm -rf dist.tar.gz