ZYT/zyt
2
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
Your Name
2026-03-13 14:08:52 +08:00
parent 08dd9cd307
commit eb283f008b
667 changed files with 8425 additions and 27053 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/HTTPS_DEPLOYMENT_GUIDE.md
+165 -246
View File
@@ -1,86 +1,64 @@
# HTTPS 部署快速指南
# HTTPS 部署指南
## 为什么需要 HTTPS？
## 问题说明
WebRTC（视频通话功能）要求：
- ✅ HTTPS 协议
- ✅ 或者 localhost/127.0.0.1
TUIKit（腾讯云音视频通话组件）使用 WebRTC 技术，根据浏览器安全策略，WebRTC 功能必须在以下环境下才能正常工作：
- HTTPS 协议
- localhost 本地环境
生产环境必须使用 HTTPS，否则浏览器会阻止访问摄像头和麦克风。
当前错误：`http protocol does not support the ability to capture microphone, camera and screen`
## 快速部署步骤
## 解决方案：配置 HTTPS
### 步骤1：申请 SSL 证书
### 方案 1：使用 Let's Encrypt 免费 SSL 证书（推荐）
#### 方案A：Let's Encrypt（免费，推荐）
#### 步骤 1：安装 Certbot
**Ubuntu/Debian:**
```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
sudo apt update
sudo apt install certbot python3-certbot-nginx
```
证书位置：
- 证书：`/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 复制配置文件
**CentOS/RHEL:**
```bash
# 复制示例配置
sudo cp nginx-https-example.conf /etc/nginx/sites-available/admin-https
# 修改配置文件
sudo nano /etc/nginx/sites-available/admin-https
sudo yum install certbot python3-certbot-nginx
```
#### 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 启用配置
#### 步骤 2：获取 SSL 证书
```bash
# 自动配置 Nginx
sudo certbot --nginx -d api.zzzhengyangtang.cn
# 或者手动获取证书
sudo certbot certonly --nginx -d api.zzzhengyangtang.cn
```
按照提示输入邮箱地址，同意服务条款。
#### 步骤 3：配置 Nginx
将项目根目录的 `nginx-production.conf` 文件复制到 Nginx 配置目录：
```bash
# 复制配置文件
sudo cp nginx-production.conf /etc/nginx/sites-available/admin
# 创建软链接
sudo ln -s /etc/nginx/sites-available/admin-https /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/admin /etc/nginx/sites-enabled/
# 修改配置文件中的路径
sudo nano /etc/nginx/sites-available/admin
```
需要修改的内容：
1. 静态文件路径：`alias /path/to/your/server/public/admin;`
2. 后端 API 端口：`proxy_pass http://127.0.0.1:8000;`
#### 步骤 4：测试并重启 Nginx
```bash
# 测试配置
sudo nginx -t
@@ -88,224 +66,165 @@ sudo nginx -t
sudo systemctl restart nginx
```
### 步骤3：更新前端配置
#### 步骤 5：设置证书自动续期
#### 3.1 修改 .env.production
Let's Encrypt 证书有效期为 90 天，需要定期续期：
```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
# 添加定时任务
# Certbot 会自动添加 cron 任务，也可以手动添加
sudo crontab -e
# 添加以下行（每天凌晨2点检查续期）
0 2 * * * certbot renew --quiet --post-hook "systemctl reload nginx"
# 添加以下行（每天凌晨 2 点检查并续期）
0 2 * * * certbot renew --quiet
```
### 方案 2：使用已有的 SSL 证书
如果您已经有 SSL 证书（.crt 和 .key 文件）：
1. 将证书文件上传到服务器：
```bash
sudo mkdir -p /etc/nginx/ssl
sudo cp your-certificate.crt /etc/nginx/ssl/
sudo cp your-private-key.key /etc/nginx/ssl/
```
2. 修改 `nginx-production.conf` 中的证书路径：
```nginx
ssl_certificate /etc/nginx/ssl/your-certificate.crt;
ssl_certificate_key /etc/nginx/ssl/your-private-key.key;
```
### 方案 3：使用阿里云/腾讯云 SSL 证书
如果您的域名托管在云服务商：
1. 在云服务商控制台申请免费 SSL 证书
2. 下载 Nginx 格式的证书文件
3. 按照方案 2 的步骤配置
## 验证 HTTPS 配置
### 1. 检查证书是否正确安装
```bash
# 使用 openssl 检查
openssl s_client -connect api.zzzhengyangtang.cn:443 -servername api.zzzhengyangtang.cn
# 使用 curl 检查
curl -I https://api.zzzhengyangtang.cn/admin
```
### 2. 在浏览器中访问
访问：`https://api.zzzhengyangtang.cn/admin`
检查：
- 地址栏是否显示锁图标
- 证书是否有效
- 是否有安全警告
### 3. 测试 WebRTC 功能
打开浏览器控制台，应该看到：
```
[TUIKit] Loaded successfully
[WebRTC 警告] 不会出现（因为已经是 HTTPS）
```
## 常见问题
### Q1: 证书申请失败
**原因**：
- 域名未解析到服务器
- 80端口被占用
- 防火墙阻止
**原因：** 域名 DNS 未正确解析到服务器
**解决**：
**解决：**
```bash
# 检查域名解析
nslookup your-domain.com
# 检查80端口
sudo netstat -tlnp | grep :80
# 开放80和443端口
sudo ufw allow 80
sudo ufw allow 443
nslookup api.zzzhengyangtang.cn
ping api.zzzhengyangtang.cn
```
### Q2: Nginx 配置错误
确保域名 A 记录指向服务器 IP。
**检查配置**：
### Q2: Nginx 配置测试失败
**检查：**
```bash
# 查看详细错误
sudo nginx -t
```
**查看错误日志**：
```bash
# 查看 Nginx 错误日志
sudo tail -f /var/log/nginx/error.log
```
### Q3: 混合内容警告
### Q3: HTTPS 访问显示 502 错误
如果页面加载了 HTTP 资源，浏览器会警告。
**原因：** 后端服务未启动或端口配置错误
**解决**：确保所有资源都使用 HTTPS：
- API 请求：`https://your-domain.com/adminapi/`
- 静态资源：使用相对路径或 HTTPS CDN
**解决：**
```bash
# 检查后端服务
sudo netstat -tlnp | grep 8000
### Q4: 视频通话还是不工作
# 检查防火墙
sudo ufw status
sudo firewall-cmd --list-all
```
**检查清单**：
- [ ] 使用 HTTPS 访问
- [ ] 证书有效（绿色锁图标）
- [ ] 浏览器已授权摄像头和麦克风
- [ ] 使用支持的浏览器（Chrome/Edge/Safari）
- [ ] 检查浏览器控制台错误
### Q4: 证书过期
**解决：**
```bash
# 手动续期
sudo certbot renew
# 强制续期
sudo certbot renew --force-renewal
```
## 安全建议
1. **使用强密码套件**：配置文件中已包含
2. **启用 HSTS**：强制使用 HTTPS
3. **定期更新证书**：设置自动续期
4. **监控证书过期**：提前30天收到提醒
5. **备份证书**：定期备份证书文件
1. **启用 HSTS**（已在配置中包含）
- 强制浏览器使用 HTTPS
- 防止中间人攻击
## 性能优化
1. **启用 HTTP/2**：`listen 443 ssl http2;`
2. **启用 GZIP**：压缩传输内容
3. **设置缓存**：静态资源长期缓存
4. **CDN 加速**：使用 CDN 分发静态资源
## 监控和维护
### 证书过期监控
2. **定期更新证书**
- Let's Encrypt 证书 90 天有效期
- 设置自动续期任务
3. **配置防火墙**
```bash
# 检查证书有效期
echo | openssl s_client -servername your-domain.com -connect your-domain.com:443 2>/dev/null | openssl x509 -noout -dates
# 允许 HTTPS 端口
sudo ufw allow 443/tcp
sudo ufw allow 80/tcp # 用于 HTTP 重定向和证书验证
```
### 性能监控
4. **监控证书状态**
- 使用 SSL Labs 测试：https://www.ssllabs.com/ssltest/
- 检查证书评级和安全性
使用工具：
- SSL Labs: https://www.ssllabs.com/ssltest/
- WebPageTest: https://www.webpagetest.org/
## 部署检查清单
## 总结
- [ ] 域名 DNS 已正确解析
- [ ] SSL 证书已申请并安装
- [ ] Nginx 配置已更新
- [ ] 静态文件路径已修改
- [ ] API 代理端口已配置
- [ ] Nginx 配置测试通过
- [ ] Nginx 已重启
- [ ] HTTPS 访问正常
- [ ] HTTP 自动重定向到 HTTPS
- [ ] WebRTC 功能正常（无协议错误）
- [ ] 证书自动续期已配置
完成以上步骤后，你的系统应该：
- ✅ 使用 HTTPS 协议
- ✅ 证书有效且自动续期
- ✅ WebRTC 功能正常工作
- ✅ 安全性和性能都得到保障
## 联系支持
如有问题，请查看：
- Nginx 错误日志：`/var/log/nginx/error.log`
- Certbot 日志：`/var/log/letsencrypt/letsencrypt.log`
- 浏览器控制台：F12 查看错误信息
如果遇到问题，请检查：
1. Nginx 错误日志：`/var/log/nginx/error.log`
2. 浏览器控制台错误信息
3. 服务器防火墙设置
4. 域名 DNS 解析状态