1

HTTPS部署说明.md

@@ -0,0 +1,156 @@
+# 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`
+