imetting_client/DEPLOYMENT.md

iMeeting Client 部署指南

前后端分离部署说明

iMeeting Client 是一个独立的前端应用，可以部署到任何静态文件服务器，与后端服务器完全分离。

配置后端地址

1. 环境变量配置

前端通过环境变量 VITE_API_BASE_URL 配置后端API地址。

开发环境 (.env):

VITE_API_BASE_URL=http://localhost:8000/api

生产环境 (.env.production):

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:

VITE_API_BASE_URL=http://your-server.com:8000/api

方案二：不同服务器

后端: http://backend-server.com:8000 前端: http://frontend-server.com

修改 .env.production:

VITE_API_BASE_URL=http://backend-server.com:8000/api

方案三：使用域名（推荐）

后端: https://api.yourdomain.com 前端: https://meeting.yourdomain.com

修改 .env.production:

VITE_API_BASE_URL=https://api.yourdomain.com/api

构建和部署步骤

1. 修改生产环境配置

编辑 .env.production 文件，设置正确的后端地址：

VITE_API_BASE_URL=https://your-actual-backend.com/api

2. 安装依赖

npm install
# 或
yarn install

3. 构建生产版本

npm run build
# 或
yarn build

构建完成后，会在 dist 目录生成静态文件。

4. 部署静态文件

将 dist 目录部署到任何静态文件服务器：

使用 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

<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)

npm install -g serve
serve -s dist -p 3002

使用 Docker

创建 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:

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

构建和运行：

docker build -t imeeting-client .
docker run -d -p 3002:80 imeeting-client

CORS 跨域配置

如果前后端部署在不同域名，需要在后端配置CORS：

FastAPI 后端 (main.py):

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路由
• 测试登录功能
• 测试录音功能
• 测试会议列表
• 检查浏览器控制台无错误

更新部署

每次更新前端代码后：

# 1. 拉取最新代码
git pull

# 2. 重新构建
npm run build

# 3. 更新静态文件
# 将 dist 目录内容复制到Web服务器