全栈 docker compose 编排上移到根目录,简化部署流程

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
fish
2026-04-26 15:40:50 +08:00
parent 6eb0b3ac3f
commit 4e004f5a85
11 changed files with 418 additions and 263 deletions

View File

@@ -23,34 +23,16 @@
-`app/`(移动/桌面端)共享后端,但 UI 实现独立
- 当前为后台管理系统,后续可扩展为面向用户的 Web 端
## Docker 开发与部署
## Docker 部署
### 开发环境(热更新,不污染物理机)
前端**不再单独编排**,统一由项目根目录的 docker compose 一并启动。详见 [根目录 CLAUDE.md](../CLAUDE.md#部署)。
```bash
cd frontend
docker-compose -f docker-compose.dev.yml up --build
```
| 环境 | 启动命令(在项目根目录执行) | 访问地址 |
|------|------|---------|
| 正式 | `docker compose up -d --build` | `http://localhost:20080` |
| 测试 | `docker compose -f docker-compose.dev.yml up -d --build` | `http://localhost:18888` |
- 访问:`http://localhost:3000`
- 源码通过 volume 挂载,修改后自动热更新
- API 请求通过 Vite proxy 转发到后端网关(默认走 Docker 网络容器名 `http://api-gateway`,需保证网关加入 `frontend_asset-helper-network`
**如需修改后端地址:**
```bash
VITE_API_BASE_URL=http://your-backend:80 docker-compose -f docker-compose.dev.yml up
```
### 生产构建与部署
```bash
cd frontend
docker-compose up --build
```
- 访问:`http://localhost:20080`(端口可通过 `ADMIN_WEB_PORT` 环境变量修改)
- 多阶段构建Node 构建 → Nginx 提供静态文件
- Nginx 代理 `/api/*` 到后端网关容器
两套环境前端均为多阶段构建Node 构建 → Nginx 静态托管),通过 Nginx 的 `location /api/` 反代到网关容器(服务名 `gateway`,同 Docker 网络内可达)。
## 与后端的协作约定
@@ -110,9 +92,8 @@ interface ErrorResponse {
```
frontend/
├── docker/
│ ├── Dockerfile # 生产多阶段构建
── Dockerfile.dev # 开发环境volume 挂载源码)
│ └── nginx.conf # 生产 Nginx SPA 配置
│ ├── Dockerfile # 多阶段构建Node 构建 + Nginx 静态托管)
── nginx.conf # 生产 Nginx SPA 配置 + /api 反代到网关
├── src/
│ ├── api/
│ │ ├── client.ts # Axios 封装device/language 注入、JWT、错误处理
@@ -136,14 +117,14 @@ frontend/
│ │ └── storage.ts # localStorage 封装(带前缀隔离)
│ ├── App.tsx # 根组件ConfigProvider + RouterProvider
│ └── main.tsx # 入口
├── docker-compose.dev.yml # 开发编排(热更新)
├── docker-compose.yml # 生产编排
├── index.html
├── package.json
├── tsconfig.json / tsconfig.app.json / tsconfig.node.json
└── vite.config.ts
```
> 编排文件已统一上移到项目根目录的 `docker-compose.yml` / `docker-compose.dev.yml`。
## API 调用规范
**必须使用封装函数,禁止直接 fetch/axios**
@@ -176,9 +157,8 @@ const result = await loginAccount({ account: 'xxx', password: 'xxx' })
## 开发环境
- 后端网关默认通过 Docker 网络或 `host.docker.internal` 访问
- 开发容器内 Vite 监听 `0.0.0.0:5173`,映射到宿主机 `3000`
- 如需后端使用 HTTPS 自签名证书Vite proxy 已配置 `secure: false`
- 推荐:在项目根目录用 `docker compose -f docker-compose.dev.yml up -d --build` 启动整套测试环境,前端为 Nginx 静态托管,访问 `http://localhost:18888`
- 如需快速调试前端而不构建镜像,本目录下 `npm run dev` 可启动 Vite dev server监听 `0.0.0.0:5173`),需自行确保后端网关在宿主机可达;可通过 `VITE_API_BASE_URL` 覆盖 proxy 目标
## 扩展指南