通过Ngrok实现内网穿透助力远程开发
在现代软件开发和网络应用的环境下，开发人员常常需要在本地搭建服务器进行调试、测试或演示。然而，传统的端口映射（如使用 NAT 或 SSH 隧道）配置繁琐，且并非所有环境都允许直接暴露本地服务。ngrok 作为一款强大的隧道工具，能够简化这一过程，它允许开发者快速、安全地将本地服务器映射到公网，从而实现外部访问。 本文将通过详细的步骤和示例，帮助开发者快速掌握 ngrok，提高本地开发和远程调试的效率，使其能够更便捷地连接本地与互联网。
1. 安装 ngrok
Windows:
访问 ngrok官网 下载 Windows 版本的压缩包。
解压缩下载的文件，并将 ngrok.exe 放置在你希望的文件夹内。
macOS:
brew install ngrokLinux:
# 先下载 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/bin2. 注册并配置 ngrok
- 在 ngrok官网 注册一个账户。
- 登录后，你会在控制面板中看到一个
AuthToken（授权令牌）。 - 使用以下命令将授权令牌配置到
ngrok：
ngrok authtoken <your_auth_token>
3. 启动 ngrok
双击 Ngrok.exe 启动，弹出命令行界面如下：
假设你的本地服务器正在监听端口 8080，你可以使用以下命令启动 ngrok：
ngrok http 8080ngrok 会在控制台中显示一个类似以下的输出：
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 及类似工具将在更多场景中发挥重要作用，为开发者带来更高效的工作方式。