Tolan/frontend/SSL_CONFIG.md

前端配置指南

环境变量配置

快速开始

复制环境配置文件：

cd frontend
cp .env.development .env

配置项说明

WebSocket URL配置

生产环境 (.env.production):

# 通过Nginx域名访问
VITE_WS_URL=wss://www.hikelly.chat/ws

开发环境 (.env.development):

# 本地HTTPS访问
VITE_WS_URL=wss://localhost:8000/ws

# 或本地HTTP（不推荐，浏览器会限制麦克风）
# VITE_WS_URL=ws://localhost:8000/ws

局域网测试:

# 替换为实际IP地址
VITE_WS_URL=wss://192.168.2.112:8000/ws

SSL证书配置

开发环境:

# 留空，自动使用 ../ssl/ 的自签名证书
VITE_SSL_KEYFILE=
VITE_SSL_CERTFILE=

生产环境:

# 使用Nginx管理证书，前端不需要配置
VITE_SSL_KEYFILE=
VITE_SSL_CERTFILE=

启动服务

cd frontend
npm run dev

证书优先级

1. 优先使用环境变量 VITE_SSL_KEYFILE 和 VITE_SSL_CERTFILE（生产）
2. 未配置则使用 ../ssl/key.pem 和 ../ssl/cert.pem（开发）
3. 证书不存在则以HTTP模式启动

生产环境部署（推荐）

生产环境建议使用Nginx托管静态文件，而非直接运行Vite dev server：

1. 构建前端

cd frontend
npm run build

2. Nginx配置

server {
    listen 443 ssl;
    server_name www.hikelly.chat;
    
    ssl_certificate /etc/nginx/cert/www.hikelly.chat.pem;
    ssl_certificate_key /etc/nginx/cert/www.hikelly.chat.key;
    
    # 前端静态文件
    location / {
        root /path/to/Tolan/frontend/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    
    # 后端API代理
    location /api/ {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    # WebSocket代理
    location /ws {
        proxy_pass http://127.0.0.1:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

使用Nginx时，前后端都不需要配置SSL，证书统一由Nginx管理。