252 lines
5.3 KiB
Markdown
252 lines
5.3 KiB
Markdown
# iMeeting Client 部署指南
|
||
|
||
## 前后端分离部署说明
|
||
|
||
iMeeting Client 是一个独立的前端应用，可以部署到任何静态文件服务器，与后端服务器完全分离。
|
||
|
||
## 配置后端地址
|
||
|
||
### 1. 环境变量配置
|
||
|
||
前端通过环境变量 `VITE_API_BASE_URL` 配置后端API地址。
|
||
|
||
**开发环境** (`.env`):
|
||
```bash
|
||
VITE_API_BASE_URL=http://localhost:8000/api
|
||
```
|
||
|
||
**生产环境** (`.env.production`):
|
||
```bash
|
||
VITE_API_BASE_URL=https://your-backend-server.com/api
|
||
```
|
||
|
||
### 2. 配置文件说明
|
||
|
||
- `.env` - 本地开发环境配置（不提交到git）
|
||
- `.env.production` - 生产环境配置（需要修改为实际后端地址）
|
||
- `.env.example` - 配置示例文件（提交到git供参考）
|
||
|
||
## 部署方案
|
||
|
||
### 方案一：同一服务器不同端口
|
||
|
||
**后端**: `http://your-server.com:8000`
|
||
**前端**: `http://your-server.com:3002`
|
||
|
||
修改 `.env.production`:
|
||
```bash
|
||
VITE_API_BASE_URL=http://your-server.com:8000/api
|
||
```
|
||
|
||
### 方案二：不同服务器
|
||
|
||
**后端**: `http://backend-server.com:8000`
|
||
**前端**: `http://frontend-server.com`
|
||
|
||
修改 `.env.production`:
|
||
```bash
|
||
VITE_API_BASE_URL=http://backend-server.com:8000/api
|
||
```
|
||
|
||
### 方案三：使用域名（推荐）
|
||
|
||
**后端**: `https://api.yourdomain.com`
|
||
**前端**: `https://meeting.yourdomain.com`
|
||
|
||
修改 `.env.production`:
|
||
```bash
|
||
VITE_API_BASE_URL=https://api.yourdomain.com/api
|
||
```
|
||
|
||
## 构建和部署步骤
|
||
|
||
### 1. 修改生产环境配置
|
||
|
||
编辑 `.env.production` 文件，设置正确的后端地址：
|
||
```bash
|
||
VITE_API_BASE_URL=https://your-actual-backend.com/api
|
||
```
|
||
|
||
### 2. 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
# 或
|
||
yarn install
|
||
```
|
||
|
||
### 3. 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
# 或
|
||
yarn build
|
||
```
|
||
|
||
构建完成后，会在 `dist` 目录生成静态文件。
|
||
|
||
### 4. 部署静态文件
|
||
|
||
将 `dist` 目录部署到任何静态文件服务器：
|
||
|
||
#### 使用 Nginx
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name your-frontend-domain.com;
|
||
|
||
root /path/to/imeeting/client/dist;
|
||
index index.html;
|
||
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
|
||
# 如果需要CORS（跨域），添加以下配置
|
||
# location /api {
|
||
# proxy_pass http://your-backend-server:8000;
|
||
# proxy_set_header Host $host;
|
||
# proxy_set_header X-Real-IP $remote_addr;
|
||
# }
|
||
}
|
||
```
|
||
|
||
#### 使用 Apache
|
||
```apache
|
||
<VirtualHost *:80>
|
||
ServerName your-frontend-domain.com
|
||
DocumentRoot /path/to/imeeting/client/dist
|
||
|
||
<Directory /path/to/imeeting/client/dist>
|
||
Options -Indexes +FollowSymLinks
|
||
AllowOverride All
|
||
Require all granted
|
||
|
||
# 支持SPA路由
|
||
RewriteEngine On
|
||
RewriteBase /
|
||
RewriteRule ^index\.html$ - [L]
|
||
RewriteCond %{REQUEST_FILENAME} !-f
|
||
RewriteCond %{REQUEST_FILENAME} !-d
|
||
RewriteRule . /index.html [L]
|
||
</Directory>
|
||
</VirtualHost>
|
||
```
|
||
|
||
#### 使用 Node.js (serve)
|
||
```bash
|
||
npm install -g serve
|
||
serve -s dist -p 3002
|
||
```
|
||
|
||
#### 使用 Docker
|
||
创建 `Dockerfile`:
|
||
```dockerfile
|
||
FROM nginx:alpine
|
||
|
||
# 复制构建产物
|
||
COPY dist /usr/share/nginx/html
|
||
|
||
# 复制nginx配置（支持SPA路由）
|
||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||
|
||
EXPOSE 80
|
||
|
||
CMD ["nginx", "-g", "daemon off;"]
|
||
```
|
||
|
||
创建 `nginx.conf`:
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name localhost;
|
||
|
||
root /usr/share/nginx/html;
|
||
index index.html;
|
||
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
}
|
||
```
|
||
|
||
构建和运行：
|
||
```bash
|
||
docker build -t imeeting-client .
|
||
docker run -d -p 3002:80 imeeting-client
|
||
```
|
||
|
||
## CORS 跨域配置
|
||
|
||
如果前后端部署在不同域名，需要在**后端**配置CORS：
|
||
|
||
**FastAPI 后端** (`main.py`):
|
||
```python
|
||
from fastapi.middleware.cors import CORSMiddleware
|
||
|
||
app.add_middleware(
|
||
CORSMiddleware,
|
||
allow_origins=[
|
||
"http://your-frontend-domain.com",
|
||
"https://your-frontend-domain.com"
|
||
],
|
||
allow_credentials=True,
|
||
allow_methods=["*"],
|
||
allow_headers=["*"],
|
||
)
|
||
```
|
||
|
||
## 环境变量优先级
|
||
|
||
1. `.env.production` - 生产环境（`npm run build` 时使用）
|
||
2. `.env` - 本地开发环境（`npm run dev` 时使用）
|
||
3. 默认值 - `/api`（如果未配置环境变量，则使用相对路径）
|
||
|
||
## 验证部署
|
||
|
||
1. 访问前端地址，检查页面是否正常加载
|
||
2. 打开浏览器开发者工具 - Network
|
||
3. 尝试登录，查看API请求是否指向正确的后端地址
|
||
4. 检查是否有CORS错误
|
||
|
||
## 常见问题
|
||
|
||
### 1. API请求404
|
||
检查 `.env.production` 中的地址是否正确，包括端口号和路径。
|
||
|
||
### 2. CORS错误
|
||
在后端添加CORS中间件，允许前端域名。
|
||
|
||
### 3. 刷新页面404
|
||
配置服务器（Nginx/Apache）支持SPA路由，将所有请求重定向到 `index.html`。
|
||
|
||
### 4. 环境变量未生效
|
||
- 重新构建：删除 `dist` 目录后重新 `npm run build`
|
||
- 确认环境变量名以 `VITE_` 开头
|
||
- 重启开发服务器（开发环境）
|
||
|
||
## 生产环境检查清单
|
||
|
||
- [ ] 修改 `.env.production` 为实际后端地址
|
||
- [ ] 运行 `npm run build` 构建生产版本
|
||
- [ ] 后端配置CORS允许前端域名
|
||
- [ ] 配置Web服务器支持SPA路由
|
||
- [ ] 测试登录功能
|
||
- [ ] 测试录音功能
|
||
- [ ] 测试会议列表
|
||
- [ ] 检查浏览器控制台无错误
|
||
|
||
## 更新部署
|
||
|
||
每次更新前端代码后：
|
||
```bash
|
||
# 1. 拉取最新代码
|
||
git pull
|
||
|
||
# 2. 重新构建
|
||
npm run build
|
||
|
||
# 3. 更新静态文件
|
||
# 将 dist 目录内容复制到Web服务器
|
||
```
|