10.1 从 Localhost 到互联网
本节目标：理解 localhost 为什么别人打不开，学会用局域网在手机上测试，搞清楚"让别人看到"有哪几条路。
Localhost：每个设备的"自言自语"
小明以为 localhost 是"我的电脑的地址"。不完全对——localhost 的意思是"发出请求的设备自己"。
当小明在自己的浏览器输入 localhost:3000，浏览器访问的是小明的电脑。小明的电脑上跑着 Next.js 服务，所以页面正常显示。
当朋友在自己的浏览器输入 localhost:3000，浏览器访问的是朋友的电脑。朋友的电脑上什么都没跑，所以浏览器报错"拒绝连接"。
一个直觉测试：你在手机浏览器输入 localhost，访问的是手机自己，不是你的电脑。每个设备的 localhost 都指向自己。
技术上，localhost 对应 IP 地址 127.0.0.1，叫做回环地址（loopback）。数据包从你的电脑发出，又回到你的电脑，从不经过网线或 WiFi。这就是为什么 localhost 天然安全——外部设备根本碰不到它。
为什么开发服务器默认用 localhost？
正因为 localhost 只有本机能访问，它是最安全的开发环境。你的代码可能有 bug、有安全漏洞、数据库里存着测试数据——都没关系，因为只有你自己能看到。开发框架默认绑定 localhost，就是为了避免你的半成品意外暴露给局域网里的其他设备。
局域网：同一个 WiFi 下的设备互通
小明理解了 localhost 的问题，但他还有一个需求：在手机上测试触摸手势和响应式布局。总不能每次都部署到公网吧？
不需要。如果手机和电脑连着同一个 WiFi，它们就在同一个局域网（LAN） 里。局域网内的设备可以直接互相访问。
想象同一个 WiFi 下的设备像同一间办公室里的人，可以直接喊话。不同 WiFi 就像不同城市，喊话听不到。
局域网是全栈开发中真机调试的核心手段。你不需要每次都部署到公网才能在手机上看效果——手机和电脑在同一个 WiFi 下，直接访问就行。
找到你的局域网 IP
你的电脑在局域网里有一个内部 IP 地址，通常是 192.168.x.x 或 10.x.x.x 的格式。找到它：
ipconfigifconfigip addr在输出中找到类似 192.168.1.105 的地址（不是 127.0.0.1，那是 localhost）。
手机访问电脑上的项目
- 确保手机和电脑连着同一个 WiFi
- 确保项目正在运行（比如
pnpm dev在 3000 端口） - 在手机浏览器输入
http://192.168.x.x:3000（替换成你的实际 IP）
如果一切顺利，手机上就能看到你的项目了。你可以测试触摸手势、检查响应式布局、验证移动端的交互体验——不需要部署，不需要任何工具。
Next.js 的绑定地址
有些框架默认只监听 127.0.0.1（localhost），不接受局域网内其他设备的请求。如果手机访问不了，试试在启动命令里指定监听所有网络接口：
# Next.js
pnpm dev --hostname 0.0.0.0
# Vite
pnpm dev --host0.0.0.0 的意思是"接受来自任何网络接口的请求"，包括局域网。
防火墙：为什么手机还是打不开？
小明照做了，但手机上显示"无法连接"。
90% 的情况下，这是防火墙在拦截。
防火墙的作用是保护你的电脑不被局域网内的其他设备随意访问。它就像手机的"勿扰模式"——不是没有来电，是你主动屏蔽了。
当你运行 pnpm dev 时，Node.js 在 3000 端口监听请求。但防火墙可能没有允许外部设备访问这个端口，所以手机的请求被挡在了门外。
排查顺序：
- 确认手机和电脑在同一个 WiFi（听起来废话，但这是最常见的遗漏）
- 确认开发服务器监听了
0.0.0.0（见上面的 tip） - 检查防火墙设置——这是最后也是最常见的拦路虎
让 AI 帮你排查
防火墙配置因操作系统而异，手动操作容易出错。直接告诉 Claude Code：
"我的手机和电脑连着同一个 WiFi，但手机访问电脑的 IP 地址打不开。帮我排查防火墙设置，允许 Node.js 的 3000 端口通过。"
Claude Code 会根据你的操作系统生成对应的命令。
Windows 防火墙放行示例
# 允许 TCP 3000 端口入站
New-NetFirewallRule -DisplayName "Node.js Dev Server" -Direction Inbound -Protocol TCP -LocalPort 3000 -Action AllowmacOS 防火墙放行
macOS 的防火墙默认按应用管理。在"系统设置 → 网络 → 防火墙 → 选项"中，确保 Node.js 被允许接受传入连接。
用完记得恢复
真机调试完成后，建议关闭这条防火墙规则。开发端口长期暴露在局域网里不是好习惯。
广域网：不同 WiFi 就到不了
小明的手机调试搞定了。但他的朋友在另一个城市，连的是另一个 WiFi。局域网 IP 192.168.x.x 只在你自己的路由器内部有效，朋友的网络里根本找不到这个地址。
这就涉及到广域网（WAN）——也就是真正的互联网。
要让不同网络的人访问你的服务，你需要一个公网 IP。但普通家庭宽带通常没有独立的公网 IP。运营商用一种叫 NAT 的技术，让很多用户共享同一个公网 IP。
打个比方：公网 IP 像公寓楼的门牌号，外卖员只能送到楼下大门（运营商的公网 IP），不能直接送到你家门口（你的设备）。你的电脑藏在运营商的 NAT 后面，外部请求找不到它。
你可以验证这一点：在浏览器里搜索"我的 IP"，看到的公网 IP 和你用 ipconfig 查到的局域网 IP 完全不同。公网 IP 是运营商分配给你家路由器的（而且可能是多户共享的），局域网 IP 是路由器分配给你电脑的。
所以，想让互联网上的人访问你的项目，你需要把代码部署到一台有公网 IP 的服务器上。这就是第十二章要做的事。
网络三层总览
把前面讲的三个层级放在一起看：
┌─────────────────────────────────────────────┐
│ 广域网（WAN / 互联网） │
│ 不同城市、不同网络的设备 │
│ 需要公网 IP 才能互相访问 │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ 局域网（LAN / 同一个 WiFi） │ │
│ │ 同一路由器下的设备互通 │ │
│ │ IP 格式：192.168.x.x │ │
│ │ │ │
│ │ ┌────────────────────────────────┐ │ │
│ │ │ Localhost（回环 / 127.0.0.1） │ │ │
│ │ │ 只有设备自己能访问 │ │ │
│ │ └────────────────────────────────┘ │ │
│ └───────────────────────────────────────┘ │
└─────────────────────────────────────────────┘从内到外，可达范围越来越大，安全风险也越来越高。localhost 最安全（只有你自己），局域网次之（同一个 WiFi 下的人），广域网最开放（全世界）。
三条路：从"自己看"到"别人看"
小明现在理清了整个脉络。想让别人看到你的项目，有三条路，适用于不同场景：
1. 局域网直连
适用场景：自己在手机上测试，或者让坐在旁边的朋友看一眼。
条件：设备连着同一个 WiFi。
做法：手机浏览器输入电脑的局域网 IP + 端口。
局限：离开这个 WiFi 就访问不了。
2. 内网穿透
适用场景：朋友在另一个城市，你想让他临时看看效果，但不想走完整个部署流程。
做法：用工具在你的电脑和公网服务器之间建一条隧道，生成一个临时链接。
局限：链接每次变、你的电脑必须开着、速度不稳定。
下一节会详细讲怎么操作。
3. 正式部署
适用场景：让任何人随时都能访问你的产品。
做法：把代码部署到 Vercel、腾讯云等平台，获得一个稳定的公网地址。
前提：你需要先用 Git 管理代码（第十一章），然后才能部署（第十二章）。
三条路的对比：
| 方式 | 适用场景 | 需要什么 | 局限 |
|---|---|---|---|
| 局域网直连 | 自己真机测试 | 同一个 WiFi | 离开 WiFi 就断 |
| 内网穿透 | 给远方朋友临时看看 | 隧道工具 | 链接会变，电脑必须开着 |
| 正式部署 | 让所有人随时访问 | Git + 部署平台 | 需要学习更多概念 |
小明看着这三条路，心里有了数。他的朋友在另一个城市，局域网不通。正式部署又太重了——他只是想让朋友看一眼。
"有没有中间方案？"
"有。下一节教你内网穿透。"
上一节：序言