Docker：Docker搭建Jenkins并共用宿主机Docker部署服务（六）跨服务器远程部署前端服务

前言

继续完成跨服务器远程部署前端服务，Jenkins的搭建与插件安装可以观看上一篇文章：https://www.cnblogs.com/nhdlb/p/18561435

配置SSH远程服务器连接

这里需要安装 SSH 连接的插件，可以观看上一篇文章进行安装。

开始配置SSH连接

保存！！

新建视图

方便将整个项目的前端和后端整合起来

新建任务

选择视图

创建项目（任务）

任务配置

项目结构

这里我先介绍下项目结构，方便大家对后续操作的理解

我们要做的是远程服务器自动部署，所以这个项目内的Dockerfile、docker-compose.yml、nginx-docker.conf要放到远程服务器的目录下，后面会讲，目前大家不要纠结这几个文件。

配置参数化构建

这里配置参数的作用是后续shell脚本可以根据参数生成镜像和容器

配置项目地址

配置构建触发器

定时任务构建

根据项目的要求，是否需要设置定时构建项目。

Jenkins使用Cron表达式来设置定时任务的执行规则：

  Cron由5个或6个字段组成，分别表示分钟、小时、日期、月份、星期几

## Jenkins中的 H 标记用于分散任务的触发时间，以避免任务在同一时间点过载执行；所以这点跟原始Cron有点不同
# 每隔5分钟执行一次
H/5 * * * *
# 每天上午10点和下午4点各执行一次
H 10,16 * * *
# 每15分钟构建一次
H/15 * * * *
# 每天8点~17点，两小时构建一次
H 8-17/2 * * *
# 周一到周五，8点~17点，两小时构建一次
H 8-17/2 * * 1-5
# 除12月外每月1号、15号各构建一次
H H 1,15 1-11 *

构建日志自定义命名并配置node版本

引用参数构建命名

配置Shell脚本

增加构建步骤

首先配置前端打包构建命令

 

#!/bin/bash

# 判断上条命令是否执行成功，当执行失败的时候显示错误信息，并停止向下执行
function pauseErr(){
    if [ $? -ne 0 ];then
        echo "命令执行失败，终止shell脚本运行"
        #当上一条命令执行失败后，直接退出脚本，阻止脚本向下执行
        exit 1
    fi
}

# 保存旧的IFS值
#OLD_IFS=$IFS
# 设置IFS为逗号
#IFS=','
# 将字符串分割成数组
#echo "########## 读取参数构建信息 #####################"
#read -ra ports <<< "$module_port"
# 恢复IFS为旧值
#IFS=$OLD_IFS

# 获取名称
module_name=${module_port%%/*}
echo "########## 名称 : $module_name  #####################"
# 获取端口
module_port=${module_port##*/} 
echo "########## 端口 : $module_port  #####################"


echo "########## 清除npm缓存 并 取消ssl验证 #####################"
# 清除npm缓存
#npm cache clean --force
# 取消ssl验证
npm config set strict-ssl false
# 更改淘宝源
#npm config set registry http://registry.npm.taobao.org 
pauseErr

echo "########## 下载依赖 并 构建服务 #####################"
#下载依赖 并 构建服务
npm install --registry=https://registry.npm.taobao.org && npm run build
pauseErr

然后再增加一条构建步骤，这次选择 Send files or execute commands over SSH 

 

远程服务器环境

目录结构

Dockerfile

FROM nginx:1.25.3

# 设置构建参数
ARG WEBPORT

# 将生成的静态页面文件复制到nginx的/usr/share/nginx/html/目录
COPY dist/ /usr/share/nginx/html/

# 将nginx.xml配置文件复制到镜像中
COPY nginx-docker.conf /etc/nginx/nginx.conf

# 端口
EXPOSE ${WEBPORT}

# 容器启动时运行的命令
CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml

networks:
  higec_net:
    external: true
services:
  web:
    image: liv****k-web:latest
    container_name: liv****k-web
    restart: always
    ports:
      - 9300:9300
    networks:
      higec_net:
        ipv4_address: 172.19.8.70
    volumes:
      - /etc/timezone/timezone:/etc/timezone
      - /etc/localtime:/etc/localtime:ro

nginx-docker.conf

user  root;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
worker_connections  1024;
}


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

log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';

access_log  /var/log/nginx/access.log  main;

sendfile        on;
#tcp_nopush     on;

keepalive_timeout  65;

#gzip  on;

#include /etc/nginx/conf.d/*.conf;

# HTTP配置
    server {
        listen       9300;
        server_name  localhost;
        # 配置打包文件目录
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            client_max_body_size 200m;
            try_files $uri $uri/ /index.html;
        }
        # 配置静态资源路径
        location /api {
            # 正则解析
            rewrite ^.+api/(.*)$ /$1 break;include uwsgi_params;
            # 后端IP+端口
            proxy_pass http://172.19.8.71:9301;
            client_max_body_size 200m;
        }


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

web_build.sh

#!/bin/bash

##配置项
# 前端打包文件的绝对路径（dist文件夹的所在目录）
WEB_PATH="/home/compose/web"
# 配置镜像名称与端口
WEB_NAME="l******-web:9300"

# 进入指定目录
cd $WEB_PATH || { echo "Failed to change directory"; exit 1; }

echo "########## 停止所有容器 #####################"
# 运行docker-compose清除容器
docker-compose down

echo "########## 构建镜像 #####################"
# 获取名称
module_name=${WEB_NAME%%:*}
echo "########## 名称 : $module_name  #####################"
# 获取端口
module_port=${WEB_NAME##*:}
echo "########## 端口 : $module_port  #####################"
# 获取镜像ID
CID_BUSINE=$(docker images | grep "$module_name" | awk '{print $1}')
echo "# - - - - -   $CID_BUSINE"
if [ -z "$CID_BUSINE" ]; then
    echo "空值,不用删除镜像！"
else
    # 删除镜像
    docker rmi $CID_BUSINE
fi
# 构建新的镜像
docker build -t $module_name:latest --build-arg WEBPORT=$module_port .

echo "########## 启动项目容器 #####################"
docker-compose up -d
echo "########## 容器运行完成 #####################"

运行构建

查看Docker镜像和容器

远程服务器构建前端容器完成！！！！