初识Jenkins

背景

大家知道我之前搭了个博客，地址是 www.xiaojieboshi.com ，搭建的过程大家可以看《1小时带你搭建vuepress高大上个人博客》 这篇文章。但是有个问题，就是我每次写完博客发布到服务器上很繁琐，我一直想搞一个自动发布，持续集成，但是一直在忙别的事耽误了。这次我决定研究一下，把这件事给做了。

目的

大家可以看下之前我的一种工作模式，首先代码是我写的，然后我要本地执行run npm build编译一下，然后推到github上面去，然后把生成的aaa文件夹打成压缩包，这个就是可以直接运行查看的文件，然后通过工具上传到linux服务器，然后在服务器上解压放到对应的文件夹下，然后重启下nginx，一套流程下来，十分的繁琐，粉色的步骤都是需要我做的。

但是我要达到的效果就是自动化部署，就是下面粉色的，我只要做编写代码以及push到github，剩下的通通由jenkins来帮我做完，这个就是本篇文章需要实现的效果。

最后交代一下我买了一台腾讯云的服务器，43.128.34.245，jenkins和nginx都部署在上面，如下面所示：

接下来就是开始操作

Linux安装jenkins

1、安装jdk

记得安装jdk11或者17，因为这里有一个坑，从2022年7月2日起，jenkins新版本不再支持java8，仅支持java11和java17，否则会报错。

2、上官网查找自己想要的版本，https://mirrors.jenkins-ci.org/redhat/

3、选择需要的版本下载到本地，然后上传到linux服务器

4、直接安装

rpm -ivh jenkins-2.364-1.1.noarch.rpm
1

安装成功

5、修改启动端口

vim /etc/syscofig/jenkins
1

我这里把端口号改成了1234

6、配置jdk路径

vim /etc/init.d/jenkins
1

找到candidates这个变量，然后把安装的jdk11或者17路径添加进去

7、重新加载一下

systemctl daemon-reload
1

8、启动jenkins

cd /etc/init.d

# 启动
./jenkins start
# 停止
./jenkins stop
# 查看状态
./jenkins status

1
2
3
4
5
6
7
8
9

已经成功跑起来了

访问和初始化jenkins

1、输入http://43.128.34.245:1234/

IP是服务器IP地址，端口号是我刚刚设置的端口号

2、输入密码

进入上面红色的路径/var/lib/jenkins/secrets/initialAdminPassword

# 查看秘钥
cat /var/lib/jenkins/secrets/initialAdminPassword
1
2

然后把秘钥拷出来放进去，点击继续

3、安装插件

我们选择推荐的即可

这个就是正在安装的页面

4、设置admin账户

我们可以用默认的admin账号，但是建议自己重新创建一个

保存并完成

成功进入到界面

准备工作

增加权限

jenkins在执行shell脚本的时候会报权限不够，这时候我们需要给jenkins root的权限。

修改配置文件

vim /etc/sysconfig/jenkins
1

把JENKINS_USER=“jenkins” 改成 root

修改Jenkins相关文件夹用户权限

chown -R root:root /var/lib/jenkins
chown -R root:root /var/cache/jenkins
chown -R root:root /var/log/jenkins
1
2
3

重启下jenkins

安装nodejs

因为我们的项目是要用到node打包的，所以先在jenkins中安装nodeJs插件

进入到插件管理，搜索nodejs，然后选中安装即可

安装完成后进入到全局工具管理，选择新增nodejs，选择版本，这个很重要，太高了可能会报错，选择和本地一样的版本稳妥，填上别名，打钩自动安装，然后保存即可。

修改服务器时间

查看服务器时间

timedatectl | grep "Time zone"
1

进入jenkins的管理，选择脚本命令行

输入命令，点击运行即可

System.setProperty('org.apache.commons.jelly.tags.fmt.timeZone','Asia/Shanghai')
1

创建任务

点击左侧的新建item

输入名字，选择第一个，创建一个freestyle

General

通用这填下描述，构建记录保持7天，最多保持10次构建，还有github的地址。

源码管理

设置github项目的仓库地址，我们看下报错了，蓝色框框里的信息，什么意思呢，就是你原先的密码凭证从2021年8月13日开始就不能用了，必须使用个人访问令牌（personal access token），就是把你的密码替换成token！

所以我们在添加凭证的时候，这里的密码不能填写密码，而是要填github上生成的token。

添加完成后报错消失，选择构建的分支为master分支

构建环境

选择全局工具管理里面安装的nodejs

构建步骤

选择新增shell脚本

在里面输入几行脚本，然后点击保存

回到项目的管理界面测试一下，首先点1 Build Now，然后看到2处就会有个构建，构建完成后会变成绿色打钩，然后点3工作空间，可以看到4有个aaa文件夹生成了，这个就是jenkins把git上的代码拉下来，然后编译打包放到了aaa文件夹，这个就是可以直接运行的文件。

那么为什么会生成到aaa文件夹，因为这是我在代码里面配置的。

好，测试完成了，接下来就是把生成的文件部署到nginx，因为这里我是把jenkins和nginx装到了一台机器上，所以直接把文件夹拷到nginx的工作空间即可，如果是分别装在两台机器上，则需要装Publish over SSH插件，由jenkins的机器把打好的包远程传输到nginx的那台机器上部署。

我们看下剩下的命令

那为什么我把页面解压缩到/jack/aaa下，然后重启下nginx就能生效了，其实还是我在nginx里面配的，在nginx.conf里，默认就是访问这个文件夹下面的页面。

至此，新建一个Job就结束了。

Webhook

好，还差最后一步，我们看到上面演示的时候构建是手动点的Build Now这个按钮，虽然点一下也不累，但是还是想偷懒，不想手动点怎么办。就是做Webhook，就是我每次开发完，代码推到github，自动触发构建。

1、打开github，在settings里面增加一个webhook

2、在Payload URL填写jenkins的地址+/github-webhook/，这是固定格式

3、打开项目的配置，在构建触发器github hook这里打上勾，保存下即可

4、测试一下，我在源码标题这里加了一个1

5、推送一下github，我们看commit记录是21点56分

6、我们看下jenkins上已经自动创建了一个构建任务，说明webhook已经成功了。现在的时间是21点59分，那么为什么差了三分钟，主要是我commit完代码，push了好几次才成功的，github大家都懂的，不是很好访问的，所以真正push成功是在59分。

7、最后访问下博客，发现标题也成功的改掉了，多了一个1

演示圆满成功

结束语

以上就是我在实现前端项目自动化部署的全部过程，学习过程总是需要自己动手去操作才能知道有没有真的掌握，期间其实遇到很多问题，通过一步步排查、查阅资料，最终完成搭建，自动化部署的方案有很多种，这里我选用的是jenkins的一种，最后欢迎小伙们点赞、收藏、关注，一键三连，谢谢~