全栈 docker compose 编排上移到根目录,简化部署流程
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -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 目标
|
||||
|
||||
## 扩展指南
|
||||
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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"]
|
||||
Reference in New Issue
Block a user