前言
我们在日常开发中可能会遇到如下情形：
前端对接企业微信，银行 h5 时候，调试都要先打包前端部署测试，在对接平台输入前端测试地址，然后打开 h5 页面预览。有一点小问题还要重复上面步骤
前后端联调，可能存在不在一个网段的情况，一般方法是后台部署服务，前端连接调试。如果遇到接口问题还要后端重新部署
以上情况都让开发缺失了调试的实时性，开发体验大大降低。有什么好的解决方法吗，这里介绍一下我在开发中用到的 ngrok
ngrok
解决上面问题的方案需要用到内网穿透，ngrok 就是这么一个工具，它的功能有很多，我们只需要内网穿透
它的使用很简单，登录网站成功之后，在首页就有操作步骤
- 下载运行文件
- 配置认证 token
- 监听本地端口
个人 token 在控制台打开左侧Your Authtoken菜单，在页面点击Copy复制
应用
场景一
笔者最近在与某行 app 对接 h5 功能，对方在 app 内提供了 h5 页面入口，如果按照一般步骤，本地调试好 h5，部署测试，在 app h5 入口访问测试地址，有问题修改起来就很麻烦，使用 ngrok 后
- 本地运行前端
- ngrok 代理服务，控制台执行
ngrok http https://localhost:9090，显示如下代表运行成功
复制红框链接到 app 的 h5 入口，这时候如果本地页面修改，app 内的 h5 页面也会修改
场景二
后端和前端需要联调，但是没在同一个局域网中，这时候可以用 ngrok 代理后端本地接口地址
以 nestjs 为例，本地启动服务地址为http://localhost:3000，控制台执行ngrok http http://localhost:3000，显示如下代表运行成功
在前端项目中配置 url 地址https://ad43-42-235-150-85.ngrok-free.app，当请求接口时候，可能遇到下面的提示
这是 ngrok 官方提示潜在的危险，如果你信任这个请求，可以在请求头中配置ngrok-skip-browser-warning属性，值可以是任意的，官方还推荐了 其他方法，这样就可以正常访问后台接口
其他
ngrok 免费版只能运行一个代理服务，一般可以满足日常开发，可能网络原因，代理的速度不太稳定。如果不满足自己的需求，也可以使用 frpc 的方案，自己搭建服务转发
