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

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

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

二、做点准备

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

sudo yum install java
复制代码

查看版本号

java -verson
复制代码

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

安装git

sudo yum install git
复制代码

查看版本号

git -version
复制代码

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

安装 Jenkins

本文采用的方式2

方式1

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

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
复制代码

安装

yum -y install jenkins
复制代码

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

方式2

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

sudo rpm -ih jenkins-2.204.2-1.1noarch.rpm
复制代码

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

启动Jenkins

service jenkins start
复制代码

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

配置Jenkins权限

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

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

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

使用sed

$ 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. 创建自己的仓库，上传自己的代码(若没有先注册)
2. 打开仓库设置添加公钥(服务器公钥)

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

ssh-keygen -t rsa -C "***@163.com"
复制代码

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

五、配置Jenkins

初始化

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

   

2. 安装插件，可以选择推荐(由于上面配置了安装插件提速，这里应该会很快，如果还是很慢，或者安装失败，可以先跳过)

3. 安装完插件之后要创建用户，创建完成后点击保存并完成

   

4. 点击开始使用

创建第一个新任务

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

Git hook

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

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

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

3. 仓库配置钩子

打开仓库管理，添加webHook,
URL规则为：http://:<端口>/generic-webhook-trgger/invoke?token=<
" class="equation" src="https://juejin.im/equation?tex=token%3E%3Cbr%20%2F%3E">token为Jenkins 任务配置中构建触发器中配置的token
最后选择添加

4. 构建配置

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

\cp -r -a ./* /work/lsq
复制代码

5. 点击应用并保存

测试

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

1. 在本地仓库向远程仓库push一下代码

2. Jenkins对应的任务中，可以看到构建历史

   

3. 点击进去可以看到控制台输出

   

4. 进入服务器查看

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

Nginx配置

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

安装Nginx

sudo yum install nginx -y
复制代码

检验是否成功安装

nginx -v
复制代码

输出版本号表示安装成功

访问首页

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

修改Nginx配置

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

1. 首先查看Nginx配置

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

vim /etc/nginx/nginx.conf
复制代码

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

2. 修改启动目录

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

3. 重启Nginx

nginx
nginx -s reload
复制代码

4. 访问服务器ip

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

整体回归

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

1. 本地代码更新

将Hello Word 改为 你好 世界～

git add .
git commit -m"change text"
git push origin master
复制代码

2. Jenkins构建

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

3. 线上是否生效

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

结尾

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

(本文为原创整理，转载请注明出处，各位大佬，不妨给小弟点个赞吧～)