5 分钟学会 Ngrok：让你的本地服务秒变公网可访问

Nemo尼莫
672 阅读9分钟

一、Ngrok介绍

在日常开发中，我们经常会遇到这样的场景：

  • 我在本地运行了一个 Web 服务（比如 http://localhost:3000），但是外部服务（如 GitHub Webhook、支付平台回调）却无法访问。
  • 我想临时把一个功能演示给远程同事或客户看，却又不想费力部署到云服务器。
  • 我需要快速共享一个开发环境，但又没有公网 IP 或路由器端口映射权限。

这时候，Ngrok 就派上用场了。

1. 什么是 Ngrok

Ngrok 是一款轻量级的 本地端口映射 / 内网穿透工具。它的核心能力是：
把你本地正在运行的服务（如 http://localhost:3000）通过一个安全的公网地址暴露出去。这样一来，外部世界就能直接访问你的本地服务，而不需要你去购买服务器、配置防火墙、或修改复杂的路由规则。

2. 为什么需要 Ngrok

  • 本地服务默认是“孤岛” ：除非你手动部署，否则外部无法访问 localhost。
  • 公网 IP 获取不易：在多数办公网络或家庭宽带环境中，你无法直接申请一个公网 IP，更别提路由器端口转发的麻烦。
  • 开发调试效率：当你在开发 Webhook 回调功能时，如果没有一个外部可访问的入口，就只能不停写 log、手动 mock 数据，非常低效。

Ngrok 解决的就是这些痛点，它相当于为你“搭了一座桥”，让外部服务能临时、安全地连到本地。

3. 常见应用场景

  1. 调试第三方 Webhook
    例如 GitHub 的 push 事件、支付平台的支付回调。借助 Ngrok，你可以直接在本地接收这些请求，实时查看数据，不必部署到线上环境。
  2. 远程演示功能
    你在本地写了一个 Demo 或者正在测试的新页面，可以通过 Ngrok 一键生成一个公网链接，发给同事或客户，他们就能直接访问。
  3. 临时搭建本地 Demo 环境
    有时候，你需要快速展示一个功能原型，却不想专门买云服务器。Ngrok 能让你“随开随用”，本地环境秒变公网可访问站点。

4. 与传统方法对比的优势

  • 无需复杂配置：传统方法通常需要公网 IP + 服务器 + Nginx + SSL 配置，而 Ngrok 只要一行命令即可完成。
  • 自带 HTTPS 支持：Ngrok 自动给你分配安全的 HTTPS 地址，不必自己去申请和维护证书。
  • 调试友好：它自带请求日志和可重放功能，比起线上服务器，调试体验更好。
  • 安全隔离：相比直接暴露路由器端口，Ngrok 的临时隧道更可控、更安全，适合开发阶段使用。

二、安装与准备

在使用 Ngrok 之前，我们需要先完成账号注册、下载安装以及环境绑定。这几个步骤都比较简单，我会配合截图一步步说明。

1. 注册账号

1.1 邮箱注册或第三方账号登录

进入 Ngrok 官网，点击右上角 Log in。

你可以选择用邮箱注册，也可以直接使用第三方账号（如 GitHub、Google）快速登录。
图片

这里我选择 GitHub 登录，一步到位：
图片

1.2 创建并确认账号

登录完成后，系统会提示确认创建账号。
图片

1.3 开启二步验证

为了保证账号安全，Ngrok 要求绑定一个 Authenticator App（如 Google Authenticator、Authy 等）。
图片

输入绑定后的验证码即可：
图片

1.4 保存恢复码

系统会提供一组恢复码，以防手机丢失或无法使用验证器时登录受阻。
一定要保存好这些恢复码！
图片

1.5 选择使用用途

接下来，Ngrok 会询问你的使用场景，比如是个人学习、团队协作还是企业开发。这个步骤不会影响后续使用，随意选择即可。
图片

到这里，你的 Ngrok 账号就准备好了，可以正式使用。
图片

2. 下载与安装

Ngrok 提供了多平台安装方式：

  • Windows 用户可以直接在 Microsoft Store 搜索并安装，非常方便。
    图片
  • macOS / Linux 用户可以去官网下载二进制文件，或者使用 brew、apt、yum 等包管理工具安装。

3. 绑定环境与账号

安装完成后，需要将本地环境和刚才注册的账号绑定。

3.1 获取 Authtoken

在 Ngrok 控制台（Dashboard）里复制你的 Authtoken：
图片

3.2 绑定方式

  • 命令行绑定（推荐）

    ngrok config add-authtoken <你的_authtoken>

    图片执行后 Ngrok 会自动在你的配置文件中写入凭据，后续就能直接使用。

  • 手动修改配置文件
    如果你习惯手动管理配置，也可以直接编辑 ~/.config/ngrok/ngrok.yml 文件，把 token 粘贴进去。

完成以上步骤后，你的本地环境就和 Ngrok 账号绑定好了，可以正式开始使用。

三、基本用法

完成安装和账号绑定后，我们就可以正式体验 Ngrok 的端口映射功能了。以下演示以本地运行的 3000 端口（常见于 Next.js、React 等项目）为例。

1. 启动本地服务

首先在本地运行你的项目，这里我启动的是一个 Next.js 应用，它默认监听在 http://localhost:3000。

图片

此时服务只能在本机访问，外部网络是无法直接访问的。

2. 使用 Ngrok 映射端口

接下来，我们使用 Ngrok 将本地的 3000 端口映射到公网。

在终端输入命令：

ngrok http 3000

运行后，你会看到 Ngrok 输出的隧道信息，包括一个临时分配的 HTTP 地址 和一个 HTTPS 地址。

图片

这里的 Forwarding 一栏就表示：

  • 外部访问 https://xxxx.ngrok-free.app
  • 内部会被转发到 http://localhost:3000

3. 访问映射地址

在 Ngrok 的输出中，你会看到一个按钮 Visit Site，或者直接复制分配的公网地址到浏览器中访问。

图片

此时，你的本地站点就已经可以通过公网地址被访问了。无论是给远程同事演示，还是让第三方服务回调 Webhook，这个地址都可以直接使用。

至此，我们已经完成了 Ngrok 的最基础用法：将本地端口快速映射到公网。

四、进阶技巧

掌握了 Ngrok 的基本端口映射之后，我们还可以进一步挖掘它的高级功能。在实际开发中，调试面板和多端口/TCP 映射都是非常常用的技巧。

1. 请求日志与调试面板

Ngrok 在运行时会自动开启一个本地调试面板，地址是：

http://127.0.0.1:4040

这个面板相当于一个内置的“抓包工具”，能完整记录所有经过 Ngrok 隧道的请求和响应，非常适合调试与排错。

主要用途包括：

  • Webhook 调试
    例如 Stripe 或 GitHub 的 Webhook 回调会 POST 一段 JSON 到你的接口。你无需在代码里到处加 console.log，直接在面板就能看到请求的完整内容。
    更方便的是，如果代码修复后想再次测试，你只要在面板点一下 Replay，就能重放这次请求，而不用重复触发支付或 push 操作。
  • API 调试
    当你的本地 API 暴露给外网调用时，可以在面板查看所有调用记录，方便对比不同参数下的响应结果。
  • 问题定位
    如果外部访问报错（比如返回 500），调试面板能直接显示请求与响应的原始数据，帮助你快速找出问题所在。

图片

2. 多端口 / TCP 映射

除了常见的 HTTP 服务，Ngrok 还可以映射多个端口，甚至支持 TCP 协议。这在多服务开发或临时协作中非常实用。

2.1 临时单次映射（命令行方式）

最简单的方法是开多个终端，分别运行映射命令：

# 终端 A：Next.js 本地 3000
ngrok http 3000

# 终端 B：Vite/Storybook 本地 5173
ngrok http 5173

# 终端 C：PostgreSQL 本地 5432
ngrok tcp 5432

# 终端 D：SSH 本地 22
ngrok tcp 22

这种方式适合快速演示或一次性调试，但不方便长期管理。

2.2 写配置文件一次管理多个隧道

更推荐的方式是通过配置文件统一管理。这样你只要一个命令，就能同时开启多个隧道。

  1. 编辑配置文件（首次会自动创建）：
ngrok config edit

2. 在配置文件中添加多个隧道（YAML 格式）：

version: 3
authtoken:YOUR_AUTHTOKEN
region:ap   # 指定地区（如 ap 表示亚洲区域）

tunnels:
web:
    proto:http
    addr:3000
    # domain: your-name.ngrok.app   # 付费用户可保留固定域名
    # basic_auth:                   # 可以给预览地址加认证保护
    #   - 'user:pass'
    # host_header: rewrite          # 如果后端依赖 Host，可重写

vite:
    proto:http
    addr:5173

storybook:
    proto:http
    addr:6006

db:
    proto:tcp
    addr:5432

ssh:
    proto:tcp
    addr:22

3. 启动服务：

# 启动所有隧道
ngrok start --all

# 或者只启部分隧道
ngrok start web vite

# 查看状态（也可以直接访问本地面板）
ngrok status

这种方式特别适合同时开发前端（3000/5173）、设计系统 Storybook（6006）、以及需要外部连接数据库或 SSH 的场景。

五、总结

通过前面的步骤，我们已经完整体验了 Ngrok 的使用流程：

  • 它能把本地服务快速映射到公网；
  • 还能借助调试面板查看请求详情、重放 Webhook；
  • 甚至可以一次性管理多个 HTTP / TCP 服务。

对于开发者来说，Ngrok 最大的价值就在于  “快速”  和  “便捷” 。不需要额外配置服务器、不需要公网 IP，一行命令就能把本地项目展示给全世界。

不过在实际使用时，也需要注意以下几点：

  • 免费版限制
    免费用户的隧道有一定时长限制（长时间会断开，需要重新启动），并且每次启动生成的公网地址都不固定。如果你需要长期稳定的地址，可以考虑付费版本，支持保留自定义域名或固定 TCP 端口。
  • 安全提示
    Ngrok 会把本地服务暴露到公网，这意味着任何人都可能访问到。如果你的服务里包含敏感接口或管理后台，一定要加上认证保护，或者仅限调试阶段临时使用。不要把 Ngrok 当作正式的生产入口，否则可能带来严重的安全风险。
avatar
文章
阅读
粉丝