312 lines
6.2 KiB
Markdown
312 lines
6.2 KiB
Markdown
# 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 查看错误信息
|