---
title: "10.2 内网穿透：临时让朋友看看"
description: "用隧道工具生成临时公网链接，让远方的朋友访问你的本地项目"
---

# 10.2 内网穿透：临时让朋友看看

> **本节目标**：理解内网穿透的原理，用 Cloudflare Tunnel 生成一个临时公网链接，发给朋友。

## 为什么需要内网穿透

小明的朋友在另一个城市，局域网不通。正式部署又需要 Git、平台配置、域名——他只是想让朋友看一眼评分功能的效果。

老师傅说："有个临时方案——内网穿透。不需要部署，不需要域名，一行命令就能生成一个公网链接。"

## 隧道是怎么工作的

内网穿透的本质是在你的电脑和一个公网服务器之间建一条**隧道**。

<TunnelFlow />

朋友访问的是公网服务器上的临时地址，公网服务器把请求转发到你的电脑，再把你电脑的响应传回给朋友。整个过程中，朋友不需要知道你的 IP 地址，你也不需要有公网 IP。

一个生活化的类比：微信视频通话。你和朋友不在同一个网络，但微信的服务器帮你们中转音视频数据。内网穿透类似，只不过中转的是网页请求。

关键区别在于：隧道是你主动建立的。你的电脑向公网服务器发起连接（出站），而不是公网服务器来找你（入站）。因为出站连接不受 NAT 和防火墙限制，所以隧道能绕过"家庭宽带没有公网 IP"的问题。

## Cloudflare Tunnel（推荐）

Cloudflare Tunnel 是目前最简单的方案：免费、不需要注册、不限流量。

### 安装

告诉 Claude Code：

> "帮我安装 cloudflared 命令行工具。"

或者手动安装：

::: code-group

```bash [Windows]
winget install cloudflare.cloudflared
```

```bash [macOS]
brew install cloudflared
```

```bash [Linux (Debian/Ubuntu)]
curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb -o cloudflared.deb
sudo dpkg -i cloudflared.deb
```

:::

### 启动隧道

确保你的项目正在本地运行（比如 `pnpm dev` 在 3000 端口），然后**另开一个终端**：

```bash
cloudflared tunnel --url http://localhost:3000
```

终端会输出一个临时链接：

```
https://random-words-here.trycloudflare.com
```

把这个链接发给朋友，他就能看到你的项目了。

::: tip 链接每次都不一样
免费模式下，每次启动 cloudflared 会生成一个新的随机链接。关闭终端（Ctrl+C）后链接立即失效。这是设计如此——临时方案就该有临时的样子。
:::

### 让 AI 一步到位

如果你不想记命令，直接告诉 Claude Code：

> "帮我用 Cloudflare Tunnel 把本地 3000 端口暴露到公网，生成一个临时链接发给朋友。"

Claude Code 会检查 cloudflared 是否已安装，没装就帮你装，然后启动隧道。

### 常见问题

**链接生成了但朋友打不开？** 确认你的开发服务器确实在运行。cloudflared 只是转发请求，如果本地服务没启动，朋友看到的就是错误页面。

**终端显示连接错误？** 检查端口号是否正确。如果你的项目跑在 5173（Vite 默认端口）而不是 3000，命令应该是 `cloudflared tunnel --url http://localhost:5173`。

**速度很慢？** 这是正常的。请求要从朋友的设备到 Cloudflare 服务器，再到你的电脑，再原路返回。延迟取决于你和 Cloudflare 服务器之间的网络质量。如果在国内且速度不可接受，考虑用 cpolar。

## 备选方案

Cloudflare Tunnel 在大多数场景下够用。如果你有特殊需求，还有两个备选：

**ngrok**：老牌工具，需要注册免费账号。优势是自带一个 Web 调试面板（`http://localhost:4040`），可以查看所有经过隧道的请求和响应，排查问题时很方便。免费版有连接数限制，访问时会显示 ngrok 的警告页面。官网：[ngrok.com](https://ngrok.com)

**cpolar**：国内服务，如果你和朋友都在国内，速度会比 Cloudflare 和 ngrok 快不少。需要注册账号。官网：[cpolar.com](https://www.cpolar.com)

| 工具 | 是否需要注册 | 国内速度 | 特色 |
|------|------------|---------|------|
| Cloudflare Tunnel | 不需要 | 一般 | 最简单，免费无限制 |
| ngrok | 需要 | 一般 | 调试面板好用 |
| cpolar | 需要 | 快 | 国内优化 |

选哪个？如果没有特殊需求，用 Cloudflare Tunnel。如果需要调试面板，用 ngrok。如果在国内且速度是瓶颈，用 cpolar。

::: tip 不需要每个都学
三个工具的核心操作几乎一样：安装 → 一行命令启动 → 拿到链接 → 发给朋友。选一个用熟就行。如果你不确定，就用 Cloudflare Tunnel——零注册、零配置、免费无限制。
:::

## 安全注意事项

隧道打开的那一刻，你的电脑就暂时暴露在了公网上。虽然只是临时的，但有几件事必须注意：

**用完立即关闭**。Ctrl+C 关掉 cloudflared 进程，隧道就断了。不要开着隧道过夜，不要开着隧道出门。

**不要暴露不该暴露的端口**。隧道只应该指向你的 Web 应用端口（比如 3000）。数据库端口（5432、3306）、管理后台、调试工具——这些绝对不能通过隧道暴露。

**确保认证已启用**。如果你的项目有登录功能（第八章的成果），确保认证是开着的。不要因为"只是给朋友看看"就临时关掉登录——隧道链接是公开的，任何拿到链接的人都能访问。

**不要通过隧道传输敏感数据**。隧道适合演示 UI 和功能，不适合处理真实的用户数据或密码。

::: warning 一句话原则
隧道是临时凿在墙上的洞。朋友看完了，立刻把洞补上。
:::

### 安全检查清单

在打开隧道之前，快速过一遍：

- [ ] 项目的登录功能是否已启用（第八章的成果）
- [ ] `.env` 文件是否包含敏感信息（API 密钥、数据库密码）——这些不会通过隧道泄露，但确认一下总没错
- [ ] 隧道只指向 Web 应用端口，没有暴露其他服务
- [ ] 演示完成后会立即关闭隧道

## 从临时到正式

小明把链接发给了朋友，朋友终于看到了评分功能。"挺酷的！"朋友说。

但小明很快发现了问题：

- 每次重启 cloudflared，链接就变了，得重新发给朋友
- 他的电脑必须一直开着，合上笔记本盖子朋友就断了
- 朋友说有时候加载很慢，体验不稳定
- 他想让更多人看到，但不可能给每个人都发一次链接

这些不是 bug，是内网穿透的天然局限。它本来就是临时方案——你的电脑不是服务器，你的家庭网络不是数据中心。

想让产品稳定地被所有人访问，你需要**正式部署**：把代码放到专业的服务器上，让它 24 小时运行，有稳定的地址，有足够的带宽。

但在部署之前，你需要先解决一个前提问题：代码管理。你的代码现在只存在于你的电脑上，部署平台怎么拿到它？答案是 **Git**——下一章的主题。

小明的路线图逐渐清晰了：

1. **Git**（第十一章）：把代码推到 GitHub，让部署平台能拉取你的代码
2. **部署**（第十二章）：把代码部署到 Vercel 等平台，获得稳定的公网地址
3. **域名和 HTTPS**（第十三章）：配置自定义域名，启用加密连接

每一步都建立在前一步的基础上。内网穿透让小明验证了"朋友觉得这个功能有意思"，接下来就是把它变成一个真正的产品。

---

::: tip 本章回顾
- localhost 是回环地址，每个设备的 localhost 指向自己
- 同一个 WiFi 下的设备可以通过局域网 IP 互相访问
- 防火墙可能阻止局域网内的访问，需要放行对应端口
- 内网穿透通过公网服务器中转请求，生成临时链接
- 内网穿透是临时方案，正式上线需要部署（第十二章）
:::

---

**上一节**：[10.1 从 Localhost 到互联网](./01-network-layers.md)

**下一章**：[第十一章：Git 版本控制与跨平台协作](../11-git-collaboration/index.md)