使用Docker+Jenkins+Gitee自动化部署Vue+ElementUI项目

参考本文章并打算跟着步骤进行构建部署的朋友们，建议直接先看踩坑总结，看看自己是否存在对应的问题，免得构建完才发现出错了，毕竟构建一次过程还挺长的。也可以自己走一遍后再参考如何解决啦。

1、Docker安装Jenkins

• 关于如何安装Jenkins，网上教程攻略很多，此处不做过多赘述。也可以参考我上一篇文章使用Docker+Jenkins+Gitee自动化部署SpringBoot项目中搭建基础环境部分，使用Docker-Compose安装Jenkins的部分。

2、Jenkins安装所需插件

• Publish Over SSH：远程连接工具
• Gitee：gitee仓库的一些辅助工具
• NodeJS Plugin：NodeJS工具
  插件的安装过程都是一致的，同样可以参考我上一篇文章使用Docker+Jenkins+Gitee自动化部署SpringBoot项目中安装核心插件部分

3、全局工具配置

• git
  默认配置即可。
  
• NodeJS
  需要注意的是，NodeJS最好根据自己本地环境的版本来选择，不要盲目选择最新版本。这可能会导致很多兼容问题。在本地环境调出控制台，输入node -v查询本地Node版本。我的版本是14.4.0，因此在这里我选择的是14.4.0版本。
  

4、配置全局凭证

配置Gitee全局凭证，用于连接仓库拉取代码。

5、创建Dockerfile文件

在对应的项目根目录下，创建Dockerfile文件，并上传至gitee仓库。

FROM node:14.4.0 as build-stage
WORKDIR /app
COPY . .
RUN npm install && npm audit fix && npm run build

FROM nginx:stable-alpine-perl as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

FROM node:14.4.0 as build-stage	指定基础node镜像
WORKDIR /app	指定基础镜像的工作目录
COPY . .	将Dockerfile文件所在目录所有内容拷贝到工作目录
npm install	下载npm所需的插件
npm audit fix	修复插件
npm run build	执行构建，打包vue项目
FROM nginx:stable-alpine-perl as production-stage	指定基础nginx镜像
COPY --from=build-stage /app/dist /usr/share/nginx/html	把上个步骤容器里的/app/dist拷贝到目标目录
EXPOSE 80	开放指定端口
CMD [“nginx”, “-g”, “daemon off;”]	启动nginx容器的命令

6、创建构建任务

• 创建一个自由风格的项目
  
• General阶段
  勾选参数化构建过程
  
  
  
• 源码管理
  
• 构建环境
  
• 构建

#!/bin/bash

CONTAINER=${container_name}
PORT=${port}


# build docker image
docker build --no-cache -t ${image_name}:${tag} .


checkDocker() {
  RUNNING=$(docker inspect --format="{{ .State.Running }}" $CONTAINER 2>/dev/null)
  if [ -z $RUNNING ]; then
    echo "$CONTAINER does not exist."
    return 1
  fi

  if [ "$RUNNING" == "false" ]; then
    matching=$(docker ps -a --filter="name=$CONTAINER" -q | xargs)
    if [ -n $matching ]; then
      docker rm $matching
    fi
    return 2
  else
    echo "$CONTAINER is running."
    matchingStarted=$(docker ps --filter="name=$CONTAINER" -q | xargs)
    if [ -n $matchingStarted ]; then
      docker stop $matchingStarted
      docker rm ${container_name}
    fi
  fi
}

checkDocker


# run docker image
docker run -itd --name $CONTAINER -p $PORT:80 ${image_name}:${tag}

docker rmi $(docker images | grep "none" | awk '{print $3}')

以上构建参数的说明：

其中，docker rmi $(docker images | grep "none" | awk '{print $3}')的作用是在构建完成之后，删除构建过程中产生的中间镜像。若不执行该语句，则会出现许多tag为none的镜像，占用空间，如：

7、开始构建

8、踩坑总结

1、dial unix /var/run/docker.sock: connect: permission denied
出现该问题是因为没有给 /var/run/docker.sock授权。或者说linux服务器重启后，权限消失，需要重新授权。解决办法有两个。第一个是每次在构建前，手动执行一次chmod -R 777 /var/run/docker.sock。第二个解决办法是，将当前用户添加到docker用户组。dial unix /var/run/docker.sock: connect: permission denied

2、当使用ElementUI作为前端组件库时，部署上docker时，图标消失
Vue使用build打包时element ui图标不显示。vue-cli2脚手架的解决办法。