⚠️ Alpha内测版本警告：此为早期内部构建版本，尚不完整且可能存在错误，欢迎大家提Issue反馈问题或建议
Vibe Vibe

主题

!09-localhost-public-access_index.png (../../public/images/Advanced/09-localhost-public-access_index.png)

第九章：Localhost 与公网访问 ​

序言 ​

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

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

网络层级 ​

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

  • 本地回环 (Localhost / 127.0.0.1)： localhost 在计算机网络中被称为回环地址，它永远指向发出请求的设备本身。 当你把这个链接发给朋友时，他的浏览器会尝试访问他自己的电脑。因为他的电脑上并没有运行你的 Next.js 服务，所以浏览器会直接报错“拒绝连接”。这是一个物理隔离的单机环境。
  • 局域网 (LAN / Intranet)： 这是由你的路由器构建的内部网络。虽然外部互联网无法直接访问，但连接在同一个 WiFi/网线下的设备（如手机、平板）之间是互通的。 全栈开发的一个重要环节是真机调试。你不需要每次都部署到公网，只需要让手机访问你电脑的局域网 IP，就能立刻在真机上测试触摸手势和响应式布局。
    • 查看 IP：在终端输入 ipconfig (Windows) 或 ifconfig (Mac/Linux)，找到 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 深入的学习中——因为在把应用发布给全世界之前，首先要解决的是代码的安全管理与版本同步。

网络安全最佳实践

三层防御模型：

  1. Localhost：仅限本机，物理隔离，最安全
  2. 局域网：同网络设备可访问，需要防火墙控制
  3. 公网：任何人可访问，需要严格的身份验证和加密

关键原则：

  • ✅ 开发环境用 localhost
  • ✅ 测试环境用局域网 + 身份验证
  • ✅ 生产环境用 HTTPS + 强密码
  • ❌ 永远不要在内网穿透时暴露敏感数据

分享场景决策速查表

目标受众推荐方案工具成本时长
自己（多设备）局域网访问-免费临时
朋友演示内网穿透ngrok/cpolar免费几小时
用户使用应用部署Vercel/云服务器付费长期
开发者协作代码托管GitHub免费长期

内网穿透安全警告

使用内网穿透时：

  • ⚠️ 添加密码保护：ngrok http 3000 --auth="user:pass"
  • ⚠️ 限制访问 IP：ngrok http 3000 --cidr-allow=203.0.113.0/24
  • ⚠️ 演示完成后立即关闭
  • ⚠️ 不要传输敏感数据（密码、Token）
  • ⚠️ 不要暴露管理后台