[工具] 使用 Ngrok 来帮助你实现本机外网访问

开发过程中我们经常会遇到需要外网可访问的东西,例如:微信,支付宝等.那么在没有公网地址的情况下我们怎么在本机进行测试呢,有一个好用的工具叫做 Ngrok.

Ngrok 目前有两个大版本.V1 版本开源,所以你能见到很多大家搭建的服务器;V2 版本不再开源,只能使用官方的服务器,但是官方的服务器由于你懂得的原因,访问速度很慢还经常连不上,所以向大家推荐的是使用QQ浏览器团队搭建的 V1 版本的服务器.

这个插件你可以在QQ浏览器里直接使用,如图所示:

file

使用他自带的功能有一个问题,就是这个域名是随机分配的,每次启动完我们还得去 nginx 里重新绑定域名,特别的麻烦,所以我就把浏览器里的插件提取出来了.因为本身这个工具是可以进行配置的,所以我们添加了配置文件后就可以愉快的定制域名啦,当然也不用下一个根本没有其他作用的QQ浏览器了.

下载地址:

Mac

Windows

接下来我们需要配置一下配置文件,放到程序同级目录,起名叫ngrok.conf就可以了.

trust_host_root_certs: false
server_addr: proxy.qqbrowser.cc:4443
inspect_addr: 0.0.0.0:4040
tunnels:
  qigeshenmemingzihaone:
    subdomain: phphub
    proto:
      http: 10.2.33.10:80

inspect_addr 是管理台的地址,subdomain 是我们需要绑定的子域名,http 是我们本地的 ip+port

之后启动我们的程序

./ngrok start qigeshenmemingzihaone

启动完成

file

接下来我们就可以用自定义域名(http://phphub.proxy.qqbrowser.cc)来访问我们的程序啦.注:图中显示为8080端口,实际上可以使用的是80端口,这里是他的一个 Bug,无所谓啦.

Ngrok 为我们提供了一个方便的查看工具,并且可以模拟回放请求数据.管理后台地址是 127.0.0.1:4040,端口号是我们在配置文件里进行配置的这个版本的你访问了会发现是Unauthorized,难道这么好的功能我们就不能用了么?不是这样的,只是QQ浏览器团队为了防止别人直接用他们的工具做了一个小小的改动,我们访问127.0.0.1:4040/http/in就可以了.

file

有一个需要注意的地方就是,如果想在这个后台里看到响应的报文,需要关掉 gzip,V2 版本已经修复这个 Bug 了,我们用的这个是 V1 版本的.

本帖已被设为精华帖!
本帖由 Summer 于 7年前 加精
TimJuly
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 8
nickfan

v2版本不开源,收费的功能多一些

自定义domain是需要花钱滴,

其实想用个简单的方案的话,可以试试node写的 localtunnel

(开源哦,不收费哦)

官网 https://localtunnel.github.io/www/

只需两步,第一步:

npm install -g localtunnel

第二步:

lt --port 8000

得到一个公网url,比如

https://gqgh.localtunnel.me

就能开始调试了

如果想自定义domain(不收费哦)

可以这样传参

lt -s bigger -l dev.imbigger.com -p 80

其中-s 参数表示 相对于.localtunnel.me的自定义子域名

-l 参数转发到你本地web服务时的Host头(调试域名)

-p 参数转发到你本地web服务时的port端口号,比如80

如上你可以得到一个 http://bigger.localtunnel.me/ 的调试地址

转发到你本地的Host头是 dev.imbigger.com的域名(不收费哦)

源码开源哦:https://github.com/localtunnel/localtunnel

纯粹调试http(s)的请求localtunnel还是比较好用的,

当然如果你要让外部直接ssh(tcp22)到你本机ngrok(v1)也是可以的,ngrok(v2)还支持websocket当然啦,收费哦。

7年前 评论
Summer

Awesome Tim

7年前 评论
nickfan

v2版本不开源,收费的功能多一些

自定义domain是需要花钱滴,

其实想用个简单的方案的话,可以试试node写的 localtunnel

(开源哦,不收费哦)

官网 https://localtunnel.github.io/www/

只需两步,第一步:

npm install -g localtunnel

第二步:

lt --port 8000

得到一个公网url,比如

https://gqgh.localtunnel.me

就能开始调试了

如果想自定义domain(不收费哦)

可以这样传参

lt -s bigger -l dev.imbigger.com -p 80

其中-s 参数表示 相对于.localtunnel.me的自定义子域名

-l 参数转发到你本地web服务时的Host头(调试域名)

-p 参数转发到你本地web服务时的port端口号,比如80

如上你可以得到一个 http://bigger.localtunnel.me/ 的调试地址

转发到你本地的Host头是 dev.imbigger.com的域名(不收费哦)

源码开源哦:https://github.com/localtunnel/localtunnel

纯粹调试http(s)的请求localtunnel还是比较好用的,

当然如果你要让外部直接ssh(tcp22)到你本机ngrok(v1)也是可以的,ngrok(v2)还支持websocket当然啦,收费哦。

7年前 评论
TimJuly

@nickfan 也是挺好的工具,但是和官方版本的 Ngrok 有一个共同的弊病,就是他的服务器搭建在外国.刚开始只是访问慢一些,可以忍受,后来就慢慢的访问不了了(你懂得),所以最终还是国内的服务器才符合国情.由于 localtunnel 是开源的,估计之后也会有许许多多的国内服务器出现.

7年前 评论

微信开发必备神器

7年前 评论

可以使用这个 http://www.ngrok.cc/
效果还可以,配置简单,速度的话个人感觉不是和稳定

7年前 评论
wenber

下载的这个ngrok还用unzip吗?运行提示没有权限.我在chown root:wheel.还是没有权限.

7年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!