jenkins 前后端项目部署流程（测试篇）

---

前言

这是一篇关于使用jenkins部署前后端项目的文章，基础环境是：一台安装了java环境的linux 服务器、jenkins部署软件，一套前后端部署代码。从nginx安装，到前端部署，到后端部署，到项目正常运行。主要是写给测试同学来看。

---

让我们开始部署流程吧

一、linux 安装nginx

1、检查是否已经安装nginx

使用命令查找nginx位置：

whereis nginx

如果显示以下内容则说明本机是已经安装了nginx，当然也可以使用其他方式入yum方式，根据安装方式来定。如果是已经安装了则可以跳过安装直接进入第二部分（部署前端代码步骤）。

2、安装nginx

在linux下安装nginx，首先需要安装 gcc-c++编译器。然后安装nginx依赖的pcre和zlib包。最后安装nginx即可

1. 先安装gcc-c++编译器

yum install gcc-c++
yum install -y openssl openssl-devel

2. 安装pcre包

yum install -y pcre pcre-devel

3. 安装zlib包

yum install -y zlib zlib-devel

4. 在/usr/local/下创建文件nginx文件

mkdir /usr/local/nginx

5. 在网上下nginx包上传至Linux（https://nginx.org/download/），也可以直接下载

wget https://nginx.org/download/nginx-1.19.9.tar.gz

6. 解压并进入nginx目录

tar -zxvf nginx-1.19.9.tar.gz
cd nginx-1.19.9

7. 使用nginx默认配置

./configure

8. 编译安装

make
make install

9. 查找安装路径

whereis nginx

10. 进入sbin目录，可以看到有一个可执行文件nginx，直接./nginx执行。

./nginx

11. 查看是否启动成功

ps -ef | grep nginx

如果显示以下内容代表安装成功。

二、部署前端代码

1、使用jenkins创建前端流水线

jenkins部署前端代码的方式有好多种，这里用freestyle project的方式，这种方式比较友好，不用学习一些语法什么。
登入jenkins首页：点击dashboard>新建item，输入一个任务名称，选择freestyle project之后点击确定进入配置详情页面

2、配置流水线

1. 输入github项目地址：http://xxxxxxxxxxxxxxxxx.git
   

2. 设置git相关参数以及自定义参数
   

3. 源码管理:配置git仓库，访问凭证，设置默认分支
   

4. 构建环境: 选择构建环境
   

5. 构建：配置构建命令,这里使用yarn 构建的，当然也可以使用npm或其他，命令如下（命令各不相同，根据自己项目而定）

rm -rf build/
rm -rf node_modules
export CI=false
yarn install &&
yarn build 
tar -cvzf ${project}.tar.gz -C build/ .
echo "当前目录"
ls

7. 构建后的操作：配置构建后的操作。
   执行命令如下(命令各不相同，根据自己项目而定)：

echo "我在远程服务器啦"
pwd
cd /root/temp/${project}
pwd
echo '创建目录'
mkdir dist
echo "解压压缩包"
tar -xvf ${project}.tar.gz -C /root/temp/${project}/dist
echo "删除原来的文件"
rm -rf /opt/java/${project}/dist/*
echo "复制当前的文件"
cp -r /root/temp/${project}/dist/*  /opt/java/${project}/dist/
echo "删除临时文件夹"
rm -rf  /root/temp/${project}

代码如下（示例）：

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

8. 点击保存，这条流水线就算已经完成了，之后点击build with Parameters，输入相关参数，点击构建就算基本完成了。
   

3、使用jenkins部署后端

这里和前端一样也是通过freestyle project的方式进行创建流水线。

1. 和前端一样，新建item，输入一个任务名称，选择freestyle project项目进行创建,确定后进入配置页面。
2. 和前端一样，同样设置两个参数
   
3. 源码管理，同前端一样设置，
   
4. 输入构建命令,命令因项而异
   
5. 构建后操作：同前端设置一样配置。
   执行shell命令如下（命令因项目而异）：

pwd
cd /root/temp/${project}
rm -rf /opt/java/${project}/*
cp hzss-app-1.0.0-SNAPSHOT.tar.gz /opt/java/${project}/
cd /opt/java/${project}/
tar -zxvf hzss-app-1.0.0-SNAPSHOT.tar.gz
cd bin
./dt-hzss.sh restart dev

6. 点击保存之后，build with Parameters，输入参数，点击构建。

---

三、修改nginx配置

1、配置nginx

1. 进入配置文件所在目录

cd /usr/local/nginx/conf

2. 修改nginx.conf文件

vi nginx.conf

3. 在http修改或增加配置项

http {
    include       mime.types;
    default_type  application/octet-stream;
    client_max_body_size 1024M; # 上传文件大小限制
    sendfile on; # 设置为on表示启动高效传输文件的模式
    keepalive_timeout 1800; # 保持连接的时间，默认65
    ...
  }  

4. 设置监听端口

 server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        root /opt/java/test/dist; #页面访问目录
        index  index.html index.htm;#首页
        location /api/ {
            proxy_pass http://localhost:8668/api/; #后端代码接口地址
            proxy_connect_timeout 6000;#链接超时设置
            proxy_read_timeout 6000;#访问接口超时设置
            proxy_set_header Host $host:$server_port;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Real-PORT $remote_port;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

总结

这里演示了一个前后端项目构建的整个过程，类似于其他项目通过jenkins配置方式步骤都是如此，但是过程中执行命令以及一些设置项会有差异，需要开发或测试人员，要了解每个设置模版的作用才能更加灵活。