# 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: 提交**

```bash
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前端部署方案"
```