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

·  阅读 938

概述

最近在用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不熟悉的人来说,会遇到许多坑。所以,我将整个部署流程记录下来,供大家参考。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改