# 部署指南

本文档介绍如何将 H5 音视频聊天室部署到生产环境。

## 📋 部署前检查清单

- [ ] 已获取 Agora App ID 和 App Certificate
- [ ] 已部署 Token 服务器（生产环境必需）
- [ ] 已准备 HTTPS 证书
- [ ] 已测试目标浏览器兼容性
- [ ] 已配置 CDN（可选，提升性能）

## 🌐 部署方式

### 方式一：静态网站托管

#### 1. Vercel 部署（推荐）

**步骤：**

1. 安装 Vercel CLI
```bash
npm install -g vercel
```

2. 登录 Vercel
```bash
vercel login
```

3. 部署项目
```bash
vercel
```

4. 生产环境部署
```bash
vercel --prod
```

**配置文件 (vercel.json):**
```json
{
  "version": 2,
  "builds": [
    {
      "src": "index.html",
      "use": "@vercel/static"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/$1"
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        }
      ]
    }
  ]
}
```

#### 2. Netlify 部署

**步骤：**

1. 安装 Netlify CLI
```bash
npm install -g netlify-cli
```

2. 登录 Netlify
```bash
netlify login
```

3. 初始化项目
```bash
netlify init
```

4. 部署
```bash
netlify deploy --prod
```

**配置文件 (netlify.toml):**
```toml
[build]
  publish = "."
  command = "echo 'No build required'"

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"
```

#### 3. GitHub Pages 部署

**步骤：**

1. 创建 GitHub 仓库并推送代码

2. 进入仓库设置 -> Pages

3. 选择分支和目录

4. 保存设置

**注意：** GitHub Pages 默认提供 HTTPS

#### 4. 阿里云 OSS / 腾讯云 COS

**步骤：**

1. 创建存储桶
2. 配置静态网站托管
3. 上传文件
4. 配置 CDN 加速
5. 绑定自定义域名
6. 配置 HTTPS 证书

### 方式二：服务器部署

#### 1. Nginx 部署

**安装 Nginx:**
```bash
# Ubuntu/Debian
sudo apt update
sudo apt install nginx

# CentOS/RHEL
sudo yum install nginx
```

**配置文件 (/etc/nginx/sites-available/video-chat):**
```nginx
server {
    listen 80;
    server_name your-domain.com;
    
    # 重定向到 HTTPS
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name your-domain.com;
    
    # SSL 证书配置
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    
    # 网站根目录
    root /var/www/video-chat;
    index index.html;
    
    # Gzip 压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript 
               application/x-javascript application/xml+rss 
               application/javascript application/json;
    
    # 静态文件缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    # HTML 文件不缓存
    location ~* \.html$ {
        expires -1;
        add_header Cache-Control "no-store, no-cache, must-revalidate";
    }
    
    # 安全头
    add_header X-Frame-Options "DENY" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
    
    # 主页面
    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

**启用配置:**
```bash
sudo ln -s /etc/nginx/sites-available/video-chat /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx
```

#### 2. Apache 部署

**配置文件 (.htaccess):**
```apache
# 启用 HTTPS
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# 启用 Gzip 压缩
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/json
</IfModule>

# 设置缓存
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/html "access plus 0 seconds"
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
</IfModule>

# 安全头
<IfModule mod_headers.c>
    Header set X-Frame-Options "DENY"
    Header set X-Content-Type-Options "nosniff"
    Header set X-XSS-Protection "1; mode=block"
    Header set Referrer-Policy "strict-origin-when-cross-origin"
</IfModule>
```

## 🔐 Token 服务器部署

### 使用 Node.js Token 服务器

**1. 克隆 Token 服务器项目:**
```bash
git clone https://github.com/AgoraIO-Community/agora-token-service.git
cd agora-token-service
```

**2. 安装依赖:**
```bash
npm install
```

**3. 配置环境变量 (.env):**
```env
APP_ID=your_agora_app_id
APP_CERTIFICATE=your_agora_app_certificate
PORT=8080
```

**4. 启动服务:**
```bash
npm start
```

**5. 使用 PM2 守护进程:**
```bash
npm install -g pm2
pm2 start index.js --name agora-token-server
pm2 save
pm2 startup
```

### 集成 Token 服务器

修改 `js/app.js` 中的 `handleLogin` 函数：

```javascript
async function handleLogin(e) {
    e.preventDefault();
    
    const appId = uiController.elements.appIdInput.value.trim();
    const channel = uiController.elements.channelInput.value.trim();
    const userName = uiController.elements.userNameInput.value.trim();
    
    // 从 Token 服务器获取 Token
    let token = null;
    try {
        const response = await fetch(
            `https://your-token-server.com/rtc/${channel}/publisher/uid/0`
        );
        const data = await response.json();
        token = data.rtcToken;
    } catch (error) {
        console.error('获取 Token 失败:', error);
        uiController.showNotification('获取 Token 失败', 'error');
        return;
    }
    
    // ... 其余代码
}
```

## 🚀 性能优化

### 1. CDN 加速

**使用 CDN 加载 Agora SDK:**
```html
<!-- 替换 index.html 中的 SDK 引用 -->
<script src="https://cdn.jsdelivr.net/npm/agora-rtc-sdk-ng@4.21.0/AgoraRTC_N-4.21.0.js"></script>
```

### 2. 资源压缩

**压缩 JavaScript:**
```bash
# 使用 terser
npm install -g terser
terser js/app.js -o js/app.min.js -c -m
```

**压缩 CSS:**
```bash
# 使用 cssnano
npm install -g cssnano-cli
cssnano styles/main.css styles/main.min.css
```

### 3. 图片优化

- 使用 WebP 格式
- 压缩图片大小
- 使用 SVG 图标

### 4. 启用 HTTP/2

确保服务器支持 HTTP/2 以提升性能。

## 📊 监控和日志

### 1. 错误监控

集成 Sentry 进行错误监控：

```html
<script src="https://browser.sentry-cdn.com/7.x.x/bundle.min.js"></script>
<script>
  Sentry.init({
    dsn: 'your-sentry-dsn',
    environment: 'production'
  });
</script>
```

### 2. 分析统计

集成 Google Analytics：

```html
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>
```

## 🔒 安全建议

1. **启用 HTTPS** - 必须使用 HTTPS
2. **Token 认证** - 生产环境必须使用 Token
3. **CORS 配置** - 正确配置跨域资源共享
4. **CSP 策略** - 配置内容安全策略
5. **速率限制** - 限制 API 调用频率
6. **输入验证** - 验证所有用户输入

## 🧪 测试

### 1. 本地测试
```bash
npm start
```

### 2. 生产环境测试

- 测试不同浏览器兼容性
- 测试移动端设备
- 测试网络质量差的情况
- 压力测试（多用户同时在线）

## 📝 维护

### 定期更新

1. 更新 Agora SDK 到最新版本
2. 更新依赖包
3. 检查安全漏洞
4. 备份数据和配置

### 监控指标

- 用户在线数量
- 通话质量
- 错误率
- 服务器负载
- 带宽使用

## 🆘 故障排查

### 常见问题

1. **HTTPS 证书问题**
   - 检查证书是否过期
   - 验证证书链完整性

2. **Token 过期**
   - 实现 Token 自动刷新机制
   - 监控 Token 有效期

3. **性能问题**
   - 检查服务器资源
   - 优化视频质量设置
   - 启用 CDN

## 📞 技术支持

- [Agora 文档](https://docs.agora.io)
- [Agora 开发者社区](https://www.agora.io/cn/community/)
- [GitHub Issues](https://github.com/AgoraIO/API-Examples-Web/issues)

---

**祝部署顺利！** 🎉