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

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. 启动服务

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

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

2. 启动 Ngrok

# 穿透 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. 测试前端访问

curl https://curtly-aphorismatic-ginger.ngrok-free.dev/

2. 测试 API 代理

curl https://curtly-aphorismatic-ginger.ngrok-free.dev/api/health

3. 测试健康检查

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 配置

server_name localhost new-address.ngrok-free.dev;

2. 更新支付宝回调地址

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. 重新加载配置

# Nginx 配置重新加载
docker exec demo-nginx nginx -s reload

# 或重启服务
docker-compose restart nginx

---

📊 当前配置状态

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

---

🎯 快速检查清单

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

---

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