157 lines
4.4 KiB
Markdown
157 lines
4.4 KiB
Markdown
# 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`
|
||
|