Jenkins配置前端自动化打包发布

记录本人配置前端打包过程

前置条件

插件

NodeJS Plugin：用于管理和安装 Node.js 环境，以便在 Jenkins 中构建和测试前端应用程序。
Git Plugin：用于从 Git 存储库中检出代码，以便能够运行构建和打包任务。
HTML Publisher Plugin：用于将生成的 HTML 报告和文档发布到 Jenkins 上可访问的网址。
Publish Over SSH Plugin：用于将最终的前端打包文件上传到目标服务器上。

全局配置

在Jenkins服务器安装
服务器安装node参考https://blog.csdn.net/qq_41974199/article/details/119328353
服务器安装npm参考https://blog.csdn.net/weixin_45623111/article/details/122102446
本章不多作解释

添加前端服务器

配置前端项目

新建ltem

General

源码管理

构建环境

Send files or execute commands over SSH before the build starts

选择构建前操作做备份效果

因为前面在添加了前端服务器是填写的是绝对工作路径这里可以不用填写
dist.tar.gz-`date +%Y-%m-%d`

Provide Node & npm bin/ folder to PATH

构建Build Steps

我这里使用的是npm做的打包，如果用yarn的话就把npm install和npm run build改成yarn install和yarn build

#全局安装 Yarn：
sudo /usr/local/node/bin/npm install yarn -g
#安装项目所需的依赖（使用 --legacy-peer-deps 标志是为了解决旧版本 npm 中的依赖问题）
sudo /usr/local/node/bin/npm install --legacy-peer-deps
#构建前端应用，注意选择对应分支
sudo /usr/local/node/bin/npm run build:sit
#打包
tar -zcvf dist.tar.gz dist
​
我在配置时一定要sudo ＋ 绝对路径才能执行
当第一次构建成功后可将第一行和第二行删除掉，以减少构建时间

构建后操作

构建完成后会发送到服务器内

这里脚本内容自定，终是为了解压Jenkins发送来的前端包

构建中

构建成功转发请标明出处，感谢各位大佬。有问题可留下问题一起探讨