Jenkins+Vue+docker实现前端的CI/CD

需求：在提交前端代码之后Jenkins自动打包，将前端打包生成的dist文件夹放在另一台服务器指定的位置，docker-compose重新启动容器

前提：Jenkins所在的服务器不联网或者NodeJs插件装不上

步骤：

1. Jenkins上配置从机（必须联网并与公司git服务器地址网络连通）
2. Jenkins上配置Publish Over SSH，实现服务器部署功能
3. 部署的服务器安装docker和docker-compose
4. Jenkins上创建项目
5. 构建项目并访问

一、Jenkins上配置从机

首先保证从机上已经安装了NodeJs、Java、Git

1.在系统管理–> 节点管理中配置从节点

点击“新建节点”

输入节点名称，点击确定

点击设置按钮，进入到从节点怕配置页

二、Jenkins上配置Publish Over SSH

1.在系统管理–>插件管理中下载Publish Over SSH插件


2.在系统管理–>系统配置中配置服务器

找到Publish Over SSH，配置服务器地址、用户名、密码，可以点击“Test Configuration”进行连接测试

三、部署的服务器安装docker和docker-compose

1.安装 docker

# 1.安装系统依赖工具
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
 
# 2.yum的配置管理，添加docker的软件源地址
sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
 
# 3.更新yum缓存
sudo yum makecache fast
 
# 4.docker安装
sudo yum install docker-ce
 
# 5.启动docker服务
sudo systemctl start docker
 
# 6.加入开机启动项
sudo systemctl enable docker
 
# 7.查看docker版本
docker version
 
# 8.配置docker镜像源为国内镜像
 
# 8.1创建文件
sudo mkdir -p /etc/docker
 
# 8.2输入内容
sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://snj51455.mirror.aliyuncs.com"]
}
EOF
 
# 8.3使文件生效
sudo systemctl daemon-reload
 
# 8.4重启docker
sudo systemctl restart docker

2.安装docker-compose

# 1.下载
curl -L https://get.daocloud.io/docker/compose/releases/download/1.25.5/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
 
# 2.授权
chmod +x /usr/local/bin/docker-compose
 
# 3.创建软连接
ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
 
# 4.测试是否安装成功
docker-compose --version

3.编写docker-compose.yml文件

version: '3.8'
services:
  nginx:
    image: nginx:1.20
    privileged: true
    restart: always
    network_mode: "host"
    volumes:
      - /usr/soft/tpManageFront/nginx/dist:/usr/share/nginx/html/dist
      - /usr/soft/tpManageFront/nginx/nginx.conf:/etc/nginx/nginx.conf
      - /usr/soft/tpManageFront/nginx/cert:/usr/local/nginx/cert
      - /usr/soft/tpManageFront/nginx/logs:/var/log/nginx

nginx 下的文件有：

cert 是https证书文件（http可不需要）
dist 是前端打包的文件
logs 文件夹可为空
nginx.conf 配置文件如下：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

        # HTTPS server
    #
    server {
        listen 443 ssl;
        server_name  localhost;

        ssl_certificate      /usr/local/nginx/cert/server.crt;
        ssl_certificate_key  /usr/local/nginx/cert/server.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

                location / {
            root   /usr/share/nginx/html/dist;
                        try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

                location /backend/{
                       proxy_set_header Host $http_host;
                       proxy_set_header X-Real-IP $remote_addr;
                       proxy_set_header REMOTE-HOST $remote_addr;
                       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                       proxy_pass http://localhost:8991;
               }

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

四、Jenkins上创建项目

由于 我是在从节点上运行打包项目，所以在创建项目前需要先在 系统管理–>全局工具配置中，将从节点中的NodeJs的安装目录输入，如下图：

接下来就是创建项目并配置项目：

配置只保存最近三条记录（可不配）

选择从节点

项目Git地址配置

构建触发器，当Git提交时立即构建

此时需要在GitLab上配置Webhook和token，与上图相对应，触发自动构建

使用NodeJs

构建：执行、打包、压缩

cd tp-manage-frontend/
npm install
npm run build
tar -czvf dist_manage.tar.gz dist

构建之后，通过ssh将文件传输到指定的服务器上，并进行命令操作

默认是将文件夹输入到指定服务器的/root目录下

# 将打包后的文件夹，移动到指定文件夹下
mv /root/dist_manage.tar.gz /usr/soft/tpManageFront/nginx
cd /usr/soft/tpManageFront/nginx
rm -rf dist
tar -zxvf dist_manage.tar.gz
rm -rf dist_manage.tar.gz
cd /usr/soft/tpManageFront
# 先停止项目
docker-compose down
# 再启动项目
docker-compose up -d

五、构建项目并访问

Jenkins项目配置完毕后，点击“立即构建”，通过控制台查看是否构建成功

使用浏览器访问：https://192.168.104.61 即可查看前端项目