利用ngrok实现内网穿透手把手教你的详细教程：从原理到实操步骤、及可能问题原因

在进行微信公众号、小程序开发，或是处理第三方支付接口回调等功能时，如何将本地服务轻松暴露到公网？ngrok 作为一款强大的内网穿透工具，能够帮你快速实现这一目标。当然如果你是普通国内小白用户，也可以使用nat123内网映射外网方式。

一、引言

在当今的网络环境中，我们常常会遇到需要将本地服务暴露到公网的需求。比如在进行微信公众号、小程序开发，或者处理第三方支付接口回调等功能时，往往需要配置 webhook，而本地开发环境通常处于内网，外部网络无法直接访问。这时，内网穿透技术就派上了用场。ngrok 作为一款强大的内网穿透工具，能够帮助我们轻松实现这一目标。

二、内网穿透概念定义

内网穿透，也即 NAT 穿透，进行 NAT 穿透是为了使具有某一个特定源 IP 地址和源端口号的数据包不被 NAT 设备屏蔽而正确路由到内网主机。简单来说，就是通过一定的技术手段，让位于内网（局域网）的设备能够被公网（互联网）上的设备所访问，实现内外网之间的互联互通。

三、内网穿透原理

内网穿透的实现原理主要涉及到 NAT（网络地址转换）技术和第三方服务或软件的辅助。NAT 技术将内部网络的私有 IP 地址转换为公网上的公共 IP 地址，从而隐藏了内部网络的真实结构。然而，这也导致外部网络无法直接访问内部网络中的设备或服务。为了解决这个问题，内网穿透技术通过特定的中间设备及协议，如使用具有公网 IP 的中转服务器，来建立内外网之间的通信隧道。

具体过程如下：

    两个需要通过内网穿透进行通讯的内网客户端，分别将自己的外网收发接口注册给一个具有公网 ip 的中转服务器。

    中转服务器将两个客户端注册的收发接口分别告知给对端。

    一个内网客户端使自己的接收端口作为源地址，向对端的发送端口发送一个 udp 数据包，这个数据包称为打洞包。发送过这个打洞包后，可以在这个内网的出口路由器上产生一条 nat 记录，令后续从对端发送端口发来的数据包都不被丢弃，而是转发给相应的内网客户端的指定端口。

    发送过打洞包后，对端发送至本端路由器指定接收端口的数据包，就会根据 nat 记录转发至本端的内网服务器接收端口，从而实现了内网服务器接收外网数据包的功能。另一个内网服务器同样执行上述步骤，即可实现两端内网服务器相互收发数据的功能。

四、应用场景

内网穿透技术在多种场景下都有广泛的应用，包括但不限于以下几种情况：

    远程办公：员工可以通过内网穿透技术安全地访问公司内部的资源，如文件服务器、内部网站等，即使他们身处外部网络。

    开发与测试：开发者可以使用内网穿透技术将本地开发环境暴露给团队成员或测试人员，便于协作和测试。这对于前端开发尤为有用，因为它允许开发人员在本地开发并实时展示给远程的同事或客户。

    个人项目：个人开发者或爱好者可以通过内网穿透技术将个人项目如博客、网站或游戏服务器等发布到互联网上，便于分享和展示。

    智能家居：用户可以通过内网穿透技术远程访问和控制家中的智能设备，如智能摄像头、智能门锁等。

五、ngrok 介绍概述

ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。它可捕获和分析所有通道上的流量，便于后期分析和重放。ngrok 支持多种协议，包括常见的 HTTP、HTTPS 以及 TCP 协议等，这意味着无论是 Web 服务、SSH 服务还是其他基于 TCP 协议的服务，都能通过 ngrok 实现内网穿透。

六、ngrok内网穿透特点

    使用方便：操作相对简单，适合入门，免费使用（需求少的话就不需要购买它的付费服务）。

    支持多协议：能满足不同类型服务的内网穿透需求。

    数据监控：可捕获和分析所有通道上的流量，便于后期分析和重放。

七、内网穿透使用原因

作为一个 Web 开发者，有时候会需要临时地将一个本地的 Web 网站部署到外网，以供他人体验评价或协助调试等等。通常开发者会这么做：

    找到一台运行于外网的 Web 服务器。
    服务器上有网站所需要的环境，否则自行搭建。
    将网站部署到服务器上。
    调试结束后，再将网站从服务器上删除。

而使用 ngrok，只需在本地开发环境中运行 ngrok，将本地服务暴露到公网，就能便捷地进行测试，大大节省了部署和测试的时间，无需复杂的网络改造和申请公网 IP 地址。

八、使用 ngrok 实现内网穿透步骤

1、注册 ngrok 账号

访问 ngrok 官方网站（HTTPS://ngrok.com/）。

可以使用 GitHub 或者 Google 账号进行登录。完成注册并登录之后，可以看到 Dashboard 中给出了使用的三个步骤。

2、下载 ngrok 客户端

进入官网的下载页面（HTTPS:\/\/http://ngrok.com/download），官方清晰地给出了各个系统的安装方法。

个人推荐直接下载 ZIP 包，然后直接解压，这种方式最为迅速。根据自己的操作系统选择对应的软件，例如 Windows 系统选择 Windows 的安装包。

3、配置账户

    获取 Authtoken：登录 Ngrok 控制台后，在个人设置或相关页面中找到 “Authtoken”。这是一个用于验证身份的密钥，Ngrok 通过它识别用户身份，确保合法使用服务。复制该 “Authtoken”，后续配置 Ngrok 时会用到。

配置 Authtoken：打开命令提示符（CMD），切换到 Ngrok 解压后的目录，例如输入 “cd C:
ngrok”。然后执行命令 ：

ngrok authtoken 2Yh...（Your Authtoken）

将方括号替换为实际的 Authtoken。执行此命令后，Ngrok 会将 Authtoken 保存到本地配置文件中，以便后续使用时自动验证身份。

4、启动内网穿透

假设本地运行了一个 Web 服务，监听在 8080 端口，现在要通过 Ngrok 将其暴露到公网。在命令提示符中执行 :

ngrok HTTP 8080

执行该命令后，Ngrok 会与 Ngrok 服务器建立连接，并为本地的 8080 端口生成一个公网访问地址，类似 “HTTPS://xxxx.ngrok-free.app”（xxxx 为随机生成的字符串）。

此时，任何人通过这个公网地址就可以访问本地运行在 8080 端口的服务。

进入后就可以看到你写的后端内容了。

5、其他常用命令与配置

    指定子域名：如果希望使用自定义的子域名，可在启动命令中添加参数。例如，要使用 “myweb” 作为子域名，执行：

ngrok HTTP -subdomain = myweb 8080

    这样生成的公网地址将是 “HTTPS://myweb.ngrok.io”，方便记忆和识别。但需要注意，自定义子域名可能需要一定权限或付费服务，具体可查看 Ngrok 官方文档。

    监听 TCP 端口：若本地运行的是 TCP 服务，如 SSH 服务（默认 22 端口），可使用 “ngrok tcp 22” 命令。Ngrok 会为 TCP 服务生成一个公网地址，格式为 “tcp://0.tcp.ngrok.io:xxxx”（xxxx 为随机分配的端口号），通过这个地址和端口即可在外网访问本地的 TCP 服务。

    查看状态与日志：在 Ngrok 运行过程中，可通过访问 “HTTP://127.0.0.1:4040” 在浏览器中查看 Ngrok 的状态和日志信息。这里可以看到请求记录、连接状态等，方便调试和排查问题。例如，如果发现某个请求失败，可以查看日志了解具体原因，如网络问题、服务未正常响应等。

九、注意事项

    不要泄露 Authtoken：若泄露请及时清除和更换。

    关闭服务：关闭黑色框框，或者在黑色框框那里 Ctrl + C 停止服务，用完一定要关服务，否则别人可以访问，不安全。

    静态固定域名的配置：每次启动服务，这个域名是随机分配的，不利于我们持续访问，因此需要进行静态域名的配置。点击 Domains，选择 Create Domain，免费的服务就只能创建一个固定域名了。网站会分配给我们一个静态域名，复制那行命令，粘贴到黑色框框中即可。

    网络区域指定：有时候可能会报 “Session Status reconnecting (failed to send authentication request: EOF)”，自己指定一下区域就可以正常启动内网穿透服务了，可指定的区域有：us（美国，默认区域）、eu（欧洲）、ap（亚太地区）、au（澳大利亚）、sa（南美洲）、jp（日本）、in（印度） 。

    数据库连接限制：使用免费账户时，若想使用 ngrok 用 tcp 来连接数据库，会有如下限制 “You must add a credit or debit card before you can use TCP endpoints on a free account. We require a valid card as a way to combat abuse and keep the internet a safe place. This card will NOT be charged”，此时可以考虑使用 coplar 来进行数据库连接，coplar 的命令跟 ngrok 差不多，并且 coplar 还提供了 webui，操作更简单。

十、ngrok 路由器内网穿透没启动？

如果遇到 ngrok 路由器内网穿透没启动的情况，我们需要从多个方面进行排查和解决。

1、 检查 ngrok 配置

    确认 Authtoken 有效性：ngrok 需要通过 Authtoken 来验证用户身份。前往 ngrok 官网，登录账号后在个人控制面板获取 Authtoken。确保在 ngrok 配置文件（一般为 ngrok.yml）中正确填写了该 Authtoken。如果填写错误或 Authtoken 过期，ngrok 将无法正常启动。例如，在配置文件中，Authtoken 的配置格式如下：

authtoken: <你复制的 Authtoken>

若此处填写有误，需及时更正。
- 检查隧道配置：如果在 ngrok.yml 中配置了自定义隧道，要检查隧道配置是否正确。比如，配置了一个 HTTP 隧道，将本地 8080 端口映射到公网，配置内容可能如下：

tunnels:
  myapp:
    proto: HTTP
    addr: 8080

确保 addr 字段填写的是本地实际运行服务的端口，proto 字段选择了正确的协议（如 HTTP、tcp 等）。若配置错误，ngrok 可能无法启动或无法按预期转发请求。

2、 排查网络环境问题

- 网络连接状况：首先检查本地网络连接是否正常。可以尝试访问其他网站或在线服务，若无法访问，说明本地网络存在问题。此时，需要排查路由器、网络线缆等设备是否正常工作。若本地网络正常，再考虑 ngrok 服务器的连接问题。由于 ngrok 服务器位于公网，可能会受到网络波动、防火墙等因素影响。可以使用 ping 命令尝试 ping ngrok 服务器地址（如 http://ngrok.io），查看是否能 ping 通。如果无法 ping 通，可能是网络被限制或服务器出现故障。

- 防火墙设置：本地防火墙或安全软件可能会阻止 ngrok 与服务器的连接。检查防火墙规则，确保允许 ngrok.exe 程序通过网络访问。以 Windows 系统为例，需在防火墙设置中添加 ngrok 程序为允许通过的应用。具体操作是打开控制面板中的防火墙设置，在 “允许应用或功能通过 Windows 防火墙” 中，点击 “更改设置”，然后找到 ngrok 程序并勾选允许其通过。若网络中有路由器等设备，还需检查路由器的端口转发

设置是否正确。若路由器设置了错误的端口转发规则，会导致外部请求无法正确到达本地的 Web 服务。

3、 检查路由器设置

- 端口转发配置：虽然 ngrok 本身会建立隧道实现内网穿透，但在某些复杂网络环境下，可能仍需要路由器进行端口转发配合。登录路由器管理界面（一般在浏览器中输入路由器的 IP 地址，如 192.168.1.1，然后输入用户名和密码）。找到 “端口转发” 或 “虚拟服务器” 相关设置选项。假设本地服务运行在 8080 端口，要将其映射到公网，需要在路由器中添加一条端口转发规则，将公网的某个端口（如 8080）映射到本地设备的 IP 地址和 8080 端口。不同品牌和型号的路由器设置界面可能有所不同，但大致原理相同。例如，在 TP - Link 路由器中，在端口转发设置页面，添加新规则，填写服务名称（可自定义），外部端口和内部端口都填写 8080，IP 地址填写运行 ngrok 的本地设备的内网 IP 地址。

- DMZ 主机

设置（可选）：如果端口转发设置后仍无法正常工作，可以尝试设置 DMZ 主机。在路由器管理界面找到 “DMZ” 选项，将运行 ngrok 的本地设备的内网 IP 地址设置为 DMZ 主机。这样，该设备将完全暴露在公网下，所有发往该公网 IP 的数据包都会被转发到该设备。但需要注意的是，设置 DMZ 主机可能会带来一定的安全风险，因为设备直接暴露在公网下，更容易受到网络攻击。所以，在使用完毕后，建议及时关闭 DMZ 主机设置。

4、 更新 ngrok 版本：旧版本的 ngrok 可能存在一些已知问题或兼容性问题。前往 ngrok 官网下载最新版本的 ngrok 安装包，然后解压覆盖原有的 ngrok 文件。更新完成后，再次尝试启动 ngrok，看是否能解决问题。新的版本通常会修复一些漏洞，提升稳定性和兼容性。

十一、使用 ngrok 内网穿透后无法访问？

当使用 ngrok 进行内网穿透后无法访问时，可尝试以下解决方法：

    关闭 webpack - dev - server 的 WebSocket 支持：由于 ngrok 已经提供了 WebSocket 支持，可以尝试禁用 vue - cli 生成的 webpack - dev - server 中的 WebSocket 支持。在 vue 项目的 vue.config.js 文件中添加以下配置：

module.exports = {
  devServer: {
    hot: false,
    liveReload: false
  }
}

这样可以禁用掉 webpack - dev - server 的 WebSocket 支持，让 ngrok 的 WebSocket 支持生效。

其他可能的解决方案：确保 ngrok 客户端的版本是最新的，可以尝试更新 ngrok 客户端；检查防火墙和路由器设置，确保 ngrok 的流量被允许通过；尝试使用其他内网穿透工具，如 frp 或 serveo。

十二、ngrok 实现内网穿透 window 下，vue 项目 invalid host header 报错

当在 window 下使用 ngrok 实现内网穿透，vue 项目出现 invalid host header 报错时，可按以下方法解决：

原本常规做法是在 vue.config.js 文件中添加 disableHostCheck: true，但该属性可能已被弃用，需要换一种写法。将其替换为 historyApiFallback: true，allowedHosts: “all”，重新配置 vue.config.js 如下：

devServer: {
  historyApiFallback: true,
  allowedHosts: “all”
}

最后重新启动项目 npm run serve，打开链接，即可显示出项目。

十三、Windows 使用 ngrok 内网穿透报错 ERR_NGROK_108

在 Windows 系统使用 ngrok 内网穿透报错 ERR_NGROK_108 时，错误信息通常如下：

ERROR:  authentication failed: Your account is limited to 1 simultaneous ngrok agent session.
ERROR:  You can run multiple tunnels on a single agent session using a configuration file.
ERROR:  To learn more, see HTTPS://ngrok.com/docs/ngrok-agent/config/
ERROR:
ERROR:  Active ngrok agent sessions in region 『jp』:
ERROR:    - ts_2QApyToXna5zWnlVxJXYkBNKZ0Y (125.85.75.150)
ERROR:
ERROR:  ERR_NGROK_108

解决方法是打开错误信息中给出的网址，跳转官网后会给出不同操作系统的默认文件位置。对于 Windows 系统，访问：

%HOMEPATH%AppDataLocalngrokngrok.yml

编辑这个 yml 文件，将 version 改为 2 保存，再次打开 ngrok，输入命令：ngrok HTTP 你服务端口，问题即可解决。

十四、总结

通过本文的详细介绍，我们了解了内网穿透的概念、原理和应用场景，以及 ngrok 这款强大的内网穿透工具。利用 ngrok 实现内网穿透的步骤相对简单，只需注册账号、下载客户端、配置账户并启动内网穿透即可。同时，我们也介绍了使用过程中的注意事项和常见问题的解决方法。

ngrok 为我们在开发测试、远程办公等场景下提供了便捷的内网穿透解决方案，能够帮助我们轻松地将本地服务暴露到公网，提高工作效率和协作效果。希望本文能够帮助你顺利地使用 ngrok 实现内网穿透。因为ngrok官网在海外，如果你是国内使用，且需要快速简便使用内网穿透的，在综合操作稳定和成本控制下，也可以考虑使用nat123端口映射方法，使用更简单。