🌸 Docker+Nginx+Jenkins+GitHub 实现自动化部署上线流程 (二)🌸

501 阅读4分钟

目的

实现git commit后,自动化部署然后更新线上环境的代码

用到的技术栈:CentOS+Docker+Nginx+Jenkins

参考文章:juejin.cn/post/730603…

十分感谢 @不叫猫先生 大佬的文章,juejin.cn/user/835284… 本文章只是看了大佬的文章做了一些总结和提炼,就当做是一个学习笔记和踩坑日记

接上书,我们完成了对服务器和jenkens的基本环境配置,接下来我们现在Github创建一个自己的仓库,这里我已经创建好啦,所以这里就先略过了,我们直接开始这次的重头戏

为jenkins工程添加nodejs环境

image.png 然后添加nodejs别名(这里取名叫node),然后选择你的nodejs版本(从这里看出来jenkins的特点,既可以统一nodejs的版本,也可以添加不同版本的nodejs来配合某些特殊的项目)

为jenkins添加中文插件

image.png

jenkins工程

访问我们的jenkins地址:ip:8080/jenkins_home,然后新建一个任务

image.png

然后我们构建一个自由风格的软件项目

image.png image.png

然后在源码管理这一栏中,我们在第一栏中填写git地址,在第二栏选择我们的凭证。源码管理这一栏主要是为我们工程从github拉取代码做的配置

✅小坑一:假如我们选择的凭证是ssh凭证(一般叫root),我们第一栏填写的url必须是git仓库ssh的地址, 假如我们第二栏填写的是username(一般是你github邮箱地址命名的凭证),我们第一栏填写的url必须是 git仓库的https地址

✅小坑二:我们在选取分支的时候,不要忘记修改,因为github现在默认的分支是main分支,而jenkins他默认的分支还是master

image.png

image.png

然后构建触发器这一栏中选择 webhook trigger这一项(这里还要在和github产生联动,github只要commit后,就会触发我们的jenkins进行构建,我们下面讲)

image.png 然后在构建环境这一栏选择

image.png

然后选择本工程的nodejs版本(就是你之前创建的nodejs版本)

image.png

然后在Build Steps添加我们的构建步骤,就可以编写构建脚本了,这里简化了构建脚本的书写,原本应该是yml工程文件

image.png

我们可以先写一下 最大多数项目的构建脚本,这样之后,我们就在项目根目录生成了一个dist压缩包

image.png

#!/bin/bash
node -v 
npm -v 
npm i
npm run build
echo "打包完成"
rm -rf dist.tar     # 每次构建删除已存在的dist压缩包
tar -zcvf dist.tar ./dist  #将dist文件压缩成dist.tar
echo "压缩完成"
echo $PATH

注意这里我们也可以执行当前项目中package.json中的脚本,或者假如你想用pnpm对依赖进行安装,那么就可以在前面添加一句npm i pnpm -g

然后我们要做的是把压缩包放在nginx反向代理的文件夹里并且压缩,添加构建步骤

image.png

然后添加这几项

cd /docker/html/dev
rm  -rf   dist/
tar zxvf dist.tar
rm dist.tar

image.png

然后点保存,这样就完成了工程的基础配置

github工程添加webhook

webhook有什么作用呢?您手机上的应用程序以及你访问的网站,它们之间进行通信。它们相互传递请求和响应,从而使您能够无缝查看你请求的响应,这就是webhook的作用

在你的github仓库的settings中添加webhooks

image.png

添加webhook

image.png

注意:首先ip前面要带上http协议,其次url的地址最后一定要以’/‘结尾

然后我们点击创建就可以了

image.png

然后我们可以测试一下,如果出现✅的话就说明连接成功了,也就是当我们commit代码的时候,就会触发jenkins进行构建。 image.png

构建工程

然后我们就可以点击一下立即构建,看一看是否可以

image.png

成功的话,那我们就其实大功告成了

仍有疑惑的点

在nginx.conf中,为什么这个默认路径是/usr/share/nginx开头的

image.png 🌸 Docker+Nginx+Jenkins+GitHub 实现自动化部署上线流程(一): juejin.cn/post/735292…