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

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

1、Docker安装Jenkins

2、Jenkins安装所需插件

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脚手架的解决办法。
在这里插入图片描述

  • 7
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值