# HTTPS 部署快速指南

## 为什么需要 HTTPS？

WebRTC（视频通话功能）要求：
- ✅ HTTPS 协议
- ✅ 或者 localhost/127.0.0.1

生产环境必须使用 HTTPS，否则浏览器会阻止访问摄像头和麦克风。

## 快速部署步骤

### 步骤1：申请 SSL 证书

#### 方案A：Let's Encrypt（免费，推荐）

```bash
# 安装 certbot
sudo apt-get update
sudo apt-get install certbot python3-certbot-nginx

# 申请证书（自动配置 Nginx）
sudo certbot --nginx -d your-domain.com

# 或者只申请证书，手动配置
sudo certbot certonly --standalone -d your-domain.com
```

证书位置：
- 证书：`/etc/letsencrypt/live/your-domain.com/fullchain.pem`
- 私钥：`/etc/letsencrypt/live/your-domain.com/privkey.pem`

#### 方案B：阿里云/腾讯云免费证书

1. 登录云服务商控制台
2. 搜索"SSL 证书"
3. 申请免费证书（通常有效期1年）
4. 下载证书文件
5. 上传到服务器

### 步骤2：配置 Nginx

#### 2.1 复制配置文件

```bash
# 复制示例配置
sudo cp nginx-https-example.conf /etc/nginx/sites-available/admin-https

# 修改配置文件
sudo nano /etc/nginx/sites-available/admin-https
```

#### 2.2 修改配置

```nginx
server {
    listen 443 ssl http2;
    server_name your-domain.com;  # 改成你的域名
    
    # 改成你的证书路径
    ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;
    
    # 改成你的前端路径
    location /admin/ {
        alias /var/www/html/admin/dist/;
        try_files $uri $uri/ /admin/index.html;
    }
    
    # 改成你的后端地址
    location /adminapi/ {
        proxy_pass http://127.0.0.1:8000;
        # ... 其他配置
    }
}
```

#### 2.3 启用配置

```bash
# 创建软链接
sudo ln -s /etc/nginx/sites-available/admin-https /etc/nginx/sites-enabled/

# 测试配置
sudo nginx -t

# 重启 Nginx
sudo systemctl restart nginx
```

### 步骤3：更新前端配置

#### 3.1 修改 .env.production

```bash
# admin/.env.production
VITE_APP_BASE_URL=https://your-domain.com
```

#### 3.2 重新构建

```bash
cd admin
npm run build
```

#### 3.3 部署到服务器

```bash
# 上传构建文件
scp -r dist/* user@your-server:/var/www/html/admin/dist/

# 或使用 rsync
rsync -avz --delete dist/ user@your-server:/var/www/html/admin/dist/
```

### 步骤4：验证部署

#### 4.1 检查 HTTPS

访问：`https://your-domain.com/admin/`

浏览器地址栏应该显示绿色锁图标 🔒

#### 4.2 检查 WebRTC

打开浏览器控制台，输入：

```javascript
console.log('Protocol:', window.location.protocol)
console.log('getUserMedia:', !!navigator.mediaDevices?.getUserMedia)
console.log('RTCPeerConnection:', !!window.RTCPeerConnection)
```

应该输出：
```
Protocol: https:
getUserMedia: true
RTCPeerConnection: true
```

#### 4.3 测试视频通话

1. 登录系统
2. 进入诊断列表
3. 点击"视频通话"或"群通话"
4. 浏览器会请求摄像头和麦克风权限
5. 允许权限后应该能正常发起通话

## 开发环境测试

如果需要在开发环境测试 HTTPS：

### Windows

```bash
# 生成证书
setup-https-dev.bat

# 修改 vite.config.ts（见下方）

# 启动开发服务器
npm run dev
```

### Linux/Mac

```bash
# 生成证书
chmod +x setup-https-dev.sh
./setup-https-dev.sh

# 修改 vite.config.ts（见下方）

# 启动开发服务器
npm run dev
```

### 修改 vite.config.ts

```typescript
import * as fs from 'node:fs'

export default defineConfig({
    server: {
        host: '0.0.0.0',
        https: {
            key: fs.readFileSync('.cert/key.pem'),
            cert: fs.readFileSync('.cert/cert.pem')
        },
        hmr: true,
        open: true
    },
    // ... 其他配置
})
```

访问：`https://localhost:5173/admin/`

浏览器会提示证书不安全，点击"继续访问"即可。

## 证书自动续期

Let's Encrypt 证书有效期90天，需要定期续期。

### 自动续期

```bash
# 测试续期
sudo certbot renew --dry-run

# 添加定时任务
sudo crontab -e

# 添加以下行（每天凌晨2点检查续期）
0 2 * * * certbot renew --quiet --post-hook "systemctl reload nginx"
```

## 常见问题

### Q1: 证书申请失败

**原因**：
- 域名未解析到服务器
- 80端口被占用
- 防火墙阻止

**解决**：
```bash
# 检查域名解析
nslookup your-domain.com

# 检查80端口
sudo netstat -tlnp | grep :80

# 开放80和443端口
sudo ufw allow 80
sudo ufw allow 443
```

### Q2: Nginx 配置错误

**检查配置**：
```bash
sudo nginx -t
```

**查看错误日志**：
```bash
sudo tail -f /var/log/nginx/error.log
```

### Q3: 混合内容警告

如果页面加载了 HTTP 资源，浏览器会警告。

**解决**：确保所有资源都使用 HTTPS：
- API 请求：`https://your-domain.com/adminapi/`
- 静态资源：使用相对路径或 HTTPS CDN

### Q4: 视频通话还是不工作

**检查清单**：
- [ ] 使用 HTTPS 访问
- [ ] 证书有效（绿色锁图标）
- [ ] 浏览器已授权摄像头和麦克风
- [ ] 使用支持的浏览器（Chrome/Edge/Safari）
- [ ] 检查浏览器控制台错误

## 安全建议

1. **使用强密码套件**：配置文件中已包含
2. **启用 HSTS**：强制使用 HTTPS
3. **定期更新证书**：设置自动续期
4. **监控证书过期**：提前30天收到提醒
5. **备份证书**：定期备份证书文件

## 性能优化

1. **启用 HTTP/2**：`listen 443 ssl http2;`
2. **启用 GZIP**：压缩传输内容
3. **设置缓存**：静态资源长期缓存
4. **CDN 加速**：使用 CDN 分发静态资源

## 监控和维护

### 证书过期监控

```bash
# 检查证书有效期
echo | openssl s_client -servername your-domain.com -connect your-domain.com:443 2>/dev/null | openssl x509 -noout -dates
```

### 性能监控

使用工具：
- SSL Labs: https://www.ssllabs.com/ssltest/
- WebPageTest: https://www.webpagetest.org/

## 总结

完成以上步骤后，你的系统应该：
- ✅ 使用 HTTPS 协议
- ✅ 证书有效且自动续期
- ✅ WebRTC 功能正常工作
- ✅ 安全性和性能都得到保障

如有问题，请查看：
- Nginx 错误日志：`/var/log/nginx/error.log`
- Certbot 日志：`/var/log/letsencrypt/letsencrypt.log`
- 浏览器控制台：F12 查看错误信息