全栈 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 目标
## 扩展指南

View File

@@ -1,30 +0,0 @@
services:
admin-web-dev:
build:
context: .
dockerfile: docker/Dockerfile.dev
container_name: asset-helper-admin-dev
environment:
- NODE_ENV=development
- CHOKIDAR_USEPOLLING=true
# 走 Docker 网络容器名,规避 host.docker.internal 仅解析到 IPv6 导致的连接失败
- VITE_API_BASE_URL=${VITE_API_BASE_URL:-http://api-gateway}
ports:
- "3000:5173"
volumes:
# 源码挂载(实现热更新)
- ./src:/app/src:ro
- ./index.html:/app/index.html:ro
- ./vite.config.ts:/app/vite.config.ts:ro
- ./tsconfig.json:/app/tsconfig.json:ro
- ./tsconfig.app.json:/app/tsconfig.app.json:ro
- ./tsconfig.node.json:/app/tsconfig.node.json:ro
# 不覆盖 node_modules
- /app/node_modules
networks:
- asset-helper-network
restart: unless-stopped
networks:
asset-helper-network:
driver: bridge

View File

@@ -1,22 +0,0 @@
version: "3.8"
services:
admin-web:
build:
context: .
dockerfile: docker/Dockerfile
container_name: asset-helper-admin
ports:
- "${ADMIN_WEB_PORT:-20080}:80"
networks:
- asset-helper-network
restart: unless-stopped
healthcheck:
test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost:80/"]
interval: 30s
timeout: 10s
retries: 3
networks:
asset-helper-network:
driver: bridge

View File

@@ -1,16 +0,0 @@
# 开发环境 Dockerfile
# 不复制源码,通过 docker-compose volume 挂载,实现热更新
FROM node:20-alpine
WORKDIR /app
# 安装依赖(利用 Docker 缓存层)
COPY package.json package-lock.json* ./
RUN npm install
# 暴露 Vite 开发服务器端口
EXPOSE 5173
# 开发模式启动(--host 确保外部可访问)
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]