90 lines
2.5 KiB
Markdown
90 lines
2.5 KiB
Markdown
# 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前端部署方案"
|
|
```
|