imetting_client/DEPLOYMENT.md

# 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服务器
```