yunqueai/ai_dianshang

Fork 0

Files

sjk 5683f35942 web

2025-11-28 15:18:10 +08:00

6.1 KiB

Raw Permalink Blame History

前端 HTTPS 代理配置方案

🎯 解决方案概述

问题：https://gvizee.com/ 无法访问 http://104.244.91.212:8060 (混合内容错误)

解决方案：在前端服务器配置 Nginx 反向代理

📊 架构图

浏览器 (https://gvizee.com)
    ↓ HTTPS
前端服务器 Nginx (gvizee.com:443)
    ↓ HTTP (内网/外网)
后端服务器 (104.244.91.212:8060)

✅ 优势

✅ 前端保持 HTTPS：用户访问安全，无浏览器警告
✅ 后端继续 HTTP：无需修改后端代码或配置
✅ 对用户透明：URL 统一为 https://gvizee.com/api/v1/...
✅ 易于维护：所有配置在前端 Nginx

🚀 快速部署

步骤 1: 上传文件到前端服务器

# 上传配置文件和脚本
scp nginx-frontend-proxy.conf user@gvizee.com:/tmp/
scp setup-frontend-proxy.sh user@gvizee.com:/tmp/
scp web/assets/js/api.js user@gvizee.com:/tmp/

步骤 2: SSH 登录前端服务器

ssh user@gvizee.com
cd /tmp

步骤 3: 运行自动配置脚本

# 添加执行权限
chmod +x setup-frontend-proxy.sh

# 运行脚本
sudo bash setup-frontend-proxy.sh

脚本会自动：

✅ 检查并安装 Nginx
✅ 检查 SSL 证书（可选自动申请 Let's Encrypt）
✅ 配置 Nginx 反向代理
✅ 测试配置
✅ 重启 Nginx
✅ 配置防火墙

步骤 4: 更新前端代码

# 复制更新后的 api.js
sudo cp /tmp/api.js /var/www/gvizee.com/assets/js/

# 清除浏览器缓存后访问
# https://gvizee.com/

📝 手动配置（如果不使用脚本）

1. 申请 SSL 证书（如果没有）

# 安装 Certbot
sudo apt update
sudo apt install certbot python3-certbot-nginx

# 申请证书
sudo certbot --nginx -d gvizee.com -d www.gvizee.com

2. 配置 Nginx

# 复制配置文件
sudo cp /tmp/nginx-frontend-proxy.conf /etc/nginx/sites-available/gvizee.com

# 创建软链接
sudo ln -sf /etc/nginx/sites-available/gvizee.com /etc/nginx/sites-enabled/

# 测试配置
sudo nginx -t

# 重启 Nginx
sudo systemctl restart nginx

3. 配置防火墙

sudo ufw allow 80/tcp
sudo ufw allow 443/tcp

🔍 验证配置

测试 1: 健康检查

curl -k https://gvizee.com/health

预期输出：

{
  "status": "ok",
  "message": "电商小程序API服务",
  "version": "v1.0.0"
}

测试 2: API 代理

curl -k https://gvizee.com/api/v1/banners

预期输出：轮播图数据 JSON

测试 3: 浏览器访问

访问 https://gvizee.com/
按 F12 打开控制台

应该看到：

[API] 检测到 gvizee.com 域名，使用 Nginx 代理
[API] 后端地址: /api/v1

Network 标签页应该显示请求 URL：
```
https://gvizee.com/api/v1/banners
```
无混合内容警告 ✅

📂 文件部署位置

文件	前端服务器路径
前端静态文件	`/var/www/gvizee.com/`
api.js	`/var/www/gvizee.com/assets/js/api.js`
Nginx 配置	`/etc/nginx/sites-available/gvizee.com`
SSL 证书	`/etc/letsencrypt/live/gvizee.com/`

🔧 配置文件说明

Nginx 关键配置

# API 代理
location /api/ {
    proxy_pass http://104.244.91.212:8060;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-Proto $scheme;
}

前端 API 配置

// gvizee.com 使用相对路径
if (hostname.includes('gvizee.com')) {
    return '/api/v1';  // Nginx 会代理到后端
}

🛠️ 故障排查

问题 1: 502 Bad Gateway

原因：无法连接到后端服务器

解决：

# 检查后端服务是否运行
curl http://104.244.91.212:8060/health

# 检查防火墙是否允许前端服务器访问后端
# 在后端服务器上
sudo ufw allow from <前端服务器IP> to any port 8060

问题 2: 504 Gateway Timeout

原因：后端响应超时

解决：增加 Nginx 超时配置

proxy_connect_timeout 60s;
proxy_read_timeout 60s;

问题 3: CORS 错误

原因：后端 CORS 配置问题

解决：确保后端允许来自 gvizee.com 的请求，或在 Nginx 添加 CORS 头

问题 4: SSL 证书错误

原因：证书过期或路径错误

解决：

# 更新证书
sudo certbot renew

# 检查证书路径
sudo ls -la /etc/letsencrypt/live/gvizee.com/

📊 性能优化建议

1. 启用 Gzip 压缩

gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_min_length 1000;

2. 启用缓存

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

3. 启用 HTTP/2

listen 443 ssl http2;

🔒 安全建议

定期更新证书
```
sudo certbot renew --dry-run
```

配置严格的 SSL

ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers HIGH:!aNULL:!MD5;

限制请求速率

limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s;
limit_req zone=api burst=20;

📋 检查清单

部署完成后，请检查：

SSL 证书已安装
Nginx 配置无错误 (nginx -t)
Nginx 已重启
防火墙 80、443 端口已开放
前端文件已部署到 /var/www/gvizee.com/
api.js 已更新
浏览器可访问 https://gvizee.com/
API 请求成功（无混合内容错误）
后端服务正常运行

🆘 需要帮助？

查看日志

# Nginx 访问日志
sudo tail -f /var/log/nginx/access.log

# Nginx 错误日志
sudo tail -f /var/log/nginx/error.log

# 系统日志
sudo journalctl -u nginx -f

测试后端连接

# 从前端服务器测试后端
curl http://104.244.91.212:8060/health

# 测试 API
curl http://104.244.91.212:8060/api/v1/banners

🎉 总结

使用这个方案：

✅ 前端保持 HTTPS（安全）
✅ 后端继续 HTTP（无需修改）
✅ 用户无感知（体验良好）
✅ 易于维护（集中配置）

后端完全不需要配置 HTTPS！

6.1 KiB Raw Permalink Blame History Unescape Escape