# HTTPS部署配置说明

## 问题说明

在HTTPS访问情况下，**不能直接使用 `http://127.0.0.1:30313` 请求后端接口**，因为会出现**混合内容（Mixed Content）**问题：
- 浏览器会阻止从HTTPS页面请求HTTP资源
- 控制台会报错：`Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http://...'`

## 解决方案

### 方案一：通过Nginx代理（推荐）

#### 1. 修改前端环境变量配置

在生产环境打包时，需要创建 `.env.production` 文件，设置API路径为相对路径：

```bash
# .env.production
VUE_APP_BASE_API=/dev-api
```

这样前端打包后，所有API请求都会使用 `/dev-api` 作为前缀，例如：
- 原请求：`http://127.0.0.1:30313/system/user/list`
- 打包后：`/dev-api/system/user/list`
- 实际请求：`https://jarvis.van333.cn/dev-api/system/user/list`

#### 2. 使用提供的nginx配置

已创建 `nginx-https.conf` 配置文件，包含以下关键配置：

```nginx
# API代理配置
location /dev-api/ {
    proxy_pass http://127.0.0.1:30313/;  # 后端服务地址
    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;
}
```

**工作原理：**
- 用户访问：`https://jarvis.van333.cn/dev-api/system/user/list`
- Nginx代理转发到：`http://127.0.0.1:30313/system/user/list`
- 后端处理请求，返回结果
- Nginx将结果返回给用户（通过HTTPS）

#### 3. 部署步骤

1. **创建生产环境配置文件**（如果不存在）：
   ```bash
   # 在项目根目录创建 .env.production
   echo "VUE_APP_BASE_API=/dev-api" > .env.production
   ```

2. **打包前端项目**：
   ```bash
   npm run build:prod
   ```

3. **部署到服务器**：
   ```bash
   # 将 dist 目录内容复制到 /www/sites/jarvis.van333.cn/index/
   ```

4. **更新nginx配置**：
   ```bash
   # 将 nginx-https.conf 内容替换到你的nginx配置
   # 或直接使用：sudo cp nginx-https.conf /etc/nginx/sites-available/jarvis.van333.cn
   ```

5. **重启nginx**：
   ```bash
   sudo nginx -t  # 测试配置
   sudo nginx -s reload  # 重新加载配置
   ```

### 方案二：后端也配置HTTPS（不推荐）

如果后端也配置HTTPS，可以直接使用 `https://127.0.0.1:30313`，但这样会增加配置复杂度。

## 注意事项

### 1. API路径匹配

确保nginx的 `location` 路径与前端 `VUE_APP_BASE_API` 配置一致：
- 如果 `VUE_APP_BASE_API=/dev-api`，则nginx配置 `location /dev-api/`
- 如果 `VUE_APP_BASE_API=/api`，则nginx配置 `location /api/`

### 2. 路径重写

当前配置中，nginx会将 `/dev-api/xxx` 转发到 `http://127.0.0.1:30313/xxx`（去掉 `/dev-api` 前缀）。

如果后端需要保留前缀，可以修改为：
```nginx
location /dev-api/ {
    proxy_pass http://127.0.0.1:30313/dev-api/;  # 保留前缀
    # ... 其他配置
}
```

### 3. WebSocket支持

如果后端使用了WebSocket，nginx配置中已包含相关设置：
```nginx
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
```

### 4. 超时设置

已配置600秒超时，适合长时间运行的接口。可根据实际需求调整。

## 验证配置

部署后，可以通过以下方式验证：

1. **浏览器开发者工具**：
   - 打开 `https://jarvis.van333.cn`
   - F12 打开开发者工具
   - Network 标签查看API请求
   - 确认请求URL为 `https://jarvis.van333.cn/dev-api/...`
   - 确认没有混合内容错误

2. **测试API请求**：
   ```bash
   curl -k https://jarvis.van333.cn/dev-api/system/user/list
   ```

3. **检查nginx日志**：
   ```bash
   tail -f /www/sites/jarvis.van333.cn/log/access.log
   tail -f /www/sites/jarvis.van333.cn/log/error.log
   ```

## 常见问题

### Q: 为什么前端请求还是显示 `http://127.0.0.1:30313`？

A: 检查是否创建了 `.env.production` 文件，并且重新打包了项目。

### Q: 出现 502 Bad Gateway 错误？

A: 
1. 检查后端服务是否运行在 `127.0.0.1:30313`
2. 检查nginx配置中的 `proxy_pass` 地址是否正确
3. 检查防火墙是否允许nginx访问后端端口

### Q: 出现 404 Not Found 错误？

A:
1. 检查nginx的 `location /dev-api/` 配置是否正确
2. 检查后端接口路径是否正确
3. 查看nginx错误日志：`tail -f /www/sites/jarvis.van333.cn/log/error.log`