第十章：Localhost 与公网访问 ​

序言 ​

你看着电脑上完美的网页，想让朋友惊叹一下。你自信地把浏览器地址栏里的 http://localhost:3000 复制发给了微信上的朋友。 一分钟后，朋友回了你一个问号：“打不开啊，什么情况？”

那一刻，你脸红到了耳根。你终于明白了本地环境和互联网的区别。

网络层级 ​

为了解决这个问题，老师傅从 IP 地址的可达性 角度，为你划分了三个网络层级：

• 本地回环 (Localhost / 127.0.0.1)： localhost 在计算机网络中被称为回环地址，它永远指向发出请求的设备本身。 当你把这个链接发给朋友时，他的浏览器会尝试访问他自己的电脑。因为他的电脑上并没有运行你的 Next.js 服务，所以浏览器会直接报错“拒绝连接”。这是一个物理隔离的单机环境。
• 局域网 (LAN / Intranet)： 这是由你的路由器构建的内部网络。虽然外部互联网无法直接访问，但连接在同一个 WiFi/网线下的设备（如手机、平板）之间是互通的。 全栈开发的一个重要环节是真机调试。你不需要每次都部署到公网，只需要让手机访问你电脑的局域网 IP，就能立刻在真机上测试触摸手势和响应式布局。
  • 查看 IP：
    • Windows: 在终端输入 ipconfig
    • macOS: 在终端输入 ifconfig 或在系统设置中查看
    • Linux: 输入 ip addr 或 ip a（推荐），或 ifconfig（需安装 net-tools） 找到 192.168.x.x 或 10.x.x.x 格式的地址。
  • 访问测试：在手机浏览器输入 http://192.168.x.x:3000。
  • Troubleshooting：如果无法访问，90% 的情况是因为你的电脑防火墙拦截了入站连接。暂时关闭防火墙或允许 Node.js 通信通常能解决问题。
• 广域网 (WAN / Internet)： 这才是真正的互联网。想要让不同网络环境下的用户（比如住在隔壁城市的朋友）访问你的网页，你需要一个公网 IP。通常情况下，这需要你将代码部署到拥有公网 IP 的云服务器或托管平台上。

分享 ​

你意识到，Localhost 只是开发的起点。想要打破物理隔离，让别人看到或参与你的项目，你需要根据目标受众建立不同的通道：

场景一：面向用户交付 (Deployment) 如果你希望朋友或用户直接使用你的产品，你需要进行应用部署。 通过将代码构建（Build）并发布到 Vercel、腾讯云 EdgeOne 或传统的云服务器上，你会获得一个公共域名（如 https://my-app.com）。用户通过域名即可访问应用，无需关心底层代码。

场景二：面向开发者协作 (Git) 如果你希望朋友参与开发，或者请高手帮你 Review 代码，你需要进行代码同步。 通过将源代码推送到 GitHub、Gitee 等代码托管平台，协作者可以将代码拉取（Pull）到他们自己的电脑上。此时，他们在自己的 Localhost 环境运行项目，从而实现跨设备的协同开发。

场景三：快速演示与测试 在开发阶段，你可能需要快速给外地朋友看看效果，但又不想正式部署，这时内网穿透工具就派上用场了。

老师傅告诉你，内网穿透的本质是在你的本地电脑和公网之间打一条隧道。外部用户访问一个临时地址，流量会通过这条隧道转发到你本地电脑上。

这种方式的优点是快速、无需部署。缺点也很明显：地址会变、速度不稳定、你的电脑必须一直开着。它适合开发阶段的快速演示，但不适合作为长期的访问方式。

如果你希望产品稳定地被所有人访问，就需要正式的部署方案。

弄懂了这些，你不再执着于发 localhost 的链接，而是转身投入到了 Git 深入的学习中——因为在把应用发布给全世界之前，首先要解决的是代码的安全管理与版本同步。