Localhost 与公网访问
9.3 内网穿透实战
Tip
这是一个可以在地球另一端访问你卧室电脑的魔法，但请小心使用。
1. 为什么要学这个?
你在做支付功能。
你点击"支付"，跳转到 Stripe/支付宝 页面付了钱。
Stripe 说："支付成功，我会给你的服务器发一个通知 (Webhook)。"
Stripe 对着 http://localhost:3000/api/webhook 发送了通知。
即使 Stripe 的服务器再强大，它也喊不答应你卧室里的那台电脑。
公网服务器找不到私网 IP，这是互联网的基本法则。为了接收这个回调，你需要一条"隧道"。
2. 核心概念：Tunneling (隧道)
内网穿透就像是你在家里（内网）和互联网（公网）之间拉了一根电话线。
- 你在公网上找了一个中介（如 Ngrok 服务器）。
- 你的电脑跟中介保持通话（长连接）。
- 当外部有人访问中介时，中介通过电话线把数据传给你。
这样，你就获得了一个临时的公网 URL。
3. 解决方案 (HOW)
方案 A: Ngrok (经典款)
不用配置路由器，不用买服务器，一条命令搞定。
# 1. 安装
npm install -g ngrok
# 2. 启动隧道，转发到 3000 端口
ngrok http 3000
你会得到一个类似 https://e8a2-114-x-x-x.ngrok-free.app 的网址。
把这个网址填给 Stripe，或者发给你的异地客户，他们就能访问你本地的代码了。
方案 B: Cloudflare Tunnel (免费不限速)
Ngrok 免费版现在有限制，Cloudflare 是更现代的选择。
# 使用 quick tunnel
npx cloudflared tunnel --url http://localhost:3000
穿透原理图
graph TD
Stripe["Stripe 服务器"] -->|POST请求| TunnelURL["公网中介 (Ngrok)"]
subgraph Firewall [防火墙/路由器]
Line["长连接隧道"]
end
TunnelURL <===>|穿透| Local["你的电脑"]
Local -->|转发| NextJS["localhost:3000"]
style Stripe fill:#635bff,color:#fff
style TunnelURL fill:#ffecb3
style NextJS fill:#c8e6c9
4. 真实案例
Story
那个忘了关门的实习生
某初创公司的一位实习生，为了在家远程办公，用 Ngrok 把公司的内网开发服务器穿透了出去。 这是一个无需密码的管理员后台。 周末他去玩了，电脑没关，Terminal 里的 Ngrok 也就一直挂着。 结果： 一个自动化的网络扫描器发现了这个公开的 URL。爬虫顺着网线爬进内网，把他们的开发数据库删得干干净净，并留下一封勒索信。
Vibe 心法：内网穿透是"临时手术"，绝不是"长久器官"。调试完回调，或者演示完 Demo，立刻 Ctrl+C 关闭隧道。永远不要让这扇后门一直开着。
5. 本章小结
- 打洞：Tunnel 让全世界都能访问你的 Localhost。
- 调试：开发 Webhook (支付/登录) 必备。
- 警惕：用完即关。给隧道加密码 (
ngrok http 3000 --basic-auth="user:pass") 是好习惯。