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

蔚落 2023-07-24 02:37 36阅读 0赞

## 概述 ##

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

## 系统环境 ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70][]

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

mkdir /usr/local/java

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 1][]

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

![202004081955406.png][]

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

**B、tomcat安装部署**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 2][]

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

mkdir /usr/local/tomcat

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 4][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 5][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 6][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 7][]

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 #跟物理机网关相同

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 8][]

nmcli c reload

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

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

**A、Jenkines常用插件安装**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 9][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 11][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 12][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 13][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 14][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 15][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 16][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 17][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 18][]

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

**B、Jenkines构建GitLab项目**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 19][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 20][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 21][]

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

3.1、gitlab中新建项目：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 22][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 23][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 24][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 25][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 26][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 27][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 28][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 29][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 30][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 31][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 32][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 33][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 34][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 35][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 36][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 37][]

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

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

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

ssh-keygen -t rsa

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 38][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 39][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 40][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 41][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 42][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 43][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 44][]

<!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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 45][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 46][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 47][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 48][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 49][]

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

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

/root/.jenkins/workspace/reactProjectTest/build

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 50][]

#!/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服务将打包后的文件自动上传到服务器指定目录，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 51][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 52][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 53][]

点击应用和保存。

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 54][]

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

admin@example.com
    5iveL!fe/修改后的密码

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 55][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 56][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 57][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 58][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 59][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 60][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 61][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 62][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 63][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 64][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 65][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 66][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 67][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 68][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 69][]

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

## 总结 ##

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

[Link 1]: https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70]: /images/20230528/aff78b64b77a42b38a13368ffa7035e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 1]: /images/20230528/689782d44e7e4236b9d9ddbeb4f8533b.png
[202004081955406.png]: /images/20230528/9fad27a73eb949409a63a9bb93e0ec4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 2]: /images/20230528/2a5fe3a52b1e4cf58f8e38a6907e2588.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 3]: /images/20230528/99059ebac01c48dd884ac3af70652cae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 4]: /images/20230528/24ec1f19e939420e87aa770f2f123a28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 5]: /images/20230528/a40d4d414be74cde99ea16f983897b32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 6]: /images/20230528/ce5a650469c040d6aa9aa564144edf34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 7]: /images/20230528/a50aafc8da8b405bbba75a154771caa9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 8]: /images/20230528/e9c8a3be2063485c870535a4d2199427.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 9]: /images/20230528/359a5737998f495580ddca731f0fe0bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 10]: /images/20230528/622228819db34ac1b902d935f8d0544f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 11]: /images/20230528/636bc687b9c64d218f0f43e0ed4423f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 12]: /images/20230528/b48e901e79fd4d64995c2b8a1006a18b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 13]: /images/20230528/b44f1ad5ac124a13978f35d428068989.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 14]: /images/20230528/87cc881eb5134e789366974e16315774.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 15]: /images/20230528/6be1b4a43a864e6bbcff366a87101e93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 16]: /images/20230528/9e035f7809a34ece996b6c2cef856be0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 17]: /images/20230528/e06fb2bf4ed94e88b2348c0d1c705f71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 18]: /images/20230528/e5972a440145401a86fd27c3e4e8bedd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 19]: /images/20230528/bb07edd8cd814956a56b957ed5b80bee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 20]: /images/20230528/bb0d11a4950e4b7987da507b7555adc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 21]: /images/20230528/9368466eda084546a17dad89e781b700.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 22]: /images/20230528/cb30981541954e73ae3c33c0fb99e161.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 23]: /images/20230528/bc740340bf824b83ad54ab284ac8eda8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 24]: /images/20230528/45d62804859a42d484c6dd5e5ed92fd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 25]: /images/20230528/3ebcab7ba6a2467fbe44f159ccf0a6ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 26]: /images/20230528/f5284214feac42dea4281a0c66b59c9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 27]: /images/20230528/85ab1c3284214bae8fa86d045f786b8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 28]: /images/20230528/2fdfeb443d884c788b2379f503432dee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 29]: /images/20230528/34e4ae28e45a41248a6eaf0ee8952a15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 30]: /images/20230528/07ef29d5de4a456d8715996950aef473.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 31]: /images/20230528/db95383af4174210ba32d543b3f4ed60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 32]: /images/20230528/7e6d79e20fa548c891dea44e4672f59a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 33]: /images/20230528/77391577f68e4519bbe30ca074f89cc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 34]: /images/20230528/af645e8c356648ff83906ff237110072.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 35]: /images/20230528/f9a3cbd5737840459f9d81b61303eae1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 36]: /images/20230528/6a32bc3bbb004b5e975843e3a18d80f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 37]: /images/20230528/d2f0af6a8d4e499783d89263074d8c54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 38]: /images/20230528/6c7a7e1afffd46d7b3619a1d91330831.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 39]: /images/20230528/c4a498e919b340c29b879ca0fd71078a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 40]: /images/20230528/4028ad5334234defb61c40e0cdf2b797.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 41]: /images/20230528/1d9da53707964e69955de286d17298e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 42]: /images/20230528/02a850f78a344501be34190536546bc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 43]: /images/20230528/671f397c6f0141908b4a6c3526d86976.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 44]: /images/20230528/ad3931b2f90e43dcbe4ce0ae06b2448b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 45]: /images/20230528/44b64be00606439987bdd5b8ab83fc68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 46]: /images/20230528/1c6e9aa2f6fd4d1f83105950054468d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 47]: /images/20230528/0d1a36c9ce7b4d9b91d1a6fa2afcd9dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 48]: /images/20230528/0a8cfeb9d5dd4eedb53b0da85f7d697e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 49]: /images/20230528/608c6c29bdf848fcb6626a77f9a0e34e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 50]: /images/20230528/3b356c65b37d4c2e8cda2f92dc3cb742.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 51]: /images/20230528/d4740097615542f79904414f1b15cebe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 52]: /images/20230528/082007aa469d4068a28bb50603ed83cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 53]: /images/20230528/080e9a05e1c643889e956032b6877215.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 54]: /images/20230528/40cfd21ef9744016ab8b2b03995a8e7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 55]: /images/20230528/f8bbfbe6ba7340ccb9d711d969e90baa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 56]: /images/20230528/bbb6f402ede44199a49472f18b35ce08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 57]: /images/20230528/87ec6f6a9bd4477283cb4bf9c85a4eee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 58]: /images/20230528/814a5a6847024af4b612f05b03c52905.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 59]: /images/20230528/3e5139ec28bc4855bae1d7d884ac7763.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 60]: /images/20230528/3e21f53b9c3e41729155ce93f68c1e69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 61]: /images/20230528/5cdf51191db7410c8723969611cf37c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 62]: /images/20230528/9cab3b07333e40cd8e749011191540bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 63]: /images/20230528/c86e34381bc54be48c5d74512aedc391.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 64]: /images/20230528/7a61eabf97aa44dbb75f60ac1747b724.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 65]: /images/20230528/72ef42d052654d87ad59e29e0ca79aeb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 66]: /images/20230528/4b421efe0c38424a82d4f7762fffeee8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 67]: /images/20230528/562e6ad170b442bdb83ab6407cfd1918.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 68]: /images/20230528/97051b69c3424d499a2211c22c92ff44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 69]: /images/20230528/17ab65636c274de7b0eeace92e555289.png