1

2025-11-05 12:54:35 +08:00
parent d7a71931a9
commit 2fab612906
4 changed files with 267 additions and 5 deletions
--- 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
--- a/HTTPS部署说明.md
+++ 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`
+
--- a/nginx-https.conf
+++ 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;
+}
+
--- 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
      }
    },