Jenkins+Gitee+Nginx+PM2实现前端项目自动部署

概述

最近在用echarts做一个前端大屏可视化项目，发现每次更新，都需要手动在服务器部署一次，十分麻烦，就想到了Jenkins来实现自动化部署，并选择将代码放在Gitee上，使用 WebHooks 触发的方式进行更新。后端 nodeJs 代码使用 pm2 进行进程守护。大大提高了工作效率，十分方便，所以将整个流程记录在掘金上，供其他人参考使用，因为在整个过程中遇到了很多坑，需要一个一个排查，希望我的文章能够减少其他人排查错误的时间。

前置准备

本文主要讲解 Jenkins 的安装与使用，它才是整个自动化部署的核心，但是其他的工具也很重要，但由于篇幅所限，详细的安装流程并不在本文的记录中，希望你能提前在服务器上安装好一下软件：

1. 注册码云帐号；
2. Nginx；
3. nodeJs；
4. pm2。
5. java jdk
6. git

本文所使用的远程连接工具为secure CRT。

nodeJs 安装

从官网中下载nodejs。

上传到服务器并解压

tar -xvf node-v10.15.3-linux-x64.tar.xz
复制代码

配置软连接，使全局都可以使用node命令

将node源文件映射到usr/bin下的node文件
ln -s /usr/local/node/node-v14.12.0-linux-x64/bin/node /usr/bin/node  
ln -s /usr/local/node/node-v14.12.0-linux-x64/bin/npm /usr/bin/npm
复制代码

/usr/local/node/node-v14.12.0-linux-x64/bin/node 为我的安装目录，你可以选在自己的。

检查是否安装成功

[root@izbp19pml4ffssyx17ulvlz bin]# node -v
v14.12.0

[root@izbp19pml4ffssyx17ulvlz bin]# npm -v
6.14.8
复制代码

在linux下通过node安装其他服务，比如pm2，也需要进行软连接的操作。

jdk 安装

由于 Jenkins 是用 java 编写，所以要正常使用，必须安装java jdk。

准备jdk安装包

JDK官网下载地址：www.oracle.com/technetwork…

选择版本之前可以查看一下自己的linux服务器是多少位的系统：

[root@izbp19pml4ffssyx17ulvlz ~]# getconf LONG_BIT
64
复制代码

进入之后如下界面，先勾选小框框内的同意，然后选中长条形框的版本(我选的是框内的，可以不同)

上传并解压

选择secure CRT自带的sftp工具或者其他上传工具，将jdk安装包上传到服务器。

• 创建一个名为java的文件夹mkdir /usr/local/java
• 使用mv命令移动到刚刚创建的文件中
• 使用tar命令解压tar -xzvf

配置环境变量

打开环境配变量配置如下信息vi /etc/profile

JAVA_HOME=/usr/local/java/jdk1.8.0_221
复制代码

以上是我的安装路径， 你可以选择你的安装路径。 是用 source /etc/profile 命令让配置生效。

完成安装，检查是否正确

java -version
复制代码

出现了如上界面就证明JDK8已经安装好啦！

安装 git

进入git在github上的发布版本页面github.com/git/git/rel… 在这个页面我们可以找到所有git已发布的版本。这里我们选择最新版的tar.gz包。

解压并安装

耐心等待下载完成。我们可以看到下载后的文件名是v2.30.0，并不是压缩包的格式，不用担心，这只是链接的问题，手动修改文件名为v2.30.0.tar.gz。

mv v2.30.0 .tar.gz
复制代码

解压压缩包。

tar -zxvf v2.30.0.tar.gz
复制代码

进入解压后的文件夹。

cd v2.30.0
复制代码

拿到解压后的源码以后我们需要编译源码了，不过在此之前需要安装编译所需要的依赖。输入如下命令。

怎么配置yum，这里就不讲了。这是基础知识。

提示，安装编译源码所需依赖的时候，yum自动帮你安装了git，这时候你需要先卸载这个旧版的git。

yum remove git
复制代码

耐心等待删除完成，中途出现提示的时候输入y并按回车。

编译git源码

make prefix=/usr/local/git all
复制代码

耐心等待编译完成，中途可能会花费几分钟的时间。

安装git至/usr/local/git路径

make prefix=/usr/local/git install
复制代码

打开环境变量配置文件

vim /etc/profile
复制代码

在底部加上git相关配置

PATH=$PATH:/usr/local/git/bin
export PATH
复制代码

刷新环境变量

source /etc/profile
复制代码

输入git --version检查git是否安全完成，以及查看其版本号。至此，从github上下载最新的源码编译后安装git完成。

这里只讲几个重要的，至于nginx或者其他的软件，情参考网络上的其他文章。

安装Jenkins

下载Jenkins

在 /usr/local/ 目录下创建 jenkins 文件夹。进入 mirrors.jenkins-ci.org/redhat/ 网址 下载新版的rpm安装包。 一定要下载较新的安装包，不然的话，Jenkins在初始化的时候会提示很多插件因为Jenkins低版本的原因无法安装

安装

将rpm包上传到服务器，通过 "rpm -ivh Jenkins的rpm包名" 命令进行安装：

rpm -ivh jenkins-2.263.1-1.1.noarch.rpm
复制代码

通过 “rpm -ql jenkins” 命令查询Jenkins相关的文件。

/usr/lib/jenkins/jenkins.war    WAR包 
/etc/sysconfig/jenkins       配置文件
/var/lib/jenkins/        默认的JENKINS_HOME目录
/var/log/jenkins/jenkins.log    Jenkins日志文件
/etc/init.d/jenkins   jenkins启动时脚本文件
复制代码

如果不修改配置文件，添加jdk路径，service jenkins start 会报错：

Job for jenkins.service failed because the control process exited with error code
复制代码

然后修改/etc/init.d/jenkins文件 ，配置jdk安装路径。

修改/etc/sysconfig/jenkins文件，可以再此修改Jenkins服务的启动端口，我们在此改为8081，因为8080很多服务经常用。

配置完成，再次启动Jenkins。

[root@izbp19pml4ffssyx17ulvlz jenkins]# service jenkins start
Starting jenkins (via systemctl):                          [  OK  ]
复制代码

加入开机自启动 chkconfig jenkins on。

访问

访问一下,浏览器访问：http://服务器IP:8081/

访问jenkins的时候，有个初始化密码，需要你输入，这边查找初始化密码的方法也在下面：

输入之后，访问成功，按照默认配置安装插件：

等待插件安装完成：

创建一个管理员账户，完成配置后，就可以登录 Jenkins 了：

安装Gitee插件

系统管理->插件管理->可选插件->筛选Gitee->选中直接安装，安装成功之后重启jenkins服务

gitee生产私人令牌

在 gitee.com/profile/per… 生成私人令牌

添加Gitee(码云)链接配置(系统管理->系统配置->Gitee配置)

添加后，选择测试，测试出现成功字样，表明添加成功。

安装 jdk 和 Git

然后选择系统管理 => 全局工具配置 在JDK安装中去掉勾选自动安装，在JAVA_HOME中输入java jdk安装的根目录，我的安装根目录是/usr/ 安装Git，我的git安装目录是/usr/local/git/bin/git

新建任务

填写任务名称，选择构建自由风格的软件项目，点击确定。

新建项目

配置项目通用设置

配置项目源码设置

配置项目凭据

构建触发器

构建后续步骤

我这里shell命令意思是触发成功后，进入node项目目录，删除旧的前端打包文件，将jenkins触发的文件的dist目录复制的node project目录下。nginx代理了这个目录。

全部配置完毕后，退出前，一定要点击保存按钮，否则功亏一篑。

Gitee(码云)配置

在gitee项目管理的WebHooks 管理界面填写构建触发器时生成的URL和密码，在你通过Git提交新文件到这个目录后，gitee会通过这个URL向jenkins发送一个post请求，通过这个post请求，jenkins知道了你已经提交了新文件，便会触发拉取操作，完成后，在你的/var/lib/jenkins/workspace/目录下便有了你的gitee上新提交的项目文件。

测试

查看jenkins构建记录，Gitee上项目提交代码，这里都会增加一次构建记录，蓝色表示成功。

查看node project vision项目，jenkins vision 任务中的shell脚本已经将dist文件复制到了dist目录下。接下来，就可以通过nginx进行静态代理了。

在构建时遇到一个报错是执行sudo 命令要输密码，所以没有继续构建下去，最后找到方法是执行sudo visudo，在文件的最后面加上以下信息

jenkins ALL=(ALL) NOPASSWD: ALL
复制代码

使用nginx代理前端项目

在/usr/local/node/project/vision/dist目录下是打包好的文件，我们只要代理其中的文件，让代理默认指向index.html文件即可。

监听91端口，当nginx监听到浏览器连接91端口时，便会默认返回/usr/local/node/project/vision/dist目录下index.html文件，并且监听包含/api/地址的URL，并将其转发给http://127.0.0.1:8888 ，这是后端koa2框架搭建服务所使用的URL地址，用于给前端返回展示的数据。通过nginx反向代理，可以坚决跨域问题。

server {
        listen       91;
        # server_name  localhost;
        root /usr/local/node/project/vision/dist/;
        index index.html index.htm login.html ;
        
        location  /api/ {
            proxy_pass http://127.0.0.1:8888 ;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        error_page   404  /40x.html;
        location = /40x.html {
            root   40x.html;
        }

}
复制代码

项目界面已经展示在浏览器上，但是由于没有在服务器上部署后台服务，还没有数据返回。

部署后台服务

接下来部署后台服务，并通过pm2进行进程守护。在jenkins上新建一个任务为koa-vision，并和gitee上的koa-vision仓库绑定，具体流程不再赘述，参考上面的教程。

安装pm2

通过“npm install pm2 -g”命令全局安装pm2，并配置软连接：

ln -s /usr/local/node/node-v14.12.0-linux-x64/bin/pm2 /usr/local/bin/pm2
复制代码

并通过“sudo pm2 start app.js”命令启动，确报出“sudo: pm2: command not found”提示。

经过一番查找，发现原因是这样的： 在运行 sudo 命令时，系统会按照 sudo visudo 中的配置去设置 secure_path (安全路径)，以限制用户行为。默认的安全路径如下：

Defaults    secure_path = /sbin:/bin:/usr/sbin:/usr/bin
复制代码

网上常见的解决方法是取消 env_reset，并在 bashrc 中用别名重新设置 sudo 命令使用的 PATH 变量。
但是考虑到安全限制以及这个特定的问题，在 /usr/bin 中创建了 pm2 和 node 这两个软连接，分别指向 node 安装目录的对应命令:

ln -s /usr/local/node/node-v14.12.0-linux-x64/bin/pm2 /usr/bin/pm2
ln -s /usr/local/node/node-v14.12.0-linux-x64/bin/node /usr/bin/node
复制代码

一定要将node也链接到这个目录下，因为pm2启动node服务最终也是会调node命令来启动服务。

接下来设置koa-vision任务的构建后shell脚本：

cd /usr/local/node/project/vision/koa-vision/
sudo rm -rf *
sudo cp -r /var/lib/jenkins/workspace/koa-vision/* ./
sudo pm2 stop vision; sudo pm2 start app.js --name vision
复制代码

并触发执行 sudo pm2 list 命令查看： 查看前端界面：

后台数据也已经拿到展示在浏览器上了。至此，整个jenkins自动化集成部署配置完成。

总结

整个项目部署下来，流程还是颇为繁琐，对于linux不熟悉的人来说，会遇到许多坑。所以，我将整个部署流程记录下来，供大家参考。