ZYT/zyt

Fork 0

Files

T

Your Name ab77f5488d 新增功能

2026-03-04 15:32:30 +08:00

6.2 KiB

Raw Blame History

HTTPS 部署快速指南

为什么需要 HTTPS？

WebRTC（视频通话功能）要求：

✅ HTTPS 协议
✅ 或者 localhost/127.0.0.1

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

快速部署步骤

步骤1：申请 SSL 证书

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

# 安装 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：阿里云/腾讯云免费证书

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

步骤2：配置 Nginx

2.1 复制配置文件

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

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

2.2 修改配置

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 启用配置

# 创建软链接
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

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

3.2 重新构建

cd admin
npm run build

3.3 部署到服务器

# 上传构建文件
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

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

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 测试视频通话

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

开发环境测试

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

Windows

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

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

# 启动开发服务器
npm run dev

Linux/Mac

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

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

# 启动开发服务器
npm run dev

修改 vite.config.ts

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天，需要定期续期。

自动续期

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

# 添加定时任务
sudo crontab -e

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

常见问题

Q1: 证书申请失败

原因：

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

解决：

# 检查域名解析
nslookup your-domain.com

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

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

Q2: Nginx 配置错误

检查配置：

sudo nginx -t

查看错误日志：

sudo tail -f /var/log/nginx/error.log

Q3: 混合内容警告

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

解决：确保所有资源都使用 HTTPS：

API 请求：https://your-domain.com/adminapi/
静态资源：使用相对路径或 HTTPS CDN

Q4: 视频通话还是不工作

检查清单：

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

安全建议

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

性能优化

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

监控和维护

证书过期监控

# 检查证书有效期
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 查看错误信息

6.2 KiB Raw Blame History Unescape Escape