新增功能

2026-03-04 15:32:30 +08:00
parent a07e844c47
commit ab77f5488d
2266 changed files with 177942 additions and 3444 deletions
@@ -0,0 +1,311 @@
+# 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 查看错误信息