4.4 KiB
4.4 KiB
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路径为相对路径：
# .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 配置文件，包含以下关键配置：
# 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. 部署步骤
-
创建生产环境配置文件（如果不存在）：
# 在项目根目录创建 .env.production echo "VUE_APP_BASE_API=/dev-api" > .env.production -
打包前端项目：
npm run build:prod -
部署到服务器：
# 将 dist 目录内容复制到 /www/sites/jarvis.van333.cn/index/ -
更新nginx配置：
# 将 nginx-https.conf 内容替换到你的nginx配置 # 或直接使用：sudo cp nginx-https.conf /etc/nginx/sites-available/jarvis.van333.cn -
重启nginx：
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 前缀）。
如果后端需要保留前缀，可以修改为：
location /dev-api/ {
proxy_pass http://127.0.0.1:30313/dev-api/; # 保留前缀
# ... 其他配置
}
3. WebSocket支持
如果后端使用了WebSocket，nginx配置中已包含相关设置：
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
4. 超时设置
已配置600秒超时，适合长时间运行的接口。可根据实际需求调整。
验证配置
部署后，可以通过以下方式验证：
-
浏览器开发者工具：
- 打开
https://jarvis.van333.cn - F12 打开开发者工具
- Network 标签查看API请求
- 确认请求URL为
https://jarvis.van333.cn/dev-api/... - 确认没有混合内容错误
- 打开
-
测试API请求：
curl -k https://jarvis.van333.cn/dev-api/system/user/list -
检查nginx日志：
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:
- 检查后端服务是否运行在
127.0.0.1:30313 - 检查nginx配置中的
proxy_pass地址是否正确 - 检查防火墙是否允许nginx访问后端端口
Q: 出现 404 Not Found 错误？
A:
- 检查nginx的
location /dev-api/配置是否正确 - 检查后端接口路径是否正确
- 查看nginx错误日志：
tail -f /www/sites/jarvis.van333.cn/log/error.log