AIGC/demo/NGROK_CONFIGURATION.md

# 🔗 Ngrok 内网穿透配置完成

## ✅ 已配置的穿透地址

**Ngrok 穿透 URL**: `https://curtly-aphorismatic-ginger.ngrok-free.dev`

## 📋 配置更新总结

### 1. Nginx 配置 ✅
- ✅ 已添加 `server_name` 支持 ngrok 域名
- ✅ CORS 配置已优化，支持动态来源
- ✅ 已配置反向代理，所有 `/api/` 请求自动转发到后端

**文件**: `nginx/nginx.conf`
```nginx
server_name localhost curtly-aphorismatic-ginger.ngrok-free.dev;
```

### 2. 前端 API 配置 ✅
- ✅ API 请求自动检测当前域名
- ✅ 通过 ngrok 访问时使用相对路径 `/api`（自动适配当前域名）
- ✅ 本地开发时仍使用 `http://localhost:8080/api`

**文件**: `frontend/src/api/request.js`

### 3. 支付宝回调配置 ✅
- ✅ 通知地址：`https://curtly-aphorismatic-ginger.ngrok-free.dev/api/payments/alipay/notify`
- ✅ 返回地址：`https://curtly-aphorismatic-ginger.ngrok-free.dev/api/payments/alipay/return`

**文件**: `src/main/resources/application-dev.properties`

### 4. 后端 CORS 配置 ✅
- ✅ 已配置支持 `*.ngrok-free.app` 域名模式
- ✅ 支持所有 ngrok 子域名

**文件**: `src/main/java/com/example/demo/config/SecurityConfig.java`

---

## 🚀 使用方法

### 1. 启动服务

```bash
# 使用 Docker Compose（推荐）
docker-compose up -d

# 或直接启动后端
java -jar target/demo-0.0.1-SNAPSHOT.jar --spring.profiles.active=dev
```

### 2. 启动 Ngrok

```bash
# 穿透 Nginx 的 80 端口
ngrok http 80
```

**注意**: Ngrok 应该指向 **80 端口**（Nginx），而不是 8080（后端）

### 3. 访问应用

通过 ngrok 地址访问：
- 🌐 **前端**: `https://curtly-aphorismatic-ginger.ngrok-free.dev`
- 🔗 **API**: `https://curtly-aphorismatic-ginger.ngrok-free.dev/api`
- 🏥 **健康检查**: `https://curtly-aphorismatic-ginger.ngrok-free.dev/health`

---

## 🔧 配置说明

### 端口穿透

**只需要穿透 80 端口**（Nginx）
- ✅ Nginx 会处理所有前端请求
- ✅ Nginx 会自动将 `/api/` 请求代理到后端（内部访问）
- ❌ 不需要穿透 8080 端口（后端）
- ❌ 不需要穿透 3306 端口（MySQL）

### 请求流程

```
外网用户
   ↓
https://curtly-aphorismatic-ginger.ngrok-free.dev (Ngrok)
   ↓
localhost:80 (Nginx)
   ├─ / → 前端静态文件
   └─ /api/ → proxy_pass → backend:8080 (内部 Docker 网络)
```

---

## 🧪 测试验证

### 1. 测试前端访问
```bash
curl https://curtly-aphorismatic-ginger.ngrok-free.dev/
```

### 2. 测试 API 代理
```bash
curl https://curtly-aphorismatic-ginger.ngrok-free.dev/api/health
```

### 3. 测试健康检查
```bash
curl https://curtly-aphorismatic-ginger.ngrok-free.dev/health
```

---

## ⚠️ 注意事项

### 1. Ngrok 地址可能变化
- 免费版 ngrok 每次重启地址会变化
- 如果地址变化，需要更新：
  1. `nginx/nginx.conf` 中的 `server_name`
  2. `application-dev.properties` 中的 `alipay.notify-url` 和 `alipay.return-url`

### 2. Ngrok 警告页面
- 免费版 ngrok 会在浏览器显示警告页面
- 可以点击 "Visit Site" 继续访问
- 付费版可以移除警告

### 3. HTTPS 证书
- Ngrok 自动提供 HTTPS 证书
- 无需额外配置 SSL
- 确保使用 `https://` 协议访问

---

## 🔄 更新配置（如果 Ngrok 地址变化）

如果 ngrok 地址变化为 `https://new-address.ngrok-free.dev`：

### 1. 更新 Nginx 配置
```nginx
server_name localhost new-address.ngrok-free.dev;
```

### 2. 更新支付宝回调地址
```properties
alipay.notify-url=https://new-address.ngrok-free.dev/api/payments/alipay/notify
alipay.return-url=https://new-address.ngrok-free.dev/api/payments/alipay/return
```

### 3. 重新加载配置
```bash
# Nginx 配置重新加载
docker exec demo-nginx nginx -s reload

# 或重启服务
docker-compose restart nginx
```

---

## 📊 当前配置状态

| 配置项 | 状态 | 说明 |
|--------|------|------|
| Nginx server_name | ✅ | 已配置 ngrok 域名 |
| 前端 API 基础路径 | ✅ | 自动适配当前域名 |
| 支付宝回调地址 | ✅ | 已配置 ngrok URL |
| 后端 CORS | ✅ | 支持 ngrok 域名模式 |
| 端口穿透 | ✅ | 只需穿透 80 端口 |

---

## 🎯 快速检查清单

- [x] ✅ Nginx 配置已更新 server_name
- [x] ✅ 前端 API 配置支持相对路径
- [x] ✅ 支付宝回调地址已配置
- [x] ✅ 后端 CORS 已支持 ngrok 域名
- [ ] ⚠️  Ngrok 服务正在运行并指向 80 端口
- [ ] ⚠️  已测试前端访问
- [ ] ⚠️  已测试 API 代理

---

**配置完成！可以通过 `https://curtly-aphorismatic-ginger.ngrok-free.dev` 访问应用了！** 🎉