04【前端工程化初探】Jenkines+GitLab+Tomcat流水线配置部署React应用

概述

这是一篇硬核文章，如果没有精力和时间劝你还是不要继续往下看，因为会晕。这篇文章是这系列目前为止配置最复杂的一篇文章，里面有很多的坑，如果你感兴趣的话我们一起去踩，具体部署流程如下。

系统环境

系统：CentOS 8.1

内存：4G起步

硬盘：50G(仅供测试环境)

IP：192.168.0.111(仅仅用来部署一套tomcat环境)

IP：192.168.0.107(上文中部署Jenkines的虚拟机，本文还要继续使用)

操作步骤

一、React应用最终部署的服务器环境搭建

我们要完成的是结合GitLab和Jenkines，实现React应用的流水线部署。所以在开始整体配置之前，我们还需要一台虚拟机来存放最终打包好的React应用，也就是说需要一台虚拟机来部署最后通过Jenkines流水线打包后的React应用，以便于我们可以最后访问。这里的虚拟机大家也可以直接使用自己手里有的云服务器，配置要求不是特别高，只要能运行Tomcat就可以，下面我们来部署下Tomcat。

A、jdk环境安装部署

1、到官网(https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html)下载相应的jdk安装包，因为tomcat的安装部署需要jdk环境，此处我们就用上文使用过的jdk8安装包，大家也可以自己下载想使用的安装包，此处对版本没有要求，如下：

2、在虚拟机的"/usr/local"目录下新建java目录，将下载好的安装包上传到此java目录，如下：

mkdir /usr/local/java

3、进入到此目录，然后使用如下命令解压安装包，如下：

cd /usr/local/java/
tar -zxvf jdk-8u241-linux-x64.tar.gz

4、使用如下命令打开profile文件，在文件末尾添加如下信息，完成jdk环境的配置：

vi /etc/profile

export JAVA_HOME=/usr/local/java/jdk1.8.0_241
export JRE_HOME=$JAVA_HOME/jre
export CLASSPATH=export CLASSPATH=.:$JAVA_HOME/lib:$JRE_HOME/lib
export PATH=$JAVA_HOME/bin:$PATH

5、然后使用如下命令使配置生效，并且验证jdk环境是否部署成功：

source /etc/profile
java -version

6、由上图可看出jdk安装部署成功。

B、tomcat安装部署

1、到官网(https://tomcat.apache.org/download-80.cgi)下载相应版本的tomcat安装包，如下：

2、在虚拟机"/usr/local"目录下新建tomcat目录，然后将下载好的安装包上传至此目录，如下：

mkdir /usr/local/tomcat

3、然后进入到此目录，使用如下命令解压安装包：

cd /usr/local/tomcat/
tar -zxvf apache-tomcat-8.5.43.tar.gz

4、进入到tomcat安装目录的bin目录下，通过以下命令来启动tomcat，如下：

cd /usr/local/tomcat/apache-tomcat-8.5.43/bin/
 ./startup.sh

5、启动tomcat后，我们使用如下命令开启8080端口，在本地浏览器通过"192.168.0.111:8080"访问tomcat：

firewall-cmd --zone=public --list-ports #查看开放端口
firewall-cmd --zone=public --add-port=8080/tcp --permanent #开放8080端口
firewall-cmd --reload   #重新加载配置
#如果不需要，也可以直接关闭防火墙
systemctl stop firewalld.service

6、到此为止tomcat部署完成，但还有一些收尾工作没做，我们接下来继续配置一下。首先是端口问题，我们最终的应用是想通过ip访问，并不想带着端口号，所以我们将tomcat安装目录下的server.xml配置文件修改一下，将里面的8080端口替换成80，如下：

vi /usr/local/tomcat/apache-tomcat-8.5.43/conf/server.xml

7、然后进入到bin目录，使用如下命令重启tomcat，这时候我们在本机浏览器就可以通过ip的方式访问这台虚拟机的tomcat了，如下：

cd /usr/local/tomcat/apache-tomcat-8.5.43/bin/
./shutdown.sh
./startup.sh

如果在此处不能访问的话，需要我们还要开启80端口，开启方式按上述开启8080端口方式一样。

8、除了端口的问题外，我们还要配置这台虚拟机的静态ip，通过以下方式即可配置：

cd /etc/sysconfig/network-scripts/
vi ifcfg-enp0s3

#静态IP
BOOTPROTO=static
IPADDR=192.168.0.111 ## 你想要的静态ip
NETMASK=255.255.255.0 #子网掩码为物理机子网掩码(subnet mask) 
GATEWAY=192.168.0.1 #跟物理机网关相同

nmcli c reload

9、到此为止，tomcat相关部署工作全部完成。接下来我们就进行Jenkines + GitLab + tomcat的流水线部署吧。

二、Jenkines + GitLab + tomcat的流水线部署

A、Jenkines常用插件安装

1、在jenkines主界面，选择【Manage Jenkines】菜单，然后选择【Manage Plugins】，在打开的插件管理界面选择【可选插件】选项卡，搜索NodeJS插件进行安装，如下：

NodeJS插件安装完成后，我们进入全局配置界面，然后在NodeJS锚点处选择相应的NodeJS版本后进行安装NodeJS，如下：

2、相应的，在可选插件界面，选择【Publish Over SSH】插件进行安装，如下：

3、安装完成后进行安装【Generic Webhook Trigger Plugin】插件，如下：

4、安装完成后安装【Generic Webhook Trigger Plugin】插件，如下：

5、安装完成后安装【Email Extension Plugin】插件，如下：

到此为止，必要的插件已经安装完成，接下来进行Jenkines的配置。

B、Jenkines构建GitLab项目

1、在Jenkines主界面左侧面板选择【新建Item】菜单，然后输入一个job名称，选择【自由风格应用】，如下：

2、在【General】面板填写一些描述性的信息，如下：

3、在【源码管理】面板，进行如下的配置，此处需要我们在gitlab要先新建一个项目，如下：

3.1、gitlab中新建项目：

然后将此项目clone到本地目录，如下：

3.2、然后在Jenkines【源码管理】面板，进行如下配置：

如果在配置时报了以上的错，那就是我们还没有为Jenklines配置Git，我们接下来先配置下Git，在Jenkines管理界面配置，如图：

在上图中，我们连JDK也一块进行了配置。以上jdk的路径是我们刚开始时部署的路径，git路径是要用"git version"和"whereis git"来查，如果查到了就填写上去，没有查到的话就需要先安装下git，然后在来查路径。配置好之后，回到job的配置页面进行继续配置，此时那个报错已经没有了：

填写完git地址后，如果出现上图中的错误提示，说明我们新建的项目是私有的，所以我们还要点击【添加】按钮进行GitLab的一些连接配置，如下：

添加完配置信息之后，我们在credentials选项下选择刚配置好的信息，如下：

3.3、在Jenkines【构建环境】面板，选择"Provide Node & npm bin/ folder to PATH"选项，然后在打开的面板中选择我们上文安装的NodeJS，如下：

3.4、在Jenkines【构建】面板，选择"Shell执行"选项，然后在打开的面板中输入以下Shell命令，如下：

#!/bin/bash
node -v &&
npm install -g cnpm --registry https://registry.npm.taobao.org && 
cnpm install &&
npm run build

3.5、最后点击应用和保存。

3.6、点击【立即构建】菜单，进行项目构建，因为此时我们的项目中只有一个README文档，所以构建后如下所示：

我们在本地新建一个react项目，然后将它上传至gitlab，重新构建一次，如下：

由上可看出我们的项目已经构建成功，因为它是react项目，所以打包后的文件夹是build文件夹。

C、Jenkines自动化构建并发布到远程服务器

1、在Jenkines服务器(192.168.0.107)使用如下命令生成公钥和私钥：

ssh-keygen -t rsa

生成过程中文件存放路径默认即可，然后密码默认为空，生成的"/root/.ssh/id_rsa"目录下的私钥如下：

2、打开部署应用服务器的22端口，这里默认是已经打开的，此步骤跳过。

3、在Jenkines主界面选择系统管理，然后选择系统设置，找到Publish over SSH选项进行配置：

按照上图配置后，点击应用保存。

4、接下来进行邮箱配置。同样的打开Jenkines的系统设置界面，首先设置Jenkines的地址和管理员邮箱，如下：

然后在"Extended E-mail Notification"面板中设置发件人信息，如下：

    <!DOCTYPE html>    
    <html>    
    <head>    
    <meta charset="UTF-8">    
    <title>${ENV, var="JOB_NAME"}-第${BUILD_NUMBER}次构建日志</title>    
    </head>    
        
    <body leftmargin="8" marginwidth="0" topmargin="8" marginheight="4"    
        offset="0">    
        <table width="95%" cellpadding="0" cellspacing="0"  style="font-size: 11pt; font-family: Tahoma, Arial, Helvetica, sans-serif">    
            <tr>    
                本邮件由系统自动发出，无需回复！<br/>            
                各位同事，大家好，以下为${PROJECT_NAME }项目构建信息</br> 
                <td><font color="#CC0000">构建结果 - ${BUILD_STATUS}</font></td>   
            </tr>    
            <tr>    
                <td><br />    
                <b><font color="#0B610B">构建信息</font></b>    
                <hr size="2" width="100%" align="center" /></td>    
            </tr>    
            <tr>    
                <td>    
                    <ul>    
                        <li>项目名称 ： ${PROJECT_NAME}</li>    
                        <li>构建编号 ： 第${BUILD_NUMBER}次构建</li>    
                        <li>触发原因： ${CAUSE}</li>    
                        <li>构建状态： ${BUILD_STATUS}</li>    
                        <li>构建日志： <a href="${BUILD_URL}console">${BUILD_URL}console</a></li>    
                        <li>构建  Url ： <a href="${BUILD_URL}">${BUILD_URL}</a></li>    
                        <li>工作目录 ： <a href="${PROJECT_URL}ws">${PROJECT_URL}ws</a></li>    
                        <li>项目  Url ： <a href="${PROJECT_URL}">${PROJECT_URL}</a></li>    
                    </ul>    
    
    <h4><font color="#0B610B">失败用例</font></h4>
    <hr size="2" width="100%" />
    $FAILED_TESTS<br/>
    
    <h4><font color="#0B610B">最近提交(#$SVN_REVISION)</font></h4>
    <hr size="2" width="100%" />
    <ul>
    ${CHANGES_SINCE_LAST_SUCCESS, reverse=true, format="%c", changesFormat="<li>%d [%a] %m</li>"}
    </ul>
    详细提交: <a href="${PROJECT_URL}changes">${PROJECT_URL}changes</a><br/>
    
                </td>    
            </tr>    
        </table>    
    </body>    
    </html>

接下来进行Jenkines自带的邮件发送功能的配置：

由上可看到邮件发送配置已经完成，点击应用和保存。

5、在Jenkines界面选择我们之前创建的job，然后下拉选择配置菜单，打开job的配置界面，如下：

以上的配置信息我们在之前已经配置过了，接下来我们进行更加详细的配置。

首先是重新配置构建脚本。找到jenkines构建后的项目存放目录，如下：

/root/.jenkins/workspace/reactProjectTest/build

然后在"/home"目录下新建"jenkines/test"目录，在构建脚本处重新输入以下信息：

#!/bin/bash
echo $PATH
node -v 
npm install -g cnpm --registry https://registry.npm.taobao.org 
cnpm install 
npm run build 
cd /root/.jenkins/workspace/reactProjectTest/build
rm -rf dist.tar.gz
tar -zcvf dist.tar.gz *
mv dist.tar.gz /home/jenkines/test

然后配置构建后的操作步骤，主要是配置构建失败或者成功后的邮件发送及通过ssh服务将打包后的文件自动上传到服务器指定目录，如下：

#!/bin/bash 
cd /home/jenkines/test
tar -zxvf dist.tar.gz
rm -rf dist.tar.gz

然后在构建触发器面板勾选【Generic Webhook Trigger】即可，如下：

点击应用和保存。

打开gitlab中的项目设置界面，然后选择【Webhooks】选项，在此页面输入以下信息：

然后点击下方的添加按钮进入gitlab的webhooks添加。如果在此处出现报错信息，是因为gitlab默认禁止使用本地网络连接，我们需要登录gitlab管理员账户来开启，管理员账户为

[email protected]
5iveL!fe/修改后的密码

登陆之后选择左上角的小扳手按钮，进入到gitlab的管理界面，然后依次选择【设置 | 网络】，在网络界面勾选如下所示的选项之后，保存即可：

然后返回到项目中，继续添加webhooks，此时发现可以添加成功，如下：

接下来，我们修改下本地创建的react测试应用里面的代码，然后保存提交，然后发现jenkines已经进行了自动的项目构建和部署工作，如下：

构建完成之后，我们可以在jenkines的"/home/jenkines/test"目录下可以看到打包好的压缩文件，如下：

但是在应用最终部署的服务器上却是没有看到上传过来的文件，我们打开jenkines构建日志可以看到有两条错误提示，如下：

猜测可能是在配置构建后的操作过程中【Send build artifacts over SSH】这一项配置错误导致，我们来重新配置一下：

首先重新配置jenkines的系统管理下的【Publish over SSH】，将里面的目录直接设置为根目录，如下：

接下来重新配置job里面的【构建环境】面板中的Shell脚本和【构建后操作】面板下的"Send build artifacts over SSH"配置，分别如下：

#!/bin/bash
echo $PATH
node -v 
npm install -g cnpm --registry https://registry.npm.taobao.org 
cnpm install 
npm run build 
cd /root/.jenkins/workspace/reactProjectTest/build
rm -rf dist.tar.gz
tar -zcvf dist.tar.gz *

#!/bin/bash 
cd /usr/local/tomcat/apache-tomcat-8.5.43/webapps/reactxuqw
tar -zxvf dist.tar.gz
rm -rf dist.tar.gz

全部重新配置完成后，点击应用保存。我们修改下本地代码然后提交，再次构建测试是否成功：

6、至此，整个基于Jenkines的流水线流程基本配置完毕。

总结

在踩过所有的坑之后，我们终于完成了Jenkines的前端流水线配置，以后写完代码直接push就可以了，至于打包构建，然后部署到服务器那些工作就交给这套环境去完成吧，我们只需要等待返回的邮件即可。当然，以上仅仅是完成了一套基础的环境，至于自动化部署过程中的测试等操作，后续再来完成，因为里面通过shell可以配置各种各样的可执行操作，我在这里也介绍不完呀~

X北辰北博客专家

发布了147 篇原创文章 · 获赞 258 · 访问量 31万+

私信关注