docker+jenkins 容器化,自动化部署vue3+vite前端项目_vite自动化部署

docker+jenkins 容器化,自动化部署vue3+vite前端项目

1.docker文档

​ Overview | Docker Documentation

2.基本命令

1.docker images // 查看docker镜像

2.构建一个新的Docker镜像haima:1.0（换成自己喜欢的名称即可）
# 清除缓存并构建镜像，这里--no-cache很重要，不加这个参数有时候会造成重新构架的镜像和原来的相同，haima是镜像名
docker build --no-cache -t haima:1.0 . 

-t haima:1.0: 指定镜像的名称为 "haima:1.0"
--no-cache: 禁用缓存，强制重新构建镜像
.: 指定 Dockerfile 的路径为当前目录

3.启动docker容器
docker run -itd --name haima -p 10086(宿主机监听端口):80(镜像端口) haima:1.0（镜像名）
# 启动容器，把服务器的10086端口映射到项目的80端口，项目的80端口也就是容器内运行的nginx入口

docker run: 运行一个新的容器
-itd: 使用交互式终端并在后台运行容器
--name haima: 指定容器的名称为 "haima"
-p 11000:80: 将容器的端口 80 映射到宿主机的端口 11000 上
web:1.0: 使用名为 "web" 的镜像的版本 1.0 来创建容器

4.查看容器相关命令
docker ps // 查看运行中的容器
docker ps -a // 查看所有的容器
docket -log haima// 查看容器haima日志
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3.dockerfile配置文件

• 前端项目

1. 方案一(服务端构建)，Dockerfile配置如下

# 设置基础镜像
FROM node:lts-alpine as build-stage
# 定义作者
LABEL maintainer=haima@163.com

#创建一个工作目录
WORKDIR /app
COPY . .

RUN npm install -g pnpm
RUN pnpm install --registry=https://registry.npm.taobao.org
RUN pnpm build:test

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 暴露镜像端口
EXPOSE 80
CMD ["nginx","-g","daemon off"]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2. 方案二(本地构建)Dockerfile

FROM node:10 as build-stage
LABEL maintainer=haima@163.com
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
EXPOSE 80 // 暴露镜像端口
CMD ["nginx","-g","daemon off"]
1
2
3
4
5
6

4. .dockerignore (dist文件需要忽略，其他的去网上搜下)

# dist
1

5.jenkins配置shell

#!/bin/bash
docker build -t haima:1.0 .
# 检查容器是否存在
container_exists=$(docker ps -aqf "name=haima")
if [ -z "$container_exists" ]; then
   echo "容器 'haima' 不存在"
else
   echo "容器 'haima' 存在"
   # 检查容器是否在运行
   container_status=$(docker inspect -f '{{.State.Running}}' haima)
   if [ "$container_status" == "true" ]; then
       echo "容器 'haima' 正在运行"
       # 停止容器
       echo "停止容器 'haima'"
       docker stop haima
       # 删除容器
       echo "删除容器 'haima'"
       docker rm haima
   else
       echo "容器 'haima' 已停止运行，直接删除"
        docker rm haima
   fi
fi
docker run -itd --name haima-p 10086:80 haima:1.0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

6.注意事项

​ 1.COPY . . 两个点之间需要空格隔开

​ 2.CMD [“nginx”,“-g”,“daemon off”] 这个指令的作用是启动 Nginx 服务器并保持容器运行。通过设置 daemon off，Nginx 将在前台运行，这样可以避免容器启动后立即退出。

​ 服务器启用该命令会导致容器起不来，错误日志：Unable to parse logging level: og。目前我直接注释了。有了解的小伙伴可以留言怎么解决哈。

3.jenkins 配置任务，配置拉取源代码等流程都省略了。只关注shell脚本的配置

4.docker中容器是唯一的，所以存在或者已运行的，重新启动时需要暂停删除

好了，到这里就可以在浏览器输入：主机地址:端口 访问前端项目了。今天的分享就到这里，有什么不对的地方欢迎大家指证。