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