1
This commit is contained in:
@@ -6,5 +6,5 @@ ENV = 'production'
|
|||||||
|
|
||||||
# Jarvis/生产环境
|
# Jarvis/生产环境
|
||||||
|
|
||||||
VUE_APP_BASE_API = 'http://134.175.126.60:30313'
|
VUE_APP_BASE_API = '/jarvis-api'
|
||||||
port = 8888
|
port = 8888
|
||||||
|
|||||||
156
HTTPS部署说明.md
Normal file
156
HTTPS部署说明.md
Normal file
@@ -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`
|
||||||
|
|
||||||
101
nginx-https.conf
Normal file
101
nginx-https.conf
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
@@ -9,7 +9,10 @@ const CompressionPlugin = require('compression-webpack-plugin')
|
|||||||
|
|
||||||
const name = process.env.VUE_APP_TITLE || 'Jarvis' // 网页标题
|
const name = process.env.VUE_APP_TITLE || 'Jarvis' // 网页标题
|
||||||
|
|
||||||
|
// 后端接口地址(仅用于开发环境代理)
|
||||||
const baseUrl = process.env.VUE_APP_BASE_API || 'http://127.0.0.1:30313' // 后端接口
|
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 // 端口
|
const port = process.env.port || process.env.npm_config_port || 80 // 端口
|
||||||
|
|
||||||
@@ -35,16 +38,18 @@ module.exports = {
|
|||||||
open: true,
|
open: true,
|
||||||
proxy: {
|
proxy: {
|
||||||
// detail: https://cli.vuejs.org/config/#devserver-proxy
|
// detail: https://cli.vuejs.org/config/#devserver-proxy
|
||||||
[process.env.VUE_APP_BASE_API]: {
|
// 如果VUE_APP_BASE_API是相对路径(如/dev-api),则使用代理
|
||||||
target: baseUrl,
|
// 如果是绝对URL,则直接使用该URL,不配置代理
|
||||||
|
[devApiPath]: {
|
||||||
|
target: baseUrl.startsWith('http') ? baseUrl : 'http://127.0.0.1:30313',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite: {
|
pathRewrite: {
|
||||||
['^' + process.env.VUE_APP_BASE_API]: ''
|
['^' + devApiPath]: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// springdoc proxy
|
// springdoc proxy
|
||||||
'^/v3/api-docs/(.*)': {
|
'^/v3/api-docs/(.*)': {
|
||||||
target: baseUrl,
|
target: baseUrl.startsWith('http') ? baseUrl : 'http://127.0.0.1:30313',
|
||||||
changeOrigin: true
|
changeOrigin: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user