通过Ngrok实现内网穿透助力远程开发

在现代软件开发和网络应用的环境下，开发人员常常需要在本地搭建服务器进行调试、测试或演示。然而，传统的端口映射（如使用 NAT 或 SSH 隧道）配置繁琐，且并非所有环境都允许直接暴露本地服务。ngrok 作为一款强大的隧道工具，能够简化这一过程，它允许开发者快速、安全地将本地服务器映射到公网，从而实现外部访问。本文将通过详细的步骤和示例，帮助开发者快速掌握 ngrok，提高本地开发和远程调试的效率，使其能够更便捷地连接本地与互联网。

1. 安装 ngrok

Windows:

访问 ngrok官网下载 Windows 版本的压缩包。

解压缩下载的文件，并将 ngrok.exe 放置在你希望的文件夹内。

macOS:

brew install ngrok

Linux:

# 先下载 ngrok 适合你系统的版本
wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip
# 解压
unzip ngrok-stable-linux-amd64.zip
# 将 ngrok 移动到系统 PATH 路径下
sudo mv ngrok /usr/local/bin

2. 注册并配置 ngrok

在 ngrok官网注册一个账户。
登录后，你会在控制面板中看到一个 AuthToken（授权令牌）。
使用以下命令将授权令牌配置到 ngrok：

ngrok authtoken <your_auth_token>

3. 启动 ngrok

双击 Ngrok.exe 启动，弹出命令行界面如下：

假设你的本地服务器正在监听端口 8080，你可以使用以下命令启动 ngrok：

ngrok http 8080

ngrok 会在控制台中显示一个类似以下的输出：

ngrok by @inconshreveable                                                                                                                                                                                                                                                                                                                                                               (Ctrl+C to quit)Session Status                online
Session Expires               1 hour, 0 minutes
Version                       3.x.x
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://<random_subdomain>.ngrok.io -> localhost:8080

你可以通过 http://random_subdomain.ngrok.io 访问你本地的 8080 端口。

4. 配置其他端口和协议

ngrok 不仅支持 HTTP，还支持多种协议，如 TCP 等。你可以用不同的命令启动对应的隧道。

TCP 隧道：

ngrok tcp 22

这将暴露本地的 22 端口（例如用于 SSH）。

自定义子域名（需要 ngrok 的付费计划）：

ngrok http -subdomain=your_custom_subdomain 8080

这将使用你选择的 your_custom_subdomain.ngrok.io 来访问。

5. 查看 ngrok 的 Web 面板

ngrok 会启动一个本地的 Web 面板（默认是 http://127.0.0.1:4040），你可以在该面板中查看请求日志、请求详情、重新播放请求等。

6. 停止 ngrok

可以通过按 Ctrl+C 来停止 ngrok，这会终止当前的隧道连接。

7. 访问 ngrok 开放端口下的接口

在前端直接访问通过 Ngrok 发布到公网的接口时，会被中间页拦截。

需要在请求头里增加 "ngrok-skip-browser-warning":"69420"，来跳过拦截页面。

例如：

fetch(url, {method: "get",headers: new Headers({"ngrok-skip-browser-warning": "69420",}),}).then((response) => response.json()).then((data) => console.log(data)).catch((err) => console.log(err));

8. Ngrok 内网穿透总结

ngrok 作为一款轻量级的网络隧道工具，为开发者提供了一种高效、便捷的方式，将本地服务安全地暴露到公网。无论是在 Web 开发、API 调试、Webhook 集成还是远程访问场景下，ngrok 都展现出了极大的灵活性和实用性。通过简单的命令，开发者即可创建安全的公网访问链接，并配合 ngrok 提供的 Web 控制台进行流量监控和请求管理。

尽管 ngrok 提供了强大的功能，但在使用过程中仍需注意安全性，避免将敏感数据暴露到外部网络。同时，对于有更复杂需求的用户，ngrok 付费版本支持自定义子域名、IP 白名单等高级功能，可满足企业级应用的需求。

总体而言，ngrok 是开发人员值得掌握的一款实用工具。它不仅提高了本地开发环境的可访问性，也简化了调试流程，使开发者能够更专注于应用的功能开发。未来，随着远程开发需求的增加，ngrok 及类似工具将在更多场景中发挥重要作用，为开发者带来更高效的工作方式。