一、下载 docker desktop 客户端

下载地址：https://docs.docker.com/desktop/setup/install/windows-install/

二、配置国内镜像：

三、验证：

四、下载软件：

4.1 下载 nginx 并启动。

docker run -d --name my-nginx -p 8081:80 nginx

4.2 下载 gitlab 并启动。

docker run -d --name my-gitlab -p 8929:80 -p 8922:22 -v gitlab-data:/var/opt/gitlab -v gitlab-logs:/var/log/gitlab -v gitlab-config:/etc/gitlab --restart unless-stopped --shm-size 256m gitlab/gitlab-ce:latest

4.3 下载 jenkins 并启动。

docker run -d --name my-jenkins -p 8082:8080 -p 50000:50000 -v jenkins-data:/var/jenkins_home -u root --restart unless-stopped jenkins/jenkins:lts

4.4 jenkins 安装 gitlab 插件。

4.4 创建构建任务。

五、构建脚本：

5.1 前端代码增加 Dockerfile 文件。

# 第一阶段：构建 Vue 项目
FROM node:18-alpine AS builder

WORKDIR /app

# 复制 package 文件
COPY package*.json ./

# 安装依赖
RUN npm install --registry=https://registry.npmmirror.com

# 复制源码
COPY . .

# 构建项目
RUN npm run build

# 第二阶段：部署到 Nginx
FROM nginx:alpine

# 删除默认配置
RUN rm -rf /usr/share/nginx/html/*

# 复制构建产物
COPY --from=builder /app/dist /usr/share/nginx/html

# 调试：强制重新执行，查看当前目录所有文件
RUN echo "=== BUILD CONTEXT FILES ===" && ls -la

# 调试：列出当前上下文所有文件
RUN ls -la

# 复制 Nginx 配置（可选，解决 Vue Router history 模式刷新 404）
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露端口
EXPOSE 8081

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

5.2 jenkins 中增加构建配置。