# 前端配置指南

## 环境变量配置

### 快速开始

复制环境配置文件：
```bash
cd frontend
cp .env.development .env
```

### 配置项说明

#### WebSocket URL配置

**生产环境** (`.env.production`):
```bash
# 通过Nginx域名访问
VITE_WS_URL=wss://www.hikelly.chat/ws
```

**开发环境** (`.env.development`):
```bash
# 本地HTTPS访问
VITE_WS_URL=wss://localhost:8000/ws

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

**局域网测试**:
```bash
# 替换为实际IP地址
VITE_WS_URL=wss://192.168.2.112:8000/ws
```

#### SSL证书配置

**开发环境**:
```bash
# 留空，自动使用 ../ssl/ 的自签名证书
VITE_SSL_KEYFILE=
VITE_SSL_CERTFILE=
```

**生产环境**:
```bash
# 使用Nginx管理证书，前端不需要配置
VITE_SSL_KEYFILE=
VITE_SSL_CERTFILE=
```

## 启动服务

```bash
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. 构建前端

```bash
cd frontend
npm run build
```

### 2. Nginx配置

```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管理。