jenkins+gitee实现前端项目自动化部署

前言

前端项目每次提交完代码都要手动拉取最新代码、打包、部署，这一套流程下来可能要浪费不少时间，特别是在项目处于快速迭代期的时候，那么如果前端可以实现自动化部署，开发人员每次push代码后由jenkins自动部署到测试环境，那将会在一定程度上简化开发人员的工作，让他们可以把更多精力放在处理其他问题上。

自动化部署流程图

一、先说说自动化部署需要具备的环境

1、安装Java环境（必须）

这里的话最好是安装JDK1.8以上的版本，因为Jenkins对于Java的版本有一定的要求。如果没有的话，则自行百度安装。
验证本地环境是否已有java环境

java -version

2. 安装Jenkins（必须）

Jenkins是自动化部署的核心应用，当然如果对BuildMaster这些持续集成的工具比较熟悉的话，也可以用其他工具来做集成。
Jenkins的安装步骤可以参考我的这篇文章：Linux环境下安装Jenkins

3. 安装Git/Svn（必须）

这里的话，由于我的项目是使用git进行版本管理的，所以下载的是git。
检查本地是否已经有git

git --version

如果没有git的话，可以通过下面的命令安装或者自行百度：

yum install git

4. Node环境安装（前端必须）

由于我们的项目是前端项目，所以要想在服务器中执行打包、编译等操作的话，服务器就必须要有node的环境（如果是后端的话应该就需要maven等环境）。Node环境如何安装自行百度

二、配置Jenkins权限

安装完Jenkins后，还需要再配置一下Jenkins的权限：

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

三、配置Gitee公钥

由于我们的Jenkins后期需要向远程仓库拉取代码，所以我们需要对远程仓库配置一下服务器的公钥

（1）服务器生成公钥：

在服务器的sh窗口中输入下面的命令后，根据提示按3次回车即可
注意：邮箱的话就用自己的邮箱

ssh-keygen -t rsa -C "***@xxx.com"

（2）查看生成的公钥：

cat ~/.ssh/id_rsa.pub

（3）在码云的远程仓库上面添加服务器公钥

添加服务器公钥

公钥添加好后，我们就可以在公钥管理中看到了

四、Jenkins创建自动化部署的任务

（一）创建任务

进入Jenkins后点击主页左侧菜单的新建任务，在弹框中输入自定义任务名称，选中构建自由风格的软件项目后，创建任务。

image.png

image.png

（二）配置git和远程仓库的关联

这一步主要是实现当我们push代码后，由gitee发送一个post请求给Jenkins，Jenkins自动拉取最新代码的步骤。
进入任务实例中，点击配置，进入任务配置页面

进入任务的配置页面

（1）Jenkins配置远程仓库地址

在源码管理中选择Git，配置远程仓库地址和凭证（也就是码云的账号密码）

Jenkins

（2）添加触发器

触发器是指Jenkins在什么条件下会触发部署的操作，由于我们这里并不是常规的根据时间表来部署，而是根据接收到远程仓库的post请求再部署，所以需要借助到Generic Webhook Trigger Plugin插件。
插件可以在系统管理 -> 插件管理中进行配置

image.png

image.png

插件安装成功后，我们返回到原先的任务配置界面，在构建触发器中选中Generic Webhook Trigger后，配置token，这里的token可以自定义，主要是下面我们需要在码云上使用到这里配置的token。

选择触发器

（3）配置远程仓库的钩子

进入到我们的远程仓库中，选择左侧的WebHooks后，配置URL，URL的格式为：

http://JENKINS_URL/generic-webhook-trigger/invoke?token=owner_token

JENKINS_URL指的是你的IP地址和服务器的端口号
owner_token指的是之前在上一步配置的token

image.png

配置完成后，点击更新/完成。然后测试一下请求是否成功，如果成功的话，可以在请求历史中看到对应的请求结果。

image.png

如果遇到请求状态是403的话，就需要检查一下返回的错误信息，看一下jenkins那边的配置有没有问题了。
可以试一下重启一下Jenkins，或者是检查一下关于Jenkins安全相关的配置，在跨站请求伪造保护模块中，选择启用代理兼容。需要注意的是，由于我的Jenkins版本比较高，所以不一定和你们的页面完全一样，如果这里解决不了你的问题的话，还是另外需要百度解决。

配置全局安全配置

启用代理兼容

（4）构建配置

接下来，我们来简单写点代码来进行测试

构建配置

我们可以在任务面板中选择立即构建我们的项目，然后在左侧下面的构建历史中看到我们正在运行的任务。

执行构建

我们可以点击构建历史中的选项来查看我们每一次的控制台输出，这是一个观察我们任务执行情况的很好的一个窗口。

查看任务执行情况

其实点击执行后，jenkins会自动拉取我们远程仓库的代码，拉取完成后，就会执行我们配置在构建中的具体代码。

（三）配置Jenkins运行Node的环境

在前面，虽然我们下载并安装了Node.js，但实际上我们还需要在Jenkins中把我们的Node的环境变量进行配置后，才可以执行对应的npm操作。

步骤1：我们先进入到系统管理 - 系统配置 中

进入系统配置

步骤2：在全局属性中配置环境变量

这里的话，可以直接在服务器中通过echo $PATH来快速获取

配置Node环境变量

其实也可以使用Jenkins中的NodeJS插件来解决上面那个问题，不过这里的话我感觉在这里配会更加简单，就没有用插件。

五、正式实现自动化部署

（一）在Nginx中配置前端项目的路径

由于我们的前端项目使用Nginx进行部署，所以我们还需要下载Nginx，下载过程自行百度即可。
我们进入到$Nginx_Home/conf/nginx.conf文件中，配置我们前端项目的端口号以及文件路径

server {
        listen       3001;
        server_name  localhost;

        location / {
            root   /usr/local/my_proj/test_devops/;
            index  index.html index.htm;
        }
}

（二）编写构建的正式脚本

npm install
npm run build
ls -al
cp -r -a ./build/* /usr/local/my_proj/test_devops/

image.png

（三）本地开发后，push代码，此时即可实现自动化部署

本地未提交代码前：

本地未提交代码前

git执行push代码，可以观察到jenkins开始自动执行部署任务了：

jenkins接收到远程仓库的post请求，开始部署任务

部署完成后，刷新页面即可看到最新结果：

image.png

说在最后

最后，我们再来对整体的步骤做一个小总结吧：

环境需要：

1. jdk1.8
2. jenkins
3. node.js
4. git

jenkins插件需要

1. Git插件
2. Generic Webhook Trigger插件
3. SSH插件（如果需要部署到其他服务器的话则需要这个插件）

配置jenkins任务

1. 配置源码管理（远程仓库的地址和账号密码）
2. 远程仓库配置jenkins服务器的公钥
3. 远程仓库和jenkins配置钩子和对应的token，完成关联
4. 编写对应的部署脚本（就是npm install这些啦）
5. 测试后完毕

实际上，正式项目的自动化部署一般是Jenkins单独一台服务器，然后测试环境，生产环境再分别有至少一台服务器，Jenkins在构建完项目中，还需要有另外一步，就是在构建后操作这个模块中通过ssh登录到测试或者生产的服务器上面，再执行对应的脚本。由于这里我只有一台服务器，所以就演示不了后面的操作，后面的操作其实也不难，大家稍微配置一下就行。

参考文章：
嘿！Jenkins前端自动化部署
Jenkins执行脚本npm命令报错 npm: command not found