HTTPS配置完成指南

✅ 配置状态

SSL证书已生成（ssl/cert.pem, ssl/key.pem）
后端HTTPS已配置（自动检测证书）
前端HTTPS已配置（自动检测证书）
支持IP地址访问

🚀 启动服务

启动后端（HTTPS）

cd backend
python main.py

你应该看到：

✅ 使用SSL证书启动
INFO:     Uvicorn running on https://0.0.0.0:8000 (Press CTRL+C to quit)

启动前端（HTTPS）

cd frontend
npm run dev

你应该看到：

VITE v5.x.x  ready in xxx ms

➜  Local:   https://localhost:5173/
➜  Network: https://192.168.2.105:5173/  ← 你的IP地址

📱 访问方式

1. 本地访问（电脑浏览器）

https://localhost:5173

首次访问：

浏览器会提示"连接不安全"（自签名证书）
点击"高级" → "继续访问"
这是正常的，因为使用了自签名证书

2. 手机访问（同一Wi-Fi）

步骤1：查看你的电脑IP

前端启动时会显示，或运行：

ifconfig | grep "inet " | grep -v 127.0.0.1

假设IP为：192.168.2.105

步骤2：修改前端配置

编辑 frontend/.env：

# 取消注释并修改
VITE_BACKEND_HOST=192.168.2.105
VITE_BACKEND_PORT=8000

步骤3：重启前端

cd frontend
npm run dev

步骤4：手机浏览器访问

https://192.168.2.105:5173

手机上的操作：

Safari会提示"此连接不是私密连接"
点击"显示详细信息" → "访问此网站"
Chrome会提示"您的连接不是私密连接"
点击"高级" → "继续前往..."

🔧 配置选项

选项1：仅本地HTTPS（默认）

# frontend/.env
VITE_BACKEND_HOST=localhost
VITE_BACKEND_PORT=8000

访问：https://localhost:5173

选项2：局域网IP + HTTPS

# frontend/.env
VITE_BACKEND_HOST=192.168.2.105  # 你的IP
VITE_BACKEND_PORT=8000

访问：

电脑：https://192.168.2.105:5173
手机：https://192.168.2.105:5173

选项3：禁用HTTPS（如果不需要）

删除证书文件：

rm ssl/key.pem ssl/cert.pem

重启服务，会自动切换为HTTP模式：

后端：http://0.0.0.0:8000
前端：http://localhost:5173

🔍 验证配置

检查后端

访问：https://localhost:8000/docs

应该看到FastAPI文档页面（带🔒图标）

检查前端

打开浏览器控制台，应该看到：

✅ 连接WebSocket: wss://localhost:8000/ws/realtime
✅ WebSocket连接成功
✅ 会话已建立

注意是 wss:// 而不是 ws://

⚠️ 常见问题

Q1: 浏览器提示"不安全"

原因：使用自签名证书

解决：

开发环境：点击"继续访问"即可
生产环境：使用Let's Encrypt或购买证书

Q2: 手机无法访问HTTPS

检查清单：

电脑和手机在同一Wi-Fi
防火墙允许5173和8000端口
在手机上信任证书（点击"继续访问"）
IP地址配置正确

Mac防火墙：

系统设置 → 网络 → 防火墙 → 选项
→ 允许来自网络的传入连接
→ 勾选 Python

Q3: WebSocket连接失败

错误：wss:// 连接失败

检查：

# 1. 测试后端HTTPS
curl -k https://localhost:8000/docs

# 2. 查看后端日志
# 应该看到："使用SSL证书启动"

Q4: 前端显示HTTP而不是HTTPS

原因：证书路径不对或不存在

解决：

# 检查证书
ls -la ssl/
# 应该看到 cert.pem 和 key.pem

# 重新生成（如果需要）
cd ssl
openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes -subj "/C=CN/ST=Beijing/L=Beijing/O=Tolan/CN=localhost"

📊 配置总结

模式	访问地址	WebSocket	证书要求
本地HTTP	`http://localhost:5173`	`ws://localhost:8000/ws/realtime`	删除证书
本地HTTPS	`https://localhost:5173`	`wss://localhost:8000/ws/realtime`	✓ 已配置
IP+HTTPS	`https://192.168.2.105:5173`	`wss://192.168.2.105:8000/ws/realtime`	✓ 已配置

🎯 下一步

立即测试HTTPS配置：

重启后端（如果正在运行）：

cd backend
# 按Ctrl+C停止，然后
python main.py
# 应该看到："使用SSL证书启动"

重启前端（如果正在运行）：

cd frontend
# 按Ctrl+C停止，然后
npm run dev
# 应该看到：https://localhost:5173

浏览器访问：
```
https://localhost:5173
```
接受证书警告（首次访问）：
- 点击"高级"
- 点击"继续前往localhost（不安全）"
开始测试语音交互！

💡 生产环境建议

对于生产部署，建议使用正式证书：

Let's Encrypt（免费）

# 安装certbot
brew install certbot  # Mac
# apt install certbot  # Linux

# 生成证书
sudo certbot certonly --standalone -d yourdomain.com

# 证书位置
# /etc/letsencrypt/live/yourdomain.com/fullchain.pem
# /etc/letsencrypt/live/yourdomain.com/privkey.pem

# 配置
echo "SSL_CERTFILE=/etc/letsencrypt/live/yourdomain.com/fullchain.pem" > backend/.env
echo "SSL_KEYFILE=/etc/letsencrypt/live/yourdomain.com/privkey.pem" >> backend/.env

配置完成！ 现在你可以使用HTTPS和IP地址访问了。🎉

HTTPS_SETUP.md 5.3 KB Історія Запис