嘿！Jenkins前端自动化部署

为什么要写这篇文章呢，首先要从一只蝙蝠🦇说起了…
以前我们上线一个项目的方式是本地开发完成，将编译打包的编译产物使用FTP或者其他方式部署在服务器上，这种方式是既繁琐又低效的。所以呢本期将使用Jenkins搭建一套前端自动化部署流水线。

一、前端自动化部署流程介绍

本地代码push到远程仓库
服务器端Jenkins监听到后执行构建任务，拉取代码，执行编译打包，将编译产物部署到web项目工作目录
服务端Nginx反向代理，是客户端可以访问

二、做点准备

首先搞一个服务器，我自己的是阿里云(新老用户，优惠多多)，操作系统： CentOS 7.6 64位，其他系统可以作为参考。
使用ssh远程链接服务器，本文是Mac终端工具iTerm2,当然Terminal也可以的，总之能连上远程服务器就可以的
创建一个代码仓库，本文使用的码云Gitee，毕竟GitHub有些慢…

三、server端配置

安装java环境

1	sudo yum install java

查看版本号

1	java -verson

若有版本号输出，表示安装成功

安装git

1	sudo yum install git

查看版本号

1	git -version

若有版本号输出，表示安装成功

安装 Jenkins

本文采用的方式2

方式1

如果之前使用 Jenkins 导入过 key，忽略此步骤，如果第一次安装则输入如下命令

1 2	sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key

安装

1	yum -y install jenkins

这种方式很慢，可以尝试方式2

方式2

1.先将jenkins下载到本地点击这里，本文是jenkins-2.204.2-1.1.noarch.rpm
2.使用Transmit推到服务器(其他软件/操作系统可以参考)
3.

1	sudo rpm -ih jenkins-2.204.2-1.1noarch.rpm

如果执行报错，可以看下是否有这三个目录，没有则需要创建

启动Jenkins

1	service jenkins start

如果启动成功，我们在浏览器输入http://服务器地址:8080就能访问到入门页面了，如果不能访问检查8080端口是否被占用

配置Jenkins权限

现在的 Jenkins如果执行shell脚本，还不具备相应权限。需要进行如下操作

1
2
3

sudo vim /etc/sysconfig/jenkins
编辑状态中
JENKINS_USER="root"

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

chown -R root:root /var/lib/jenkins
chown -R root:root /var/cache/jenkins
chown -R root:root /var/log/jenkins
service jenkins restart

Jenkins安装插件提速

当我们进入Jenkins中安装插件时会发现慢的丧心病狂，所以从网上找到一个真心不错的方法
首先进入Jenkins更新配置位置，我的是/var/lib/jenkins

1	$ cd {你的Jenkins工作目录}/updates #进入更新配置位置

使用sed

1	$ sed -i 's/http:\/\/updates.jenkins-ci.org\/download/https:\/\/mirrors.tuna.tsinghua.edu.cn\/jenkins/g' default.json && sed -i 's/http:\/\/www.google.com/https:\/\/www.baidu.com/g' default.json

这是直接修改的配置文件，如果前边Jenkins用sudo启动的话，那么这里的两个sed前均需要加上sudo

重启Jenkins

四、gitee配置

创建自己的仓库，上传自己的代码(若没有先注册)
打开仓库设置添加公钥(服务器公钥)

服务器公钥生成方式
进入服务器

1	ssh-keygen -t rsa -C "***@163.com"

根据提示完成三次回车即可生成 ssh key，通过 cat ~/.ssh/id_rsa.pub 即可查看服务器的公钥。
添加公钥

五、配置Jenkins

初始化

浏览器输入http://服务器地址:8080就能访问到入门页面，按照提示将密码复制粘贴，点击继续

安装插件，可以选择推荐(由于上面配置了安装插件提速，这里应该会很快，如果还是很慢，或者安装失败，可以先跳过)
安装完插件之后要创建用户，创建完成后点击保存并完成
点击开始使用

创建第一个新任务

进入首页点击新建Item或者开始创建一个新任务，开始我们的第一步

输入任务名，比如self-project,选择构建一个自由风格的软件项目

进入任务实例中，点击配置，进入任务配置页面

Git hook

现在要搞一下git钩子功能，当我们本地向远程仓库push代码，远程仓库会向配置的Jenkins服务器接口地址发送一个POST请求，Jenkins收到之后会构建触发任务。

1.在配置页面点击源码管理，勾选Git,如下配置

2.添加触发器
使用Generic Webhook Trigger Plugin 插件(若没有则需要安装)，勾选，添加Token(用于触发远程仓库web hooks 的标识)

仓库配置钩子

打开仓库管理，添加webHook,
URL规则为：http://:<端口>/generic-webhook-trgger/invoke?token=<$token>
$token为Jenkins 任务配置中构建触发器中配置的token
最后选择添加

构建配置

这里是指git 拉取代码后，执行的构建任务，一般会有升级依赖包，测试，压缩资源等，本文只是一个demo,只涉及到将代码部署到web工作目录中
选择构建 => 增加构建步骤 => 执行shell
执行命令的操作是将目录下的文件，复制到/work/lsq web工作目录下

1	\cp -r -a ./* /work/lsq

点击应用并保存

测试

当我们配置完成后，可以测试一下

在本地仓库向远程仓库push一下代码
Jenkins对应的任务中，可以看到构建历史
点击进去可以看到控制台输出

进入服务器查看

服务器 work/lsq 目录下确实同步更新，表示成功了！

Nginx配置

当自动化部署成功后，希望我用户可以访问到我服务器的页面，这就需要用到Nginx
如果想要了解更多Nginx 可以参考这里
本次只涉及在服务器中Nginx的安装及简单使用

安装Nginx

1	sudo yum install nginx -y

检验是否成功安装

nginx -v

输出版本号表示安装成功

访问首页

通过安全组的配置，允许浏览器访问服务器地址的80端口(默认80端口)，就可以看到首页

修改Nginx配置

此时已经可以访问到页面，现在需要看一下Nginx的配置，将页面配置成我们上面配置的自动化部署后的html文件。

首先查看Nginx配置

/etc/nginx/nginx.conf 为Nginx主配置文件

1	vim /etc/nginx/nginx.conf

主要看server这里，root表示服务默认启动目录

只需要将目录改成上面的工作目录’/work/lsq’，保存即可

重启Nginx

1 2	nginx nginx -s reload

访问服务器ip

再次防伪服务器ip确认是否生效，
经确认，页面确实展现为工作目录下的文件。

整体回归

到此，我们这个简单的前端自动化部署就完成了，现在可以整体回归一下。
整体逻辑为：本地文件更新，向远程仓库push代码，线上自动生效
**

本地代码更新

将Hello Word 改为你好世界～

提交代码

1
2
3

git add .
git commit -m"change text"
git push origin master

Jenkins构建

查看Jenkins任务的构建是否成功

经查看成功构建执行

线上是否生效

再次访问线上，查看是否生效

线上已经生效

结尾

到此，这一套前端自动化部署流程就算完成了，当然这只是一些很简单的配置，Jenkins还有许多强大的特性和功能。

(转载请注明出处)