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