vue自动构建部署：Jenkins+docker+harbor+vue

由于近期项目需要实现自动构建部署前端vue工程，在此留作记录。
本文主要描述使用Jenkins进行自动化构建Vue项目通过Docker容器部署，并将镜像推送至Harbor镜像仓库的过程。关于Jenkins、Docker、Harbor的安装不做讲解。
一、依赖
Jenkins版本：2.317
Docker版本：18.06.0-ce
Harbor版本：v2.1.0-a3eca103

二、Dockerfile文件

1. 建立dockerfile文件
   Vue工程根目录下创建文件Dockerfile

   
   
   image.png
   
   

   文件内容如下：

# build stage
FROM node:12-alpine as build-stage
# 创建一个工作目录
WORKDIR /app
# 复制符合.dockerignore规则的文件
COPY . .
# 安装依赖
RUN npm install cnpm -g --no-progress --registry=https://registry.npm.taobao.org
RUN cnpm install --no-progress
# 构建
RUN npm run build
# production stage
# 使用nginx镜像
FROM nginx:stable-alpine as production-stage
# 使用--from把上面产生的静态文件复制到nginx的运行目录
COPY --from=build-stage /app/dist /usr/share/nginx/html
# nginx容器内部暴露的端口
EXPOSE 8064
# 运行的命令
CMD ["nginx", "-g", "daemon off;"]

2. 建立.dockerignore文件
   Vue工程根目录下创建文件.dockerignore。目的：为了防止工作目录过大，防止像node_modules这种文件被拷贝进来。

# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
.DS_Store
dist

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
.dockerignore
Dockerfile
*docker-compose*

# Logs
logs
*.log

# Runtime data
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
pids
*.pid
*.seed
.git
.hg
.svn

三、Jenkins构建并推送仓库

1、建立视图及Item

2、相关配置

描述

推送地址及版本

注意：可提前在harbor上构建好项目，此处地址配置为：IP地址/项目/镜像名称:tags，那么启动Jenkins构建在构建成功后将自动推送到harbor上。

时间参数

注意：需要先在Jenkins上安装好[Date Parameter Plugin]插件。

源代码gitlab地址及配置

配置发布版本号

配置node

3、shell命令

①　检查容器

image.png

echo "获取当前容器是否存在-----------------------------------------------------------------"

containerps=$(docker ps -f name=test_web -q)

containerstop=$(docker ps -a -f name=test_web -q)

for alpha in "$containerps";do

    if [ "$alpha" == "" ];then

    echo "检查是否存在停止的容器-------------------------------------------------"

        for alpha1 in "$containerstop";do

          if [ "$alpha1" == "" ];then

          echo "不存指定容器-----------------------------------"

          else

          echo "存在停止了的 然后直接删除-----------开始------------------"

          docker rm $alpha1

          echo "存在停止了的 然后直接删除-----------完成------------------"

        fi

       done

    else

    echo "存在-停止运行 然后删除----------------------开始-----------------"

    docker stop $alpha

    docker rm $alpha

     echo "存在-停止运行 然后删除---------------------完成------------------"

    fi

done

其中“test_web”为容器名称。

②　构建镜像

image.png

# build docker image 每次构建不产生缓存
docker build --no-cache -t ${PushVersion}  .

③　运行容器

image.png

运行容器

docker run -d -p 8064:80 --restart always --name test_web \
-v /opt/app/test_web/app/volumes/config:/usr/share/nginx/html/config \
${PushVersion}

④　删除中间镜像及推送

image.png

echo "删除中间层镜像-------------------------------完成----------------------------------"

docker rmi $(docker images -f "dangling=true" -q)

echo "删除中间层镜像-------------------------------完成----------------------------------"

echo "推送镜像到镜像仓库------------- 开始----------------------------------"

docker push ${PushVersion}

echo "推送镜像到镜像仓库------------- 完成----------------------------------"

四、Docker相关常用命令

1. 构建镜像
   docker build -t mytestapi .

注意：mytestapi为镜像名称，镜像名称后面有一个点

2. 运行镜像

docker run -d -p 8064:80 --restart always --name sc_testapi \

-v /opt/app/sc_testapi /app/volumes/config:/usr/share/nginx/html/config \

mytestapi

注意：端口： 映射宿主机8064端口到容器的80端口。（因此处nginx默认80）

-v 挂载配置文件。宿主服务器主机目录:容器目录

mytestapi 镜像名称

3. 查看镜像

docker images

4. 删除镜像

docker rmi 镜像ID

5. 查看容器

docker ps -a （查看所有容器）

docker ps （查看运行中容器）

6. 删除容器

docker rm 容器ID

7. 停止容器

docker stop 容器ID

8. 启动容器

docker start 容器ID

9. 重启容器

docker restart 容器ID

10. 打包镜像并下载

保存：

docker save b1370b8cdc8c> /root/myyewuxitong-save-0523.tar

下载：

sz myyewuxitong-save-0523.tar

11. 进入运行中容器

docker exec-it 容器ID /bin/bash

docker exec-it 容器ID bash

docker exec-it 容器ID sh 具体docker相关常用知识自行学些

五、Harbor镜像仓库

image.png