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 证书的场景。
✅ 优点
- 简单易用: 一条命令即可使用,无需复杂配置
- 快速部署: 几秒钟就能将本地服务暴露到公网
- HTTPS 支持 ⭐: 自动提供 HTTPS,免费 SSL 证书,适合需要安全连接的场景
- 请求监控: 内置 Web 界面查看请求详情,方便调试
- 多协议支持: HTTP/HTTPS、TCP、WebSocket
- 跨平台: 支持 Windows、macOS、Linux
总结: ngrok 的最大优势是简单易用和自动 HTTPS 支持。一条命令就能将本地服务暴露到公网,并且自动提供免费的 SSL 证书,这对于需要 HTTPS 但不想配置证书的开发者来说非常方便。
❌ 缺点
- 免费版限制: URL 随机变化、连接数限制、带宽限制、会话时长限制
- 性能问题: 流量经过 ngrok 服务器转发,有延迟,不适合高并发场景
- 安全性: 免费版 URL 公开,任何人都可以访问(除非设置认证)
- 依赖第三方: 依赖 ngrok 服务器可用性,不适合生产环境
- 成本: 高级功能需要付费
总结: ngrok 虽然功能强大,但免费版有较多限制,不适合生产环境使用。主要问题是 URL 随机变化、性能受限和安全性考虑,因此仅建议用于开发测试环境。
🚀 安装和使用
Windows 安装
方法 1: 直接下载(推荐)
- 访问 ngrok 官网
- 下载 Windows 版本(zip 文件)
- 解压到任意目录(如
C:\ngrok) - 将 ngrok.exe 所在目录添加到系统 PATH 环境变量
方法 2: 使用包管理器
# 使用 Chocolatey
choco install ngrok
# 或使用 Scoop
scoop install ngrok
注册和配置
- 注册账号: 访问 ngrok.com 注册免费账号
- 获取 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: 3000
proto: http
schemes:
- https
api:
addr: 8080
proto: http
auth: "admin:password123"
使用配置文件启动:
ngrok start web
总结: ngrok 的安装和使用非常简单,只需注册账号、配置 token,然后一条命令就能启动。配置文件方式适合需要管理多个隧道的场景,可以预先定义好各种配置。
💻 代码开发中的应用
前端开发
// .env.development
VITE_API_BASE_URL=https://abc123.ngrok.io/api
// 在代码中使用
const response = await fetch(`${import.meta.env.VITE_API_BASE_URL}/users`);
微信小程序开发(必须 HTTPS)
// app.js
const API_BASE_URL = 'https://abc123.ngrok.io/api';
wx.request({
url: `${API_BASE_URL}/user/info`,
method: 'GET',
success: (res) => {
console.log(res.data);
}
});
Webhook 开发
// server.js
const 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 URL
async function getNgrokUrl() {
try {
const response = await fetch('http://127.0.0.1:4040/api/tunnels');
const data = await response.json();
// 获取 HTTPS URL
const httpsTunnel = data.tunnels.find(t => t.proto === 'https');
return httpsTunnel?.public_url || null;
} catch (error) {
console.error('无法获取 ngrok URL:', error);
return null;
}
}
总结: ngrok 在代码开发中的应用非常广泛,特别是在需要 HTTPS 的场景下。无论是前端开发、微信小程序、Webhook 开发,ngrok 都能提供便捷的 HTTPS 访问能力,大大简化了开发流程。
🔒 安全注意事项
- 敏感数据保护:
- ❌ 不要暴露包含敏感数据的服务
- ❌ 不要在生产环境使用免费版 ngrok
- ✅ 仅用于开发、测试、演示环境
- URL 保密: 不要将 ngrok URL 提交到代码仓库
- 监控日志: 定期检查 ngrok Web 界面的请求日志
认证保护: 强烈建议设置认证
ngrok http 3000 --basic-auth="username:password"
总结: 使用 ngrok 时一定要注意安全,特别是免费版 URL 是公开的。建议设置认证保护,不要暴露敏感数据,仅用于开发测试环境,并定期检查访问日志。
🆚 与其他工具对比
| 特性 | ngrok | frp | localtunnel |
|---|---|---|---|
| 易用性 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ |
| 免费 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 是核心优势,但不适合生产环境。
🎓 最佳实践
- 团队协作: 使用 ngrok 快速分享本地开发进度
- 调试技巧: 使用 ngrok Web 界面(4040 端口)查看请求详情
- 成本优化: 开发环境使用免费版即可
开发工作流:
# 1. 启动本地服务
npm run dev
# 2. 在另一个终端启动 ngrok
ngrok http 3000
# 3. 复制 HTTPS URL 到配置文件
# 4. 开始开发测试
总结: 最佳实践包括建立规范的开发工作流、利用 ngrok 进行团队协作、使用 Web 界面进行调试,以及合理选择免费版或付费版。关键是理解 ngrok 的定位,将其作为开发工具而非生产解决方案。
📚 总结
核心要点
ngrok 是一个简单易用的内网穿透工具,通过建立安全隧道将本地服务暴露到公网。它的核心优势是自动 HTTPS 支持,无需配置 SSL 证书就能获得安全的 HTTPS 访问。
适用场景总结
✅ 强烈推荐使用的场景:
- 本地开发调试 - 特别是需要外部访问的场景(如移动 App、小程序开发)
- Webhook 开发测试 - 接收第三方回调(支付、GitHub 等)
- 临时演示环境 - 快速给客户或同事演示功能
- 需要 HTTPS 的场景 - 微信小程序、PWA、浏览器权限 API 等必须 HTTPS 的场景
- 移动端测试 - 在手机上测试本地开发的 Web 应用
❌ 不推荐使用的场景:
- 生产环境 - 不适合长期使用,应该使用专业的部署方案
- 高并发场景 - 性能受限,不适合高流量应用
- 敏感数据服务 - 免费版 URL 公开,安全性不足
- 需要固定域名 - 免费版 URL 随机变化,需要付费才能固定
核心优势
- 零配置 HTTPS - 自动提供免费 SSL 证书,这是 ngrok 最大的优势
- 简单易用 - 一条命令即可使用,无需复杂配置
- 快速部署 - 几秒钟就能将本地服务暴露到公网
- 请求监控 - 内置 Web 界面,方便调试和排查问题
使用建议
- 开发阶段: 使用免费版即可,充分利用自动 HTTPS 功能
- 安全防护: 设置基本认证,不要暴露敏感数据
- 生产环境: 使用云服务器 + 域名 + SSL 证书的专业方案
- 团队协作: 利用 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,可以大大提高开发效率!


