web
This commit is contained in:
sjk
317
web/FRONTEND_HTTPS_PROXY.md
Normal file
317
web/FRONTEND_HTTPS_PROXY.md
Normal file
@@ -0,0 +1,317 @@
|
||||
# 前端 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: 上传文件到前端服务器
|
||||
|
||||
```bash
|
||||
# 上传配置文件和脚本
|
||||
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 登录前端服务器
|
||||
|
||||
```bash
|
||||
ssh user@gvizee.com
|
||||
cd /tmp
|
||||
```
|
||||
|
||||
### 步骤 3: 运行自动配置脚本
|
||||
|
||||
```bash
|
||||
# 添加执行权限
|
||||
chmod +x setup-frontend-proxy.sh
|
||||
|
||||
# 运行脚本
|
||||
sudo bash setup-frontend-proxy.sh
|
||||
```
|
||||
|
||||
脚本会自动：
|
||||
1. ✅ 检查并安装 Nginx
|
||||
2. ✅ 检查 SSL 证书（可选自动申请 Let's Encrypt）
|
||||
3. ✅ 配置 Nginx 反向代理
|
||||
4. ✅ 测试配置
|
||||
5. ✅ 重启 Nginx
|
||||
6. ✅ 配置防火墙
|
||||
|
||||
### 步骤 4: 更新前端代码
|
||||
|
||||
```bash
|
||||
# 复制更新后的 api.js
|
||||
sudo cp /tmp/api.js /var/www/gvizee.com/assets/js/
|
||||
|
||||
# 清除浏览器缓存后访问
|
||||
# https://gvizee.com/
|
||||
```
|
||||
|
||||
## 📝 手动配置（如果不使用脚本）
|
||||
|
||||
### 1. 申请 SSL 证书（如果没有）
|
||||
|
||||
```bash
|
||||
# 安装 Certbot
|
||||
sudo apt update
|
||||
sudo apt install certbot python3-certbot-nginx
|
||||
|
||||
# 申请证书
|
||||
sudo certbot --nginx -d gvizee.com -d www.gvizee.com
|
||||
```
|
||||
|
||||
### 2. 配置 Nginx
|
||||
|
||||
```bash
|
||||
# 复制配置文件
|
||||
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. 配置防火墙
|
||||
|
||||
```bash
|
||||
sudo ufw allow 80/tcp
|
||||
sudo ufw allow 443/tcp
|
||||
```
|
||||
|
||||
## 🔍 验证配置
|
||||
|
||||
### 测试 1: 健康检查
|
||||
|
||||
```bash
|
||||
curl -k https://gvizee.com/health
|
||||
```
|
||||
|
||||
**预期输出**：
|
||||
```json
|
||||
{
|
||||
"status": "ok",
|
||||
"message": "电商小程序API服务",
|
||||
"version": "v1.0.0"
|
||||
}
|
||||
```
|
||||
|
||||
### 测试 2: API 代理
|
||||
|
||||
```bash
|
||||
curl -k https://gvizee.com/api/v1/banners
|
||||
```
|
||||
|
||||
**预期输出**：轮播图数据 JSON
|
||||
|
||||
### 测试 3: 浏览器访问
|
||||
|
||||
1. 访问 `https://gvizee.com/`
|
||||
2. 按 F12 打开控制台
|
||||
3. 应该看到：
|
||||
```
|
||||
[API] 检测到 gvizee.com 域名，使用 Nginx 代理
|
||||
[API] 后端地址: /api/v1
|
||||
```
|
||||
4. Network 标签页应该显示请求 URL：
|
||||
```
|
||||
https://gvizee.com/api/v1/banners
|
||||
```
|
||||
5. **无混合内容警告** ✅
|
||||
|
||||
## 📂 文件部署位置
|
||||
|
||||
| 文件 | 前端服务器路径 |
|
||||
|------|---------------|
|
||||
| 前端静态文件 | `/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 关键配置
|
||||
|
||||
```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 配置
|
||||
|
||||
```javascript
|
||||
// gvizee.com 使用相对路径
|
||||
if (hostname.includes('gvizee.com')) {
|
||||
return '/api/v1'; // Nginx 会代理到后端
|
||||
}
|
||||
```
|
||||
|
||||
## 🛠️ 故障排查
|
||||
|
||||
### 问题 1: 502 Bad Gateway
|
||||
|
||||
**原因**：无法连接到后端服务器
|
||||
|
||||
**解决**：
|
||||
```bash
|
||||
# 检查后端服务是否运行
|
||||
curl http://104.244.91.212:8060/health
|
||||
|
||||
# 检查防火墙是否允许前端服务器访问后端
|
||||
# 在后端服务器上
|
||||
sudo ufw allow from <前端服务器IP> to any port 8060
|
||||
```
|
||||
|
||||
### 问题 2: 504 Gateway Timeout
|
||||
|
||||
**原因**：后端响应超时
|
||||
|
||||
**解决**：增加 Nginx 超时配置
|
||||
```nginx
|
||||
proxy_connect_timeout 60s;
|
||||
proxy_read_timeout 60s;
|
||||
```
|
||||
|
||||
### 问题 3: CORS 错误
|
||||
|
||||
**原因**：后端 CORS 配置问题
|
||||
|
||||
**解决**：确保后端允许来自 gvizee.com 的请求，或在 Nginx 添加 CORS 头
|
||||
|
||||
### 问题 4: SSL 证书错误
|
||||
|
||||
**原因**：证书过期或路径错误
|
||||
|
||||
**解决**：
|
||||
```bash
|
||||
# 更新证书
|
||||
sudo certbot renew
|
||||
|
||||
# 检查证书路径
|
||||
sudo ls -la /etc/letsencrypt/live/gvizee.com/
|
||||
```
|
||||
|
||||
## 📊 性能优化建议
|
||||
|
||||
### 1. 启用 Gzip 压缩
|
||||
|
||||
```nginx
|
||||
gzip on;
|
||||
gzip_types text/plain text/css application/json application/javascript;
|
||||
gzip_min_length 1000;
|
||||
```
|
||||
|
||||
### 2. 启用缓存
|
||||
|
||||
```nginx
|
||||
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 启用 HTTP/2
|
||||
|
||||
```nginx
|
||||
listen 443 ssl http2;
|
||||
```
|
||||
|
||||
## 🔒 安全建议
|
||||
|
||||
1. **定期更新证书**
|
||||
```bash
|
||||
sudo certbot renew --dry-run
|
||||
```
|
||||
|
||||
2. **配置严格的 SSL**
|
||||
```nginx
|
||||
ssl_protocols TLSv1.2 TLSv1.3;
|
||||
ssl_ciphers HIGH:!aNULL:!MD5;
|
||||
```
|
||||
|
||||
3. **限制请求速率**
|
||||
```nginx
|
||||
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 请求成功（无混合内容错误）
|
||||
- [ ] 后端服务正常运行
|
||||
|
||||
## 🆘 需要帮助？
|
||||
|
||||
### 查看日志
|
||||
|
||||
```bash
|
||||
# Nginx 访问日志
|
||||
sudo tail -f /var/log/nginx/access.log
|
||||
|
||||
# Nginx 错误日志
|
||||
sudo tail -f /var/log/nginx/error.log
|
||||
|
||||
# 系统日志
|
||||
sudo journalctl -u nginx -f
|
||||
```
|
||||
|
||||
### 测试后端连接
|
||||
|
||||
```bash
|
||||
# 从前端服务器测试后端
|
||||
curl http://104.244.91.212:8060/health
|
||||
|
||||
# 测试 API
|
||||
curl http://104.244.91.212:8060/api/v1/banners
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
使用这个方案：
|
||||
- ✅ 前端保持 HTTPS（安全）
|
||||
- ✅ 后端继续 HTTP（无需修改）
|
||||
- ✅ 用户无感知（体验良好）
|
||||
- ✅ 易于维护（集中配置）
|
||||
|
||||
**后端完全不需要配置 HTTPS！**
|
||||
Reference in New Issue
Block a user