318 lines
6.1 KiB
Markdown
318 lines
6.1 KiB
Markdown
# 前端 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！**
|