遇到即记之ngrok--免费HTTPS、本地开发调试、Webhook测试必备工具

优质文章学习记录

— 12 min read
遇到即记之ngrok--免费HTTPS、本地开发调试、Webhook测试必备工具

ngrok内网穿透工具详解

工具: ngrok - 内网穿透解决方案
用途: 将本地服务暴露到公网，实现临时公网访问
适用场景: 开发调试、Webhook测试、临时演示、移动端测试、HTTPS测试

📑 目录

📖 什么是ngrok？

ngrok 是一个反向隧道工具，它能够在你本地运行的服务器和公网之间建立一个安全的隧道。简单来说，它可以把你的 localhost:3000 变成一个可以通过互联网访问的网址，比如 https://abc123.ngrok.io。

核心概念

  • 本地服务: 运行在你电脑上的应用（如 http://localhost:3000）
  • ngrok客户端: 运行在你电脑上的程序，连接到ngrok服务器
  • ngrok服务器: ngrok提供的云端服务器，负责转发请求
  • 公网URL: ngrok分配给你的临时公网地址（如 https://xxx.ngrok.io）

总结: ngrok通过建立安全隧道，将本地服务映射到公网，让你无需购买服务器和配置域名，就能快速实现公网访问。特别适合开发测试场景。

🎯 核心功能

1. HTTP/HTTPS隧道 ⭐

自动HTTPS支持是ngrok的核心优势：

# 将本地3000端口暴露到公网（自动提供HTTP和HTTPS） ngrok http 3000

输出示例:

Forwarding http://abc123.ngrok.io -> http://localhost:3000 Forwarding https://abc123.ngrok.io -> http://localhost:3000

HTTPS特性:

  • ✅ 自动提供: 即使本地服务是HTTP，ngrok也会自动提供HTTPS访问
  • ✅ 免费SSL证书: 使用Let’s Encrypt证书，完全免费且自动续期
  • ✅ 浏览器信任: 所有主流浏览器都信任，无安全警告
  • ✅ 适用场景: 微信小程序、PWA、移动App、Webhook等需要HTTPS的场景

常用命令:

# 基本使用 ngrok http 3000# 只允许HTTPS（禁止HTTP） ngrok http 3000 --scheme=https # HTTPS + 基本认证 ngrok http 3000 --basic-auth="admin:password123"# 本地服务已使用HTTPS ngrok http https://localhost:3000

总结: HTTP/HTTPS隧道是ngrok最常用的功能，特别是自动HTTPS支持，让开发者无需配置SSL证书就能获得安全的HTTPS访问，这是ngrok相比其他工具的核心优势。

2. TCP隧道

支持任意TCP协议（如数据库、SSH等）：

# 暴露MySQL数据库（3306端口） ngrok tcp 3306

3. Web界面监控

ngrok提供本地Web界面（默认 http://127.0.0.1:4040），可以：

  • 查看所有HTTP请求和响应
  • 重放请求进行调试
  • 查看请求头、响应头、请求体等详细信息

4. 自定义域名（付费）

付费用户可以绑定自定义域名：

ngrok http 3000 --domain=myapp.example.com

总结: ngrok提供了HTTP/HTTPS隧道、TCP隧道、Web监控界面和自定义域名等功能，其中自动HTTPS支持是最突出的特性，让开发者能够快速获得安全的公网访问能力。

💡 使用场景

1. 本地开发调试

开发微信小程序、移动App时，需要调用本地API

ngrok http 3000# 将生成的 https://xxx.ngrok.io 配置到小程序/App中

2. Webhook开发测试

开发需要接收第三方回调的应用（如支付回调、GitHub Webhook）

ngrok http 5000# 配置Webhook URL: https://xxx.ngrok.io/webhook

3. 临时演示环境

快速给客户或同事演示本地开发的功能

ngrok http 3000# 直接分享 https://xxx.ngrok.io 给客户访问

4. PWA/权限API测试

PWA的Service Worker、浏览器摄像头/麦克风权限等需要HTTPS

ngrok http 3000# 使用 https://xxx.ngrok.io 访问应用

总结: ngrok主要适用于开发调试、Webhook测试、临时演示和需要HTTPS的场景。它能够快速解决本地服务无法被外部访问的问题，特别适合需要HTTPS但不想配置SSL证书的场景。

✅ 优点

  1. 简单易用: 一条命令即可使用，无需复杂配置
  2. 快速部署: 几秒钟就能将本地服务暴露到公网
  3. HTTPS支持 ⭐: 自动提供HTTPS，免费SSL证书，适合需要安全连接的场景
  4. 请求监控: 内置Web界面查看请求详情，方便调试
  5. 多协议支持: HTTP/HTTPS、TCP、WebSocket
  6. 跨平台: 支持Windows、macOS、Linux

总结: ngrok的最大优势是简单易用和自动HTTPS支持。一条命令就能将本地服务暴露到公网，并且自动提供免费的SSL证书，这对于需要HTTPS但不想配置证书的开发者来说非常方便。

❌ 缺点

  1. 免费版限制: URL随机变化、连接数限制、带宽限制、会话时长限制
  2. 性能问题: 流量经过ngrok服务器转发，有延迟，不适合高并发场景
  3. 安全性: 免费版URL公开，任何人都可以访问（除非设置认证）
  4. 依赖第三方: 依赖ngrok服务器可用性，不适合生产环境
  5. 成本: 高级功能需要付费

总结: ngrok虽然功能强大，但免费版有较多限制，不适合生产环境使用。主要问题是URL随机变化、性能受限和安全性考虑，因此仅建议用于开发测试环境。

🚀 安装和使用

Windows安装

方法1: 直接下载（推荐）
  1. 访问 ngrok官网
  2. 下载Windows版本（zip文件）
  3. 解压到任意目录（如 C:\ngrok）
  4. 将ngrok.exe所在目录添加到系统PATH环境变量
方法2: 使用包管理器
# 使用Chocolatey choco install ngrok # 或使用Scoop scoop install ngrok

注册和配置

  1. 注册账号: 访问 ngrok.com 注册免费账号
  2. 获取Authtoken: 登录后，在Dashboard中找到"Your Authtoken"

配置token:

ngrok config add-authtoken YOUR_AUTH_TOKEN

基本使用

# 暴露HTTP服务 ngrok http 3000# 只允许HTTPS ngrok http 3000 --scheme=https # HTTPS + 基本认证 ngrok http 3000 --basic-auth="admin:password123"# 暴露TCP服务 ngrok tcp 3306# 自定义域名（付费） ngrok http 3000 --domain=myapp.example.com

配置文件

创建配置文件 %USERPROFILE%\.ngrok2\ngrok.yml（Windows）:

version:"2"authtoken: YOUR_AUTH_TOKEN tunnels:web:addr:3000proto: http schemes:[https]# 只允许HTTPSapi:addr:8080proto: http auth:"admin:password123"

使用配置文件启动：

ngrok start web

总结: ngrok的安装和使用非常简单，只需注册账号、配置token，然后一条命令就能启动。配置文件方式适合需要管理多个隧道的场景，可以预先定义好各种配置。

💻 代码开发中的应用

前端开发

// .env.developmentVITE_API_BASE_URL=https://abc123.ngrok.io/api // 在代码中使用const response =awaitfetch(`${import.meta.env.VITE_API_BASE_URL}/users`)

微信小程序开发（必须HTTPS）

// app.jsconstAPI_BASE_URL='https://abc123.ngrok.io/api'// 必须使用HTTPS wx.request({url:`${API_BASE_URL}/user/info`,method:'GET',success:(res)=>{ console.log(res.data)}})

Webhook开发

// server.jsconst express =require('express')const app =express() app.use(express.json()) app.post('/webhook',(req, res)=>{ console.log('收到Webhook:', req.body) res.json({success:true})}) app.listen(3000,()=>{ console.log('服务器运行在 http://localhost:3000') console.log('使用 ngrok http 3000 暴露到公网') console.log('配置Webhook URL: https://xxx.ngrok.io/webhook')})

获取ngrok URL的API

// 自动获取ngrok HTTPS URLasyncfunctiongetNgrokUrl(){try{const response =awaitfetch('http://127.0.0.1:4040/api/tunnels')const data =await response.json()// 获取HTTPS URLconst httpsTunnel = data.tunnels.find(t=> t.proto ==='https')return httpsTunnel?.public_url ||null}catch(error){ console.error('无法获取ngrok URL:', error)returnnull}}

总结: ngrok在代码开发中的应用非常广泛，特别是在需要HTTPS的场景下。无论是前端开发、微信小程序、Webhook开发，ngrok都能提供便捷的HTTPS访问能力，大大简化了开发流程。

🔒 安全注意事项

  1. 敏感数据保护:
    • ❌ 不要暴露包含敏感数据的服务
    • ❌ 不要在生产环境使用免费版ngrok
    • ✅ 仅用于开发、测试、演示环境
  2. URL保密: 不要将ngrok URL提交到代码仓库
  3. 监控日志: 定期检查ngrok Web界面的请求日志

认证保护: 强烈建议设置认证

ngrok http 3000 --basic-auth="username:password"

总结: 使用ngrok时一定要注意安全，特别是免费版URL是公开的。建议设置认证保护，不要暴露敏感数据，仅用于开发测试环境，并定期检查访问日志。

🆚 与其他工具对比

特性ngrokfrplocaltunnel
易用性⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
免费HTTPS✅❌✅
Web监控界面✅❌❌
配置复杂度低中低

选择建议:

  • 快速临时使用: ngrok、localtunnel
  • 需要自定义域名: ngrok（付费）、frp（自建）
  • 需要完全控制: frp（自建服务器）

总结: ngrok在易用性和免费HTTPS方面有明显优势，适合快速临时使用。如果需要更多控制或自定义域名，可以考虑frp等自建方案。

📝 常见问题

Q1: ngrok免费版URL会变化吗？

A: 是的，免费版每次启动都会生成新的随机URL。如果需要固定URL，需要付费订阅。

Q2: ngrok可以用于生产环境吗？

A: 不推荐。ngrok适合开发测试环境。生产环境应该使用云服务器 + 域名 + SSL证书。

Q3: ngrok的HTTPS证书是免费的吗？

A: 是的，ngrok使用Let’s Encrypt签发的免费SSL证书，免费版也完全支持HTTPS。

Q4: 本地服务是HTTP，ngrok能提供HTTPS吗？

A: 完全可以！这是ngrok的核心功能。即使本地服务是 http://localhost:3000，ngrok也会自动提供 https://xxx.ngrok.io 访问。

Q5: 如何只允许HTTPS访问，禁止HTTP？

A: 使用 --scheme=https 参数：

ngrok http 3000 --scheme=https

Q6: ngrok支持WebSocket吗？

A: 是的，ngrok完全支持WebSocket协议。

Q7: 如何查看ngrok的请求日志？

A: 访问 http://127.0.0.1:4040 可以查看所有请求和响应的详细信息。

Q8: ngrok连接断开怎么办？

A: 检查网络连接，重新启动ngrok：ngrok http 3000

总结: 常见问题主要集中在URL变化、HTTPS支持、生产环境使用等方面。记住ngrok是开发工具，免费版HTTPS是核心优势，但不适合生产环境。

🎓 最佳实践

  1. 团队协作: 使用ngrok快速分享本地开发进度
  2. 调试技巧: 使用ngrok Web界面（4040端口）查看请求详情
  3. 成本优化: 开发环境使用免费版即可

开发工作流:

# 1. 启动本地服务npm run dev # 2. 在另一个终端启动ngrok ngrok http 3000# 3. 复制HTTPS URL到配置文件# 4. 开始开发测试

总结: 最佳实践包括建立规范的开发工作流、利用ngrok进行团队协作、使用Web界面进行调试，以及合理选择免费版或付费版。关键是理解ngrok的定位，将其作为开发工具而非生产解决方案。

📚 总结

核心要点

ngrok是一个简单易用的内网穿透工具，通过建立安全隧道将本地服务暴露到公网。它的核心优势是自动HTTPS支持，无需配置SSL证书就能获得安全的HTTPS访问。

适用场景总结

✅ 强烈推荐使用的场景:

  1. 本地开发调试 - 特别是需要外部访问的场景（如移动App、小程序开发）
  2. Webhook开发测试 - 接收第三方回调（支付、GitHub等）
  3. 临时演示环境 - 快速给客户或同事演示功能
  4. 需要HTTPS的场景 - 微信小程序、PWA、浏览器权限API等必须HTTPS的场景
  5. 移动端测试 - 在手机上测试本地开发的Web应用

❌ 不推荐使用的场景:

  1. 生产环境 - 不适合长期使用，应该使用专业的部署方案
  2. 高并发场景 - 性能受限，不适合高流量应用
  3. 敏感数据服务 - 免费版URL公开，安全性不足
  4. 需要固定域名 - 免费版URL随机变化，需要付费才能固定

核心优势

  1. 零配置HTTPS - 自动提供免费SSL证书，这是ngrok最大的优势
  2. 简单易用 - 一条命令即可使用，无需复杂配置
  3. 快速部署 - 几秒钟就能将本地服务暴露到公网
  4. 请求监控 - 内置Web界面，方便调试和排查问题

使用建议

  1. 开发阶段: 使用免费版即可，充分利用自动HTTPS功能
  2. 安全防护: 设置基本认证，不要暴露敏感数据
  3. 生产环境: 使用云服务器 + 域名 + SSL证书的专业方案
  4. 团队协作: 利用ngrok快速分享开发进度，提高协作效率

关键提醒

ngrok是开发工具，不是生产解决方案。
在开发阶段使用ngrok可以大大提高效率，特别是需要HTTPS的场景。
但生产环境应该使用专业的部署方案，确保稳定性和安全性。

快速开始

# 1. 注册账号并配置token ngrok config add-authtoken YOUR_AUTH_TOKEN # 2. 启动本地服务npm run dev # 运行在 localhost:3000# 3. 启动ngrok（自动提供HTTPS） ngrok http 3000# 4. 使用生成的 https://xxx.ngrok.io 访问服务

记住: ngrok的核心价值在于快速、简单、自动HTTPS，让开发者能够专注于业务开发，而不用为网络配置和SSL证书烦恼。正确理解和使用ngrok，可以大大提高开发效率！

🔗 相关资源

最后更新: 2026-01-27
文档版本: 2.0（精简版）

Read more

宏智树AI：ChatGPT学术版驱动，重塑学术写作新生态

宏智树AI：ChatGPT学术版驱动，重塑学术写作新生态

在学术研究的赛道上，低效的文献梳理、繁琐的数据处理、严苛的学术规范，常让科研工作者与高校师生陷入创作困境。宏智树AI（官网：www.hzsxueshu.com），一款由ChatGPT学术版模型深度驱动、搭载AI5.0技术架构的专业学术智能解决方案平台，专为论文写作场景量身打造，以“全流程覆盖、高精准赋能、强合规保障”为核心，构建从大纲生成到定稿答辩的一站式学术服务体系，让学术创作告别低效内耗，回归研究本质。 一、顶尖技术底座：AI5.0+ChatGPT学术版，定义智能学术新高度 宏智树AI的核心竞争力，源于业内领先的双重技术赋能，打破传统学术工具的性能边界，实现从“文字生成”到“学术赋能”的跨越式升级。 ChatGPT学术版模型赋予平台精准的语义理解与逻辑推理能力，深度契合文、理、工、医等全学科学术写作范式，杜绝口语化、散文化表达，让文本兼具严谨性与可读性；AI5.0技术架构则实现多模态数据原生一体化处理，将文本、数据、图表、公式等学术元素深度融合，
保姆级教程：从零搭建你的第一个AI Agent

保姆级教程：从零搭建你的第一个AI Agent

保姆级教程：从零搭建你的第一个 AI Agent（附完整可运行代码） 手把手教你，用 Python 在 2 小时内构建一个能自主规划、调用工具、完成任务的 AI Agent 预计完成时间： 2 小时 所需技能： 基础 Python、会用命令行 适合人群： 想入门 AI Agent 开发的同学，不限工作年限 前言：为什么 2026 年你必须懂 Agent？ 如果说 2024 年是大模型的元年，那 2026 年就是 AI Agent 的爆发年。 现在的 AI 已经不只是"聊天机器人"了——它开始接管我们的
Harness Engineering工程化教程（非常详细），AI Agent复杂长任务从入门到精通，收藏这一篇就够了！

Harness Engineering工程化教程（非常详细），AI Agent复杂长任务从入门到精通，收藏这一篇就够了！

Views are my own. “Yet Another Chapter”，Generated by Google Lyria OpenAI 的一个团队在五个月内用 Codex 写了一百万行代码，三个工程师平均每天合并 3.5 个 PR，没有一行代码是工程师手写的。Anthropic 的 Claude Code 能连续工作数天构建完整应用。LangChain 的 Coding Agent 在 Terminal Bench 2.0 上从 52.8% 跃升至 66.5%，却只改了 harness，模型没动。 随着 Coding Agent 能力过去一段时间的突飞猛进，软件工程师的工作变了：从“

终极Notion风格编辑器：AI智能写作的完整指南

终极Notion风格编辑器：AI智能写作的完整指南 【免费下载链接】novelNotion-style WYSIWYG editor with AI-powered autocompletion. 项目地址: https://gitcode.com/gh_mirrors/no/novel Novel是一个开源的Notion风格所见即所得编辑器，具有AI驱动的自动补全功能。这款编辑器专为现代写作体验设计，将Notion的优雅界面与人工智能的强大能力完美结合，让写作变得更加高效和智能。无论您是内容创作者、开发者还是普通用户，Novel都能为您提供前所未有的写作体验。 🚀 什么是Notion风格编辑器？ Notion风格编辑器以其简洁直观的界面和强大的块编辑功能而闻名。Novel编辑器继承了这些优点，同时加入了AI智能写作功能，让您能够： * 快速创建各种内容块（文本、列表、标题等） * 享受流畅的拖放操作体验 * 使用AI辅助完成写作任务 Notion风格编辑器的直观界面展示 ✨ 核心功能特性 AI智能写作辅助 Novel最引人注目的功能就是AI驱动的自动补全