CICD部署流程详解文档
概述
本文档详细说明了Vue3项目的CICD部署流程，重点解释了Docker执行与容器运行的区别，以及Nginx在部署中的作用。
完整部署流程图
┌─────────────────────────────────────────────────────────────────────────────┐
│ CICD 部署流程 │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ 1. Runner选择 │───▶│ 2. Docker执行 │───▶│ 3. 环境准备 │
│ │ │ │ │ │
│ • 两个runner轮询 │ │ • 使用Docker工具 │ │ • 拉取git分支代码 │
│ • 选中一个执行 │ │ • 拉取基础镜像 │ │ • 清理dist目录 │
│ │ │ • 构建环境准备 │ │ • 设置工作目录 │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │
▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ 4. 依赖安装 │◀───│ 5. 项目构建 │◀───│ 6. 打包完成 │
│ │ │ │ │ │
│ • 配置私有源 │ │ • 执行pnpm build │ │ • 生成dist目录 │
│ (Nexus) │ │ • 遵循lock文件 │ │ • 静态资源文件 │
│ • pnpm install │ │ • 类型检查 │ │ • HTML/CSS/JS │
│ • 遵循lock文件 │ │ │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│
▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ 7. Nginx镜像构建 │───▶│ 8. 推送到Harbor │───▶│ 9. 生产环境部署 │
│ │ │ │ │ │
│ • 多阶段构建 │ │ • 私有镜像仓库 │ │ • 拉取镜像 │
│ • 基础镜像选择 │ │ • 版本标签管理 │ │ • 创建容器实例 │
│ • 文件复制配置 │ │ • 镜像存储 │ │ • 容器运行 │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │
▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ 10. Nginx服务 │◀───│ 11. 路由配置 │◀───│ 12. 服务可用 │
│ │ │ │ │ │
│ • 监听80/443端口 │ │ • SPA路由支持 │ │ • 健康检查 │
│ • 静态文件服务 │ │ • 路径重写 │ │ • 负载均衡 │
│ • 缓存策略 │ │ • 错误页面 │ │ • 监控告警 │
└─────────────────┘ └─────────────────┘ └─────────────────┘关键概念解释
1. Docker执行 vs 容器运行
Docker执行（第2步）
- 环境：CI/CD Runner环境
- 目的：构建Docker镜像
- 作用：使用Docker工具制作产品
- 结果：生成镜像文件
容器运行（第9步）
- 环境：生产服务器环境
- 目的：运行容器实例
- 作用：部署产品到生产环境
- 结果：服务可用
2. 两个不同的环境
CI/CD环境 (构建阶段) 生产环境 (运行阶段)
┌─────────────────┐ ┌─────────────────┐
│ Runner选择 │ │ 生产服务器 │
│ Docker执行 │ │ 拉取镜像 │
│ 环境准备 │ │ 创建容器 │
│ 依赖安装 │ │ 容器运行 │
│ 项目构建 │ │ Nginx服务 │
│ 打包完成 │ │ 路由配置 │
│ Nginx镜像构建 │ │ 服务可用 │
│ 推送到Harbor │ │ │
└─────────────────┘ └─────────────────┘
│ │
│ │
└─────────── 镜像传递 ──────────────────┘Nginx详细配置
阶段7：Nginx镜像构建
┌─────────────────────────────────────────────────────────────────┐
│ Nginx镜像构建阶段 │
├─────────────────────────────────────────────────────────────────┤
│ 1. 基础镜像选择 │
│ FROM test-harbor.域名.cn/spectrum/web-nginx:v1.0.0 │
│ │
│ 2. 文件复制配置 │
│ COPY dist/ → /usr/share/nginx/html/micro-web/admin-vue3/ │
│ COPY dist/index.html → /usr/share/nginx/html/ │
│ │
│ 3. Nginx配置优化 │
│ • 静态文件缓存策略 │
│ • Gzip压缩配置 │
│ • 安全头设置 │
│ • 错误页面配置 │
└─────────────────────────────────────────────────────────────────┘阶段10：Nginx服务运行
┌─────────────────────────────────────────────────────────────────┐
│ Nginx服务运行阶段 │
├─────────────────────────────────────────────────────────────────┤
│ 1. 端口监听 │
│ • HTTP: 80端口 │
│ • HTTPS: 443端口（如果配置SSL） │
│ │
│ 2. 静态文件服务 │
│ • 根路径: / → index.html │
│ • 应用路径: /micro-web/admin-vue3/ → 应用文件 │
│ • 资源文件: CSS/JS/图片等 │
│ │
│ 3. 路由处理 │
│ • SPA路由支持（所有路由返回index.html） │
│ • 404错误处理 │
│ • 重定向规则 │
└─────────────────────────────────────────────────────────────────┘技术要点
1. 多阶段构建
- 构建阶段：使用Node.js环境构建Vue项目
- 部署阶段：使用Nginx镜像提供静态文件服务
- 优势：镜像体积小、安全性高、部署快速
2. 私有源配置
- Nexus地址：https://nexus.私有化域名.cn/
- 包管理器：pnpm
- 依赖管理：遵循pnpm-lock.yaml文件
3. 资源优化
- Runner策略：两个runner轮询部署
- 镜像管理：通过Harbor私有仓库管理
- 版本控制：Git commit和tag管理
重要结论
-
Docker执行 ≠ 容器运行
- Docker执行是在CI/CD环境中构建镜像
- 容器运行是在生产环境中运行服务
-
Nginx的作用
- 从构建阶段就开始配置
- 到运行阶段提供服务
- 支持SPA路由和静态文件服务
-
环境分离
- 构建环境和运行环境完全分离
- 通过镜像传递构建产物
- 确保环境一致性和部署可靠性
复习要点
- 理解Docker执行与容器运行的区别
- 掌握多阶段构建的优势
- 了解Nginx在静态文件服务中的作用
- 明确CI/CD环境与生产环境的分离
- 记住镜像传递的关键作用
本文档基于Vue3 + Nginx + Docker + GitLab CI/CD的部署架构编写