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

主题

第十章：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 或传统的云服务器上，你会获得一个公共域名。用户通过域名即可访问应用，无需关心底层代码。

部署详解

如何选择部署平台（国内 vs 海外）、配置自定义域名、处理备案问题、申请 HTTPS 证书等详细内容，将在第十三章《生产环境部署与域名配置》中讲解。

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

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

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

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

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

域名与 DNS 基础 ​

老师傅给你解释了一个你一直没想通的问题：为什么输入 facebook.com 就能访问到网站，而不是一串数字 IP 地址？

DNS（域名系统） 就像是互联网的电话簿：

你输入: facebook.com
    ↓
DNS 查询: 这个域名对应的 IP 是多少？
    ↓
返回: 31.13.65.36
    ↓
浏览器连接到这个 IP

没有 DNS，你得记住每个网站的 IP 地址（比如 104.16.86.122）。DNS 让你只需要记住人类友好的域名。

后续详解

域名购买、DNS 解析配置（A 记录/CNAME 记录）、HTTPS 证书申请等详细操作，将在第十三章《生产环境部署与域名配置》中讲解。

HTTPS 加密基础 ​

老师傅强调了另一个重要概念：HTTP vs HTTPS。

协议传输方式安全性浏览器显示
HTTP明文传输易被窃听⚠️ "不安全"
HTTPS加密传输安全可靠🔒 锁图标

为什么需要 HTTPS？

  • 防止窃听：HTTP 传输的数据是明文，公共 WiFi 下容易被截获密码
  • 防止篡改：确保用户收到的内容没有被中间人修改
  • 信任标识：浏览器对 HTTP 网站显示"不安全"警告

现代托管平台（Vercel、Netlify、Cloudflare Pages）默认提供 HTTPS。使用自己的服务器时，需要申请 SSL 证书（Let's Encrypt 提供免费证书）。

安全就像洋葱 ​

老师傅用了一个你可能听过的比喻：安全就像洋葱，是一层一层的。

最里面那层是 Localhost——只有你自己能碰到的代码。这就像你在自己家里写日记，门锁着，窗户关着，就算写得再烂、再有漏洞，外人也看不到。这是最安全的开发环境。

中间那层是 局域网——你打开了家门，让同一栋楼里的朋友进来坐坐。这时候要注意了：你信任这些朋友，但还是要知道谁在你家。演示完后记得"关门"（恢复防火墙设置）。

最外面那层是 公网——你把东西放到了广场上，任何人都能走过来看。这时候你必须加密（HTTPS），必须验明正身（身份验证），绝对不能把保险箱钥匙也放在广场上。

内网穿透呢？就像是在你家墙上临时凿了个洞，让外面的朋友能看一眼。洞凿完了记得补上，别把洞开着过夜。

弄懂了这些，你不再执着于发 localhost 的链接。当你准备好把应用正式发布给全世界时，第十三章将带你完成域名购买、DNS 配置、HTTPS 证书申请等上线必备步骤。而现在，你转身投入到了 Git 深入的学习中——因为在发布之前，首先要解决的是代码的安全管理与版本同步。

分享场景决策速查表

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

内网穿透安全警告

使用内网穿透时：

  • ⚠️ 告诉 AI 添加密码保护，限制访问 IP
  • ⚠️ 演示完成后立即关闭隧道
  • ⚠️ 不要传输敏感数据（密码、Token）
  • ⚠️ 不要暴露管理后台

本章无正文

本章为概念引导章节，所有内容已在序言中呈现。如需深入了解域名配置、DNS 解析、HTTPS 证书申请等实操内容，请参阅第十三章《生产环境部署与域名配置》。

上一章：第九章：功能测试流程与自动化脚本

下一章：第十一章：Git 版本控制与跨平台协作