配置 Nginx 反向代理和 Ngrok 内网穿透支持

- 添加 Nginx 反向代理配置（支持 ngrok 域名）
- 创建统一的 API 工具函数（自动适配域名）
- 更新前端 API 配置支持相对路径
- 配置支付宝回调地址使用 ngrok URL
- 优化 Docker Compose 配置（仅暴露 80 端口）
- 添加完整的部署和配置文档

demo/NGROK_CONFIGURATION.md

@@ -0,0 +1,184 @@
+# 🔗 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` 访问应用了！** 🎉
+