diff --git a/.env.production b/.env.production index 948ecb6..9fbf428 100644 --- a/.env.production +++ b/.env.production @@ -6,5 +6,5 @@ ENV = 'production' # Jarvis/生产环境 -VUE_APP_BASE_API = 'http://134.175.126.60:30313' +VUE_APP_BASE_API = '/jarvis-api' port = 8888 diff --git a/HTTPS部署说明.md b/HTTPS部署说明.md new file mode 100644 index 0000000..50e040f --- /dev/null +++ b/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` + diff --git a/nginx-https.conf b/nginx-https.conf new file mode 100644 index 0000000..2a6919a --- /dev/null +++ b/nginx-https.conf @@ -0,0 +1,101 @@ +# 80端口:仅处理HTTP请求,自动重定向到HTTPS + +server { + listen 80; + server_name jarvis.van333.cn; # 匹配域名 + + # 核心:HTTP请求永久重定向到HTTPS(301表示永久重定向) + return 301 https://$host$request_uri; + + # 可选:记录重定向日志(便于排查) + access_log /www/sites/jarvis.van333.cn/log/redirect.log main; +} + +# 443端口:处理HTTPS请求,包含SSL配置和业务逻辑 + +server { + listen 443 ssl; + server_name jarvis.van333.cn; # 与80端口保持一致的域名 + + # 网站根目录和默认首页(保留你的业务配置) + root /www/sites/jarvis.van333.cn/index; + index index.html index.htm; + + # SSL证书配置(仅在443端口生效) + ssl_certificate /www/common/ssl/jarvis.van333.cn/fullchain.cer; + ssl_certificate_key /www/common/ssl/jarvis.van333.cn.key; + + # SSL安全配置(复用你的原有配置) + ssl_protocols TLSv1.2 TLSv1.3; + ssl_prefer_server_ciphers on; + ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256; + + # 日志配置 + access_log /www/sites/jarvis.van333.cn/log/access.log main; + error_log /www/sites/jarvis.van333.cn/log/error.log; + + # 静态资源缓存配置 + location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { + expires 1y; + add_header Cache-Control "public, immutable"; + try_files $uri =404; + } + + # ========== 重要:后端API代理配置 ========== + # 将所有API请求代理到后端服务器(解决混合内容问题) + # 注意:这里的路径需要与前端 VUE_APP_BASE_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; + proxy_set_header X-Forwarded-Host $server_name; + + # WebSocket支持(如果需要) + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection "upgrade"; + + # 超时设置 + proxy_connect_timeout 600s; + proxy_send_timeout 600s; + proxy_read_timeout 600s; + } + + # Swagger API文档代理(如果需要) + location /v3/api-docs/ { + proxy_pass http://127.0.0.1:30313/v3/api-docs/; + 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; + } + + # Swagger UI代理(如果需要) + location /swagger-ui/ { + proxy_pass http://127.0.0.1:30313/swagger-ui/; + 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; + } + + # Druid监控代理(如果需要) + location /druid/ { + proxy_pass http://127.0.0.1:30313/druid/; + 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; + } + + # Vue Router History模式支持(必须放在最后) + location / { + try_files $uri $uri/ /index.html; + } + + # 404错误页面 + error_page 404 /404.html; +} + diff --git a/vue.config.js b/vue.config.js index 83f55fe..1eed0f8 100644 --- a/vue.config.js +++ b/vue.config.js @@ -9,7 +9,10 @@ const CompressionPlugin = require('compression-webpack-plugin') const name = process.env.VUE_APP_TITLE || 'Jarvis' // 网页标题 +// 后端接口地址(仅用于开发环境代理) const baseUrl = process.env.VUE_APP_BASE_API || 'http://127.0.0.1:30313' // 后端接口 +// 开发环境代理路径(如果未设置VUE_APP_BASE_API,使用默认代理路径) +const devApiPath = process.env.VUE_APP_BASE_API || '/dev-api' const port = process.env.port || process.env.npm_config_port || 80 // 端口 @@ -35,16 +38,18 @@ module.exports = { open: true, proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy - [process.env.VUE_APP_BASE_API]: { - target: baseUrl, + // 如果VUE_APP_BASE_API是相对路径(如/dev-api),则使用代理 + // 如果是绝对URL,则直接使用该URL,不配置代理 + [devApiPath]: { + target: baseUrl.startsWith('http') ? baseUrl : 'http://127.0.0.1:30313', changeOrigin: true, pathRewrite: { - ['^' + process.env.VUE_APP_BASE_API]: '' + ['^' + devApiPath]: '' } }, // springdoc proxy '^/v3/api-docs/(.*)': { - target: baseUrl, + target: baseUrl.startsWith('http') ? baseUrl : 'http://127.0.0.1:30313', changeOrigin: true } },