QUICK_START_HTTPS.md 4.3 KB

🚀 HTTPS快速启动指南

你的配置

IP地址:      10.241.40.29
后端地址:    wss://10.241.40.29:8000/ws/realtime
前端地址:    https://localhost:5173 或 https://10.241.40.29:5173

启动步骤

1. 启动后端(终端1)

cd /Users/wuzilong/work/00code/Tolan/backend
python main.py

✅ 确认后端启动成功:

使用SSL证书启动
INFO:     Uvicorn running on https://0.0.0.0:8000

2. 启动前端(终端2)

cd /Users/wuzilong/work/00code/Tolan/frontend

# ⚠️ 重要:先停止旧的服务(如果正在运行)
# 按 Ctrl+C 停止

# 启动新的服务
npm run dev

✅ 确认前端启动成功:

➜  Local:   https://localhost:5173/
➜  Network: https://10.241.40.29:5173/

3. 浏览器访问

电脑浏览器:

https://localhost:5173

或

https://10.241.40.29:5173

⚠️ 首次访问会提示证书警告:

Chrome/Edge:

  1. 看到"您的连接不是私密连接"
  2. 点击"高级"
  3. 点击"继续前往localhost(不安全)"

Safari:

  1. 看到"此连接不是私密连接"
  2. 点击"显示详细信息"
  3. 点击"访问此网站"

Firefox:

  1. 看到"警告:潜在的安全风险"
  2. 点击"高级"
  3. 点击"接受风险并继续"

4. 验证连接

打开浏览器控制台(F12),应该看到:

✅ 连接WebSocket: wss://10.241.40.29:8000/ws/realtime
✅ WebSocket连接成功
✅ 会话已建立: session_xxxxx
✅ 应用初始化完成

注意:必须是 wss://(有s),不是 ws://


📱 手机访问(同一Wi-Fi)

手机浏览器访问

https://10.241.40.29:5173

iPhone Safari:

  1. 提示"无法验证服务器身份"
  2. 点击"显示详细信息"
  3. 点击"访问此网站"
  4. 再次点击"访问此网站"(确认)

Android Chrome:

  1. 提示"您的连接不是私密连接"
  2. 点击"高级"
  3. 点击"继续访问..."

🔧 故障排查

问题1:还是显示 ws:// 而不是 wss://

原因:前端服务未重启,还在使用旧配置

解决:

cd frontend
# 按 Ctrl+C 完全停止服务
npm run dev  # 重新启动

问题2:WebSocket连接失败

检查1:后端是否使用HTTPS

# 访问这个地址,应该有🔒图标
https://10.241.40.29:8000/docs

检查2:前端环境变量是否加载

在浏览器控制台运行:

console.log('WebSocket URL:', window.location.protocol)
// 应该是 https:

检查3:查看实际连接的URL

浏览器控制台应该显示:

连接WebSocket: wss://10.241.40.29:8000/ws/realtime

如果还是 ws://,说明环境变量没加载,需要完全重启前端。

问题3:后端没有使用HTTPS

后端日志应该显示:

✅ 使用SSL证书启动

如果显示:

⚠️ 未找到SSL证书,使用HTTP启动

检查证书:

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=10.241.40.29"

✅ 配置检查清单

  • SSL证书存在(ssl/cert.pem, ssl/key.pem)
  • 后端日志显示"使用SSL证书启动"
  • 前端启动显示 https://...
  • frontend/.env 包含 VITE_WS_URL=wss://10.241.40.29:8000/ws/realtime
  • 前端服务已完全重启(Ctrl+C后重新npm run dev)
  • 浏览器控制台显示 wss://

🎯 快速修复命令

如果还有问题,运行以下命令完全重置:

# 1. 停止所有服务(按Ctrl+C)

# 2. 确认证书存在
ls -la /Users/wuzilong/work/00code/Tolan/ssl/

# 3. 重启后端
cd /Users/wuzilong/work/00code/Tolan/backend
python main.py
# 等待看到"使用SSL证书启动"

# 4. 新终端,重启前端
cd /Users/wuzilong/work/00code/Tolan/frontend
npm run dev
# 等待看到 https://localhost:5173

# 5. 浏览器访问
# https://10.241.40.29:5173

现在请:

  1. 完全停止前端服务(Ctrl+C)
  2. 重新启动:npm run dev
  3. 访问:https://localhost:5173 或 https://10.241.40.29:5173
  4. 检查控制台,应该看到 wss://10.241.40.29:8000/ws/realtime

试试看!🚀