📖 教程简介：本文手把手教大家通过 ngrok 实现本地 html页面内网穿透，无需服务器即可实现外网访问、全程零基础可上手，适配 Windows/Mac 系统。

✨ ngrok 核心优势：轻量无复杂配置、支持HTTPS公网域名、自带请求日志监控、适配各类本地服务穿透，是开发者本地调试、临时公网服务部署的神器。

第一步：注册 ngrok 账号

ngrok 穿透服务需要绑定账号认证，否则无法正常使用完整穿透能力：

1. 打开浏览器，访问 ngrok 官方主页：ngrok: deliver your apps, APIs, and AI on local and prod

2. 点击页面右上角 Sign up 注册账号，支持 GitHub、Google 快捷登录，无需繁琐邮箱验证

3. 完成注册后自动登录个人后台仪表盘

第二步：下载并安装 ngrok

推荐官方渠道下载，适配电脑系统，保证安装包安全无冗余：

1. 登录账号后，进入官方下载页面：Download ngrok for macOS | ngrok

2. 页面会自动识别当前电脑系统（Mac/Windows/Linux），选择对应版本下载

Mac 快捷安装方式（推荐）：终端执行 Homebrew 命令一键安装

​​brew install ngrok

第三步：配置专属认证 Token（核心步骤）

安装完成后必须配置 Authtoken 绑定个人账号，否则穿透服务会受限、频繁断线：

1. 进入 ngrok 个人仪表盘：ngrok Log in — Manage Tunnels, Domains & API Gateways

2. 在页面找到 Your Authtoken 模块，复制专属令牌字符串

3. 打开电脑终端，执行以下配置命令，替换为自己的 Token：

ngrok config add-authtoken 你的token

第四步：VS Code 安装 Live Server，启动本地 HTML

1. 安装插件

1. 打开 VS Code，左侧扩展图标
2. 搜索插件：Live Server（Ritwick Dey 开发，下载量最高那款）
3. 点击安装，安装完成重启 VS Code

2. 编写测试 index.html

新建文件夹，里面创建index.html，复制下面测试代码：

3. VS Code 一键启动本地网页

1. VS Code 打开上面存放 index.html 的文件夹
2. 右键点击index.html，选择 Open with Live Server
3. 自动弹出浏览器页面，地址默认：http://127.0.0.1:5500

重点：Live Server 默认端口是 5500，记住这个端口，后面 ngrok 穿透要用。 不要关闭 VS Code，关闭插件服务就会停止。

第五步：ngrok 穿透 5500 端口，生成公网地址

1. 新开独立终端窗口（wind+r 输入cmd然后回车）（VS Code 和 Live Server 保持运行，不能关）
2. 执行穿透命令，端口填 Live Server 默认 5500：

ngrok http 5500

启动成功输出示例

关键信息说明

1. Forwarding 后的 https://xxxx.ngrok.io = 公网访问地址，手机 / 外网电脑都能打开
2. Web Interface: http://127.0.0.1:4040 ngrok 本地请求监控面板
3. Session Status online：代表穿透正常在线

第七步：ngrok 管理面板调试

浏览器访问 http://127.0.0.1:4040 功能：

1. Inspector：记录所有外网访问请求、请求头、静态资源加载日志
2. Replay：一键重放访问请求，调试页面资源 404、样式加载异常
3. 流量统计，方便排查前端资源路径错误

教程总结

整套流程零 Python、无后端，纯前端友好方案：

1. VS Code 安装 Live Server 插件一键启动本地静态网页（端口 5500）
2. ngrok 绑定账号 Token，穿透 5500 端口
3. 获取公网 HTTPS 地址，外网、手机直接访问本地页面（可以直接发送链接给好友看到运行结果）