CICD部署流程详解文档笔记

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管理

重要结论

1. Docker执行 ≠ 容器运行

   • Docker执行是在CI/CD环境中构建镜像
   • 容器运行是在生产环境中运行服务

2. Nginx的作用

   • 从构建阶段就开始配置
   • 到运行阶段提供服务
   • 支持SPA路由和静态文件服务

3. 环境分离

   • 构建环境和运行环境完全分离
   • 通过镜像传递构建产物
   • 确保环境一致性和部署可靠性

复习要点

• 理解Docker执行与容器运行的区别
• 掌握多阶段构建的优势
• 了解Nginx在静态文件服务中的作用
• 明确CI/CD环境与生产环境的分离
• 记住镜像传递的关键作用

本文档基于Vue3 + Nginx + Docker + GitLab CI/CD的部署架构编写