【微服务部署】五、Jenkins一键打包部署NodeJS（Vue）项目的Docker镜像步骤详解

NodeJS（Vue）项目也可以通过打包成Docker镜像的方式进行部署，原理是先将项目打包成静态页面，然后再将静态页面直接copy到Nginx镜像中运行。

一、服务器环境配置

前面说明了服务器Nginx的安装和配置，这里稍微有些不同，但是因为此文是用Nginx镜像和前端镜像页面同时部署的方式来打包发布的，所以这里不再需要建立/data/container/nginx/html目录，因为要发布的静态页面已经在Nginx镜像中的/nginx/html目录了。这里也减少了手动部署安装Nginx的步骤，而是在Jenkins任务中调用shell命令自动执行安装。

1. 新建Dockerfile文件，用于定义Nginx镜像，及将打包成功的静态文件复制到镜像中，此文件放在前端项目的根目录下，Jenkins打包时会从此处查找Dockerfile文件。

FROM nginx:latest
# 维护者信息
MAINTAINER gitegg
# 将生成的静态页面文件复制到nginx的/usr/share/nginx/html/目录
COPY dist/ /usr/share/nginx/html/
# 容器启动时运行的命令
CMD ["nginx", "-g", "daemon off;"]

2. 部署及备份目录准备

新建 /opt/tmp 目录，用于Jenkins打包后，通过 Publish Over SSH插件将包传输到服务器的临时目录（如果前面创建过，这里无需再创建）。
新建 /opt/bak 目录，用于存储所有部署过的包备份，方便后续版本回滚。此目录可能会占用很大空间，所以需要选择一个磁盘空间大的挂载目录（如果前面创建过，这里无需再创建）。
新建 /opt/script 目录，用于Jenkins将包传输完成之后，执行安装、备份操作的相关命令脚本（如果前面创建过，这里无需再创建）。
新建 /data/container/nginx/www，映射Nginx容器内的/var/www目录。
新建 /data/container/nginx/logs，映射Nginx容器内的/var/log/nginx目录，存放nginx运行日志。
新建 /data/container/nginx/etc，映射Nginx容器内的/etc/nginx目录
新建 /data/container/nginx/etc/nginx.conf，映射Nginx容器内的/etc/nginx/nginx.conf配置文件

mkdir -p /opt/tmp /opt/bak /opt/script /data/container/nginx/www /data/container/nginx/logs  /data/container/nginx/etc
chmod -R 777 /opt/tmp /opt/bak /opt/script /data/container/nginx/www /data/container/nginx/logs  /data/container/nginx/etc

3.根据系统部署要求编写Nginx配置文件nginx.conf，以下是简单的配置方法，正常情况下https请求还需要配置ssl证书，还有ipv6配置等，后面详细讲解Nginx配置。一定要将修改后的nginx.conf文件放到/data/container/nginx/etc/目录下，否则nginx启动时会报错找不到配置文件。

    server {
        listen 80;
        server_name  域名;

        gzip on;
        gzip_buffers 32 4K;
        gzip_comp_level 6;
        gzip_min_length 100;
        gzip_types application/javascript text/css text/xml text/plain application/x-javascript image/jpeg image/gif image/png;
        gzip_disable "MSIE [1-6]\."; 
        gzip_vary on;

        #charset koi8-r;

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

        location / {
                root /nginx/html/gitegg_portal;
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
        }

        location /gitegg-api/ {
            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://172.17.0.1:8080/;
        }
    }

4. 部署脚本编写说明

定义入参，可以通过Jenkins任务将参数传入脚本中，我们定义了下面7个参数：
container_name=portal-server ：容器名称
image_name=portal-server ：镜像名称
version=latest ：镜像版本
portal_port=80：宿主主机端口映射
server_port=80：容器内服务端口
portal_ssl_port=443：宿主主机端口映射
serve_sslr_port=443：容器内服务端口
对参数进行检查，是否未传入参数，这里根据自己的实际情况判断，比如必须传入哪些参数，就设置参数的个数不能小于几。

echo "param validate"
if [ $# -lt 1 ]; then
  echo "you must use like this : ./publish_docker_portal.sh <container_name> <image_name> <version> [portal port] [server port] [portal ssl port] [server ssl port]"  
  exit  
fi

入参赋值，如果有参数传入，则取服务参数，如果没有参数传入则取默认值

if [ "$1" != "" ]; then
   container_name="$1"
fi
echo "container_name=" $container_name
if [ "$2" != "" ]; then
   image_name="$2"
fi
if [ "$3" != "" ]; then
   version="$3"
fi
echo "version=" $version
if [ "$4" != "" ]; then
   portal_port="$4"
fi
echo "portal_port=" $portal_port
if [ "$5" != "" ]; then
   server_port="$5"
fi
echo "server_port=" $server_port
if [ "$6" != "" ]; then
   portal_ssl_port="$6"
fi
echo "portal_ssl_port=" $portal_ssl_port
if [ "$7" != "" ]; then
   serve_sslr_port="$7"
fi
echo "serve_sslr_port=" $serve_sslr_port

停止并删除容器

echo "执行docker ps"
docker ps 
if [[ "$(docker inspect $container_name 2> /dev/null | grep $container_name)" != "" ]]; 
then 
  echo $container_name "容器存在，停止并删除"
  echo "docker stop" $container_name
  docker stop $container_name
  echo "docker rm" $container_name
  docker rm $container_name
else 
  echo $container_name "容器不存在"
fi

停止并删除镜像

# 删除镜像
echo "执行docker images"
docker images
if [[ "$(docker images -q $image_name 2> /dev/null)" != "" ]]; 
then 
  echo $image_name '镜像存在，删除镜像'
  docker rmi $(docker images -q $image_name 2> /dev/null) --force
else 
  echo $image_name '镜像不存在'
fi

备份本次安装镜像包

#bak image
echo "bak image" $image_name
BAK_DIR=/opt/bak/docker/$image_name/`date +%Y%m%d`
mkdir -p "$BAK_DIR"
cp "/opt/tmp/portal-image.tar" "$BAK_DIR"/"$image_name"_`date +%H%M%S`.tar

执行安装镜像包命令

echo "docker load" $image_name
docker load --input /opt/tmp/portal-image.tar

执行运行命令

echo "docker run" $image_name
docker run -d -p $portal_port:$server_port -p $portal_ssl_port:$server_ssl_port --name=$container_name -e TZ="Asia/Shanghai" --restart=always -v /data/container/nginx/www:/var/www -v /data/container/nginx/logs:/var/log/nginx -v /data/container/nginx/etc:/etc/nginx -v /data/container/nginx/etc/nginx.conf:/etc/nginx/nginx.conf -v /etc/localtime:/etc/localtime -v /usr/share/zoneinfo/Asia/Shanghai:/etc/timezone -v /bxl/container/nginx/ssl:/nginx/ssl $image_name

删除安装文件，因为前面已经备份过了，所以这里将临时安装文件删除

echo "remove tmp " $image_name
rm -rf /opt/tmp/portal-image.tar

打印执行完成的命令

echo "Docker Portal is starting,please try to access $container_name conslone url"

完整的安装部署脚本

container_name=portal-server
image_name=portal-server
version=latest
portal_port=80
server_port=80
portal_ssl_port=443
serve_sslr_port=443
echo "param validate"
if [ $# -lt 1 ]; then  
  echo "you must use like this : ./publish_docker_portal.sh <container_name> <image_name> <version> [portal port] [server port] [portal ssl port] [server ssl port]"  
  exit  
fi
if [ "$1" != "" ]; then
   container_name="$1"
fi
echo "container_name=" $container_name
if [ "$2" != "" ]; then
   image_name="$2"
fi
if [ "$3" != "" ]; then
   version="$3"
fi
echo "version=" $version
if [ "$4" != "" ]; then
   portal_port="$4"
fi
echo "portal_port=" $portal_port
if [ "$5" != "" ]; then
   server_port="$5"
fi
echo "server_port=" $server_port
if [ "$6" != "" ]; then
   portal_ssl_port="$6"
fi
echo "portal_ssl_port=" $portal_ssl_port
if [ "$7" != "" ]; then
   serve_sslr_port="$7"
fi
echo "serve_sslr_port=" $serve_sslr_port

echo "执行docker ps"
docker ps 
if [[ "$(docker inspect $container_name 2> /dev/null | grep $container_name)" != "" ]]; 
then 
  echo $container_name "容器存在，停止并删除"
  echo "docker stop" $container_name
  docker stop $container_name
  echo "docker rm" $container_name
  docker rm $container_name
else 
  echo $container_name "容器不存在"
fi
# 删除镜像
echo "执行docker images"
docker images
if [[ "$(docker images -q $image_name 2> /dev/null)" != "" ]]; 
then 
  echo $image_name '镜像存在，删除镜像'
  docker rmi $(docker images -q $image_name 2> /dev/null) --force
else 
  echo $image_name '镜像不存在'
fi

#bak image
echo "bak image" $image_name
BAK_DIR=/opt/bak/docker/$image_name/`date +%Y%m%d`
mkdir -p "$BAK_DIR"
cp "/opt/tmp/portal-image.tar" "$BAK_DIR"/"$image_name"_`date +%H%M%S`.tar

echo "docker load" $image_name
docker load --input /opt/tmp/portal-image.tar

echo "docker run" $image_name
docker run -d -p $portal_port:$server_port -p $portal_ssl_port:$server_ssl_port --name=$container_name -e TZ="Asia/Shanghai" --restart=always -v /data/container/nginx/www:/var/www -v /data/container/nginx/logs:/var/log/nginx -v /data/container/nginx/etc:/etc/nginx -v /data/container/nginx/etc/nginx.conf:/etc/nginx/nginx.conf -v /etc/localtime:/etc/localtime -v /usr/share/zoneinfo/Asia/Shanghai:/etc/timezone -v /bxl/container/nginx/ssl:/nginx/ssl $image_name

echo "remove tmp " $image_name
rm -rf /opt/tmp/portal-image.tar

echo "Docker Portal is starting,please try to access $container_name conslone url"

二、新建Jenkins配置打包任务，打包部署NodeJS（Vue）镜像

1. 新建任务前，安装Docker Pipeline插件，使用Pipeline流水线任务构建部署，安装Jenkins插件相关内容，请查看前面部署Jenkins相关文章。

Docker Pipeline插件

2. 安装完插件之后，新建一个流水线任务。

流水线任务

3. 和之前的任务一样，选择“丢弃旧的构建”，设置保持构建的最大个数为5。

丢弃旧的构建

4. 下拉到“流水线”配置，选择Pipeline script

流水线

流水线脚本如下：

node {
    # 从gitlab下载代码
    stage('Preparation') { // for display purposes
        // Get some code from a GitHub repository
        echo "checkout from GitLab"
        checkout scmGit(branches: [[name: '*/main']], extensions: [], userRemoteConfigs: [[credentialsId: 'git_username', url: 'http://127.0.0.1:9091/test/test.git']])
    }
     # NodeJS打包
    stage('Build NodeJS Vue') {
        echo "build nodejs code"
        nodejs('Node17') {
            sh 'echo $PATH'
            sh 'node -v'
            sh 'pnpm -v'
            sh 'pnpm install'
            sh 'pnpm run build'
        }
    }
     # 此处判断本机打包是否有容器，如果有的话需要删除
    stage('Delete Old Docker Container') {
        echo "delete docker container"
        sh '''if [[ "$(docker inspect $container_name 2> /dev/null | grep $container_name)" != "" ]]; 
        then 
          echo $container_name "容器存在，停止并删除"
          echo "docker stop" $container_name
          docker stop $container_name
          echo "docker rm" $container_name
          docker rm $container_name
        else 
          echo $container_name "容器不存在"
        fi'''
    }
    # 此处判断本机打包是否有镜像，如果有的话需要删除
    stage('Delete Old Docker Image') {
        echo "delete docker image"
        sh '''if [[ "$(docker images -q gitegg-portal 2> /dev/null)" != "" ]]; 
            then 
              echo gitegg-portal \'镜像存在，删除镜像\'
              docker rmi $(docker images -q gitegg-portal 2> /dev/null) --force
            else 
              echo gitegg-portal \'镜像不存在，创建镜像\'
            fi'''
    }
    # Docker打包镜像，并保存为tar
    stage('Build Docker Image') {
        echo "start docker build portal code"
        // Run the docker build
        docker.build 'gitegg-portal'
        
        echo "save docker images tar"
        sh 'docker save -o portal-image.tar gitegg-portal'
    }
    # 删除安装在本机的Docker镜像，非tar包
    stage('Delete New Docker Image') {
        echo "delete docker image"
        sh '''if [[ "$(docker images -q gitegg-portal 2> /dev/null)" != "" ]]; 
            then 
              echo gitegg-portal \'镜像存在，删除镜像\'
              docker rmi $(docker images -q gitegg-portal 2> /dev/null) --force
            else 
              echo gitegg-portal \'镜像不存在，创建镜像\'
            fi'''
    }
    # 将Docker镜像tar包发送到服务器并执行部署命令
    stage('Send Docker Image') {
        echo "send docker image"
        sshPublisher(publishers: [sshPublisherDesc(configName: 'Test', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '/opt/script/publish_docker_portal.sh gitegg-portal gitegg-portal latest 8130 8130 4413 4413', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '', remoteDirectorySDF: false, removePrefix: '', sourceFiles: 'portal-image.tar')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])
    }
    
    stage('Publish Results') {
        echo "End Publish Portal"
    }
}

12. 在任务左侧点击立即构建

立即构建

点击立即构建

流水线任务可以在右侧显示阶段视图

阶段视图
查看构建日志：点击立即构建之后，下方会出现进度条，点击进度条就可以进入构建日志界面。

查看构建日志

日志

13. 构建成功后，下方会给出构建成功提示。

任务执行成功

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 211,948评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,371评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,490评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,521评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,627评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,842评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,997评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,741评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,203评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,534评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,673评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,339评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,955评论 3赞 313
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,770评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,000评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,394评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,562评论 2赞 349