# 前端 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！**