library-picturebook-activity/lesingle-creation-frontend/docs/nginx-deployment.md
En 98e9ad1d28 feat(前端): 测试环境登录框支持自动填充测试账号
通过 VITE_AUTO_FILL_TEST 环境变量控制,在 .env.test 中启用,
使测试环境构建后登录框也能自动填充测试账号,方便测试人员使用。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-11 17:03:22 +08:00

80 lines
2.4 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Nginx 部署配置指南 — AI 绘本创作模块整合
## 概述
AI 绘本创作模块已整合进主前端。该模块通过 `VITE_LEAI_API_URL` 环境变量**直连乐读派后端**(跨域),不走 Nginx 代理。只需确保乐读派后端允许跨域即可。
## 关键配置
| 项目 | 配置方式 | 说明 |
|------|---------|------|
| 乐读派 API 地址 | `.env.*``VITE_LEAI_API_URL` | 编译时注入,浏览器直连 |
| 乐读派 WebSocket | 自动从 `VITE_LEAI_API_URL` 推导 `ws://` | CreatingView 页面使用 |
| 主后端 API | Nginx 代理 `/api``8580` | 与之前相同 |
## 环境变量配置
在每个环境对应的 `.env.*` 文件中配置乐读派后端地址:
```bash
# .env.development / .env.production / .env.test
VITE_LEAI_API_URL=http://192.168.1.120:8080
```
## 乐读派后端 CORS 配置
由于前端直连乐读派后端(跨域),乐读派后端需要配置 CORS
```yaml
# 乐读派后端 application.yml 需要添加:
allowed-origins:
- http://your-domain.com # 生产域名
- http://localhost:3000 # 本地开发
```
## Nginx 配置示例
```nginx
server {
listen 80;
server_name your-domain.com;
# ─── 主后端 API与之前相同 ───
location /api/ {
proxy_pass http://127.0.0.1:8580/api/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# ─── 前端静态资源 ───
location /web/ {
alias /path/to/frontend/dist/;
try_files $uri $uri/ /web/index.html;
}
# ─── SPA 回退 ───
location / {
return 301 /web/;
}
}
```
## 开发环境
```bash
# 只需启动一个前端(不再需要 aicreate-client
cd frontend
npm run dev
```
Vite 代理只需配置主后端 `/api → 8580`,乐读派 API 由浏览器直接访问 `VITE_LEAI_API_URL`
## 注意事项
1. **CORS 必须配置**:乐读派后端必须允许前端域名的跨域请求
2. **WebSocket 跨域**Creating 页面的进度推送使用 WebSocket乐读派后端也需要允许 WS 跨域
3. **HTTPS 环境**:如果前端使用 HTTPS`VITE_LEAI_API_URL` 建议也使用 `https://`,否则浏览器会阻止混合内容
4. **修改地址后需重新构建**`VITE_LEAI_API_URL` 是编译时变量,修改后需要 `npm run build`