Jenkins搭配Github实现自动化打包部署

上一篇文章 "前端组长如何利用Docker+Nginx+Jenkins实现项目部署" 中已经把除了Github触发Jenkins自动化任务以外的功能都走通了,今天就把剩下的这部分打通,实现代码push时自动化触发部署任务。

Jenkins配置

设置Url

这个url相当于一个接口,到时候会设置到github的仓库中,每次github 仓库代码提交到相应分支后会调这个接口,jenkins监听到就会触发自动化任务

设置任务可以被github触发

勾选这个就表明可以被GithubwebHook触发

增加Github WebHooks

选择相应仓库,进入设置,选择webHooks,添加webHooks

到这个时候只需要push代码就可以去jenkins中看任务是否执行,但是上一篇中我们脚本命令需要改一下,因为每次触发都会进入www/html文件夹中,需要把上一次的清除掉,当然是如果有的情况下

bash 复制代码
npm install pnpm -g
pnpm install
pnpm build
# 打包 build 后的文件
tar -zcvf dist.tar.gz dist/
# 删除 build 后的文件
rm -rf dist/
# 判断 /var/www/html 目录下是否存在 dist 文件夹,若存在则删除
if [ -d "/var/www/html/dist" ]; then
    rm -rf /var/www/html/dist
fi
# 移动 build 后的压缩包到 nginx 托管目录下。
echo "Hello, World!"
mv dist.tar.gz /var/www/html
echo "dist"
# 进入托管目录下
cd /var/www/html
# 解压
tar -zxf dist.tar.gz
# 删除压缩包
rm -rf dist.tar.gz

总结

到这里,一个工程化的打包任务就算是结束了,当然里面还有很多可以完善,这里由于篇幅就不展开了,这个是 "前端组长如何利用Docker+Nginx+Jenkins实现项目部署" 的下篇,如果对概念不熟悉的,可以看看上一篇,里面是从零到一建立的。

最后,如果这篇文章对您有所帮助的话,那将不胜感激

相关推荐
Cyber4K11 小时前
【Nginx专项】基础入门篇:状态页、微更新、内容替换、读取、压缩及防盗链
linux·运维·服务器·nginx·github
CoderJia程序员甲12 小时前
GitHub 热榜项目 - 日榜(2026-04-16)
ai·大模型·github·ai教程
逛逛GitHub12 小时前
GitHub 上刚开源的 Skill ,一句话控制你电脑上的软件。
github
CoovallyAIHub13 小时前
不改权重、不用训练!BEM用背景记忆抑制固定摄像头误检,YOLO/RT-DETR全系有效
算法·架构·github
CoovallyAIHub13 小时前
上交+阿里 | Interactive ASR:Agent框架做语音识别交互纠错,1轮交互语义错误率降57%
算法·架构·github
蒸汽求职13 小时前
北美求职身份过渡:Day 1 CPT 的合规红线与安全入职指南
开发语言·人工智能·安全·pdf·github·开源协议
We་ct15 小时前
Git 核心知识点全解析
开发语言·前端·git·gitee·github
无限进步_16 小时前
【C++】寻找字符串中第一个只出现一次的字符
开发语言·c++·ide·windows·git·github·visual studio
金融Tech趋势派16 小时前
Hermes Agent开源45天登顶GitHub,深度解析其记忆机制与部署方案
人工智能·微信·开源·github·企业微信·openclaw·hermes agent