在软件开发过程中我们经常会遇到以下场景1. 第三方回调调试开发支付接口、微信开放平台或 Webhook 时服务商要求提供一个公网可访问的 HTTPS 域名。2. 移动端实机测试手机与电脑不在同一局域网下需要直接测试本地 API。3. 临时演示展示向客户或同事展示本地刚开发好的前端/后端 Demo无需打包部署到云服务器。Ngrok 是一款轻量级、跨平台的反向代理工具它可以建立一条安全的隧道Tunnel将公网流量安全地转发到你的本地端口完美解决上述痛点。二、Ngrok 工作原理简析Ngrok 的核心架构采用 **客户端-服务端C/S模式**[ 外网用户/第三方回调 ]│▼[ Ngrok 云端转发节点 ]│ (安全加密隧道)▼[ 本地 Ngrok 客户端 ]│▼[ 本地 Web 服务 (如 localhost:8080) ]1. 在本地运行 Ngrok 客户端并建立与 Ngrok 云端服务器的持久长连接。2. Ngrok 为你分配一个随机或自定义的公网 URL。3. 当外部请求访问该公网 URL 时流量会被封装并穿透 NAT/防火墙安全送达你的本地服务。三、Ngrok 快速上手指南1. 注册账号与获取 AuthToken1. 访问 Ngrok 官方网站注册免费账号。2. 进入控制台Dashboard在 **Your Authtoken** 页面复制你的专属身份验证令牌。2. 下载并安装客户端根据你的操作系统选择对应的版本解压Windows解压得到 ngrok.exe。macOS推荐通过 Homebrew 安装bashbrew install ngrok/ngrok/ngrokLinux使用官方软件包或二进制解压即可。3. 配置身份凭证打开终端或命令行工具运行以下命令绑定你的账号bashngrok config add-authtoken 你的AuthToken四、核心应用场景演练场景一暴露本地 HTTP Web 服务假设你的本地 Web 服务运行在 8080 端口如 Spring Boot、Vue、Node.js 项目bashngrok http 8080**运行效果**终端会输出如下控制面板信息textSession Status onlineAccount YourName (Plan: Free)Forwarding https://xxxx-xx-xx.ngrok-free.app - http://localhost:8080此时访问 [https://xxxx-xx-xx.ngrok-free.app](https://xxxx-xx-xx.ngrok-free.app) 即可直接访问你本地的 localhost:8080 服务场景二带 Header 重写的代理适用于微服务/网关如果本地服务对 Host 请求头有校验可以使用 --host-header 参数bashngrok http --host-headerrewrite 8080五、高级技巧与调试利器1. 本地请求监控面板 (Web Inspection)Ngrok 启动后默认会在本地开启一个强大的调试面板[http://127.0.0.1:4040](http://127.0.0.1:4040)。功能解析你可以实时查看传入的 HTTP 请求头、请求体、响应状态码甚至可以点击 **Replay** 按钮重新发送某个请求在调试 Webhook 回调时极其高效。2. 避免配置文件泄露注意不要将包含 authtoken 的配置文件提交到 Git 等公开仓库中。配置文件默认路径* Windows: %HOMEPATH%\AppData\Local\ngrok\ngrok.yml* Linux/macOS: ~/.config/ngrok/ngrok.yml 使用 Ngrok 快速搭建本地开发测试环境
在软件开发过程中我们经常会遇到以下场景1. 第三方回调调试开发支付接口、微信开放平台或 Webhook 时服务商要求提供一个公网可访问的 HTTPS 域名。2. 移动端实机测试手机与电脑不在同一局域网下需要直接测试本地 API。3. 临时演示展示向客户或同事展示本地刚开发好的前端/后端 Demo无需打包部署到云服务器。Ngrok 是一款轻量级、跨平台的反向代理工具它可以建立一条安全的隧道Tunnel将公网流量安全地转发到你的本地端口完美解决上述痛点。二、Ngrok 工作原理简析Ngrok 的核心架构采用 **客户端-服务端C/S模式**[ 外网用户/第三方回调 ]│▼[ Ngrok 云端转发节点 ]│ (安全加密隧道)▼[ 本地 Ngrok 客户端 ]│▼[ 本地 Web 服务 (如 localhost:8080) ]1. 在本地运行 Ngrok 客户端并建立与 Ngrok 云端服务器的持久长连接。2. Ngrok 为你分配一个随机或自定义的公网 URL。3. 当外部请求访问该公网 URL 时流量会被封装并穿透 NAT/防火墙安全送达你的本地服务。三、Ngrok 快速上手指南1. 注册账号与获取 AuthToken1. 访问 Ngrok 官方网站注册免费账号。2. 进入控制台Dashboard在 **Your Authtoken** 页面复制你的专属身份验证令牌。2. 下载并安装客户端根据你的操作系统选择对应的版本解压Windows解压得到 ngrok.exe。macOS推荐通过 Homebrew 安装bashbrew install ngrok/ngrok/ngrokLinux使用官方软件包或二进制解压即可。3. 配置身份凭证打开终端或命令行工具运行以下命令绑定你的账号bashngrok config add-authtoken 你的AuthToken四、核心应用场景演练场景一暴露本地 HTTP Web 服务假设你的本地 Web 服务运行在 8080 端口如 Spring Boot、Vue、Node.js 项目bashngrok http 8080**运行效果**终端会输出如下控制面板信息textSession Status onlineAccount YourName (Plan: Free)Forwarding https://xxxx-xx-xx.ngrok-free.app - http://localhost:8080此时访问 [https://xxxx-xx-xx.ngrok-free.app](https://xxxx-xx-xx.ngrok-free.app) 即可直接访问你本地的 localhost:8080 服务场景二带 Header 重写的代理适用于微服务/网关如果本地服务对 Host 请求头有校验可以使用 --host-header 参数bashngrok http --host-headerrewrite 8080五、高级技巧与调试利器1. 本地请求监控面板 (Web Inspection)Ngrok 启动后默认会在本地开启一个强大的调试面板[http://127.0.0.1:4040](http://127.0.0.1:4040)。功能解析你可以实时查看传入的 HTTP 请求头、请求体、响应状态码甚至可以点击 **Replay** 按钮重新发送某个请求在调试 Webhook 回调时极其高效。2. 避免配置文件泄露注意不要将包含 authtoken 的配置文件提交到 Git 等公开仓库中。配置文件默认路径* Windows: %HOMEPATH%\AppData\Local\ngrok\ngrok.yml* Linux/macOS: ~/.config/ngrok/ngrok.yml