Docker：Docker搭建Jenkins并共用宿主机Docker部署服务（三）构建Vue前端服务

前言

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

新建视图

方便将整个项目的前端和后端整合起来（之前的文章都已经创建，这里就不用再创建啦！）

新建任务

选择视图

创建项目（任务）

任务配置

项目结构

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

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;
        }
    }
}

配置参数化构建

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

配置项目地址

配置构建日志名称

自定义命名

引用参数构建命名

配置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



set +e
	echo "########## 构建Docker容器 #####################"
    if docker ps -a | grep "$module_name"; then
        echo "########## 删除 $module_name 容器 #####################"
        # 使用docker rm命令删除容器，-f表示强制删除
        docker rm -f $module_name
    fi
    if docker images | grep "$module_name"; then
        echo "########## 删除 $module_name 镜像 #####################"
        # 使用docker rmi命令删除镜像
        docker rmi $module_name
    fi
    pauseErr
    echo "########## 构建 $module_name 镜像 #####################"
    # 构建镜像
    docker build -t $module_name:latest --build-arg WEBPORT=$module_port . 
    #调用PauseErr函数判断上条命令是否执行成功
    pauseErr
    echo "########## 构建 $module_name 容器 #####################"
	#sleep 10s
	docker-compose up -d
	pauseErr
	echo "########## 容器运行完成 #####################"
set -e

保存配置！！！

运行构建

查看Docker镜像和容器

前端容器构建完成！！！！