ccdi/docs/plans/2026-03-13-ccdi-docker-deployment-frontend-implementation.md

CCDI Docker 前端部署 Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: 为 Vue 前端建立可打包、可容器化、可上传并在服务器通过 Nginx 对外提供服务的 Docker 部署链路。

Architecture: 前端继续使用现有 npm run build:prod 产出 dist，容器内由 Nginx 提供静态资源与反向代理。通过 /prod-api 与 /v3/api-docs 将请求转发到后端容器，保持现有业务代码与生产环境变量不变。

Tech Stack: Vue 2, npm, Nginx, Docker Compose, PowerShell, Paramiko

---

Task 1: 定义前端容器与 Nginx 代理

Files:

• Create: docker/frontend/Dockerfile
• Create: docker/frontend/nginx.conf
• Modify: docs/plans/2026-03-13-ccdi-docker-deployment-design.md

Step 1: 创建前端镜像定义

• 基于 nginx:stable-alpine
• 复制 frontend/dist 到 Nginx 静态目录
• 复制自定义 nginx.conf

Step 2: 配置反向代理

• / 返回前端 index.html
• /prod-api/ 代理到 http://backend:8080/
• /v3/api-docs/ 代理到 http://backend:8080/v3/api-docs/

Step 3: 校验 Nginx 配置

Run: docker run --rm -v ${PWD}/docker/frontend/nginx.conf:/etc/nginx/conf.d/default.conf:ro nginx:stable-alpine nginx -t Expected: syntax is ok

Task 2: 编写前端打包收集流程

Files:

• Modify: deploy/deploy.ps1
• Create: frontend/.gitkeep

Step 1: 构建前端

Run: npm --prefix ruoyi-ui run build:prod Expected: ruoyi-ui/dist 生成成功

Step 2: 收集部署目录

• 将 ruoyi-ui/dist 复制到 frontend/dist
• 保持部署目录与 Dockerfile 输入一致

Task 3: 将前端加入 Compose

Files:

• Modify: docker-compose.yml
• Modify: .env.example

Step 1: 定义 frontend 服务

• 暴露 62319:80
• 依赖 backend

Step 2: 校验 Compose

Run: docker compose config Expected: 前端服务、依赖与端口映射正确

Task 4: 联调验证

Files:

• Modify: docs/plans/2026-03-13-ccdi-docker-deployment-design.md

Step 1: 检查前端生产产物

• 验证 dist/index.html 与 static/ 文件生成

Step 2: 远端验证访问

• 验证 http://116.62.17.81:62319
• 登录后检查浏览器请求是否发往 /prod-api
• 验证 Swagger 页面可通过前端入口转发访问

Step 3: 提交

git add docker/frontend deploy/deploy.ps1 docker-compose.yml .env.example docs/plans/2026-03-13-ccdi-docker-deployment-*.md
git commit -m "新增Docker前端部署方案"