ngrok 微信接口开发利器

用手机访问本地环境的利器ngrok

2015/08/11 · HTML5 · 4
评论 ·
ngrok

原文出处: 吕大豹   

我们在调试移动端页面,尤其是调试微信页面的时候,会遇到这样的情况,手机连着公司的wifi,开发环境(台式机)插着公司的网线,我们要用手机来访问开发环境下的页面。这个时候,如果网线和wifi是在同一个网段,那么直接在手机访问电脑的ip就可以访问到我们搭在本地的web服务。但是,很多时候,公司的网络并不是这么架设的,wifi和网线不在一个网段,那么,通过上述方法就无法访问到了。

有时候调试必须在手机上进行,在chrome下的模拟无法满足。这时候怎么办呢?之前我采取的是这样的办法,电脑上插一个360wifi(插USB孔的那种),然后共享出热点,手机连接到这个热点上网,就可以访问到开发环境了。如果需要查看http请求,在电脑上打开fiddler,设置一个代理,然后在手机上设置wifi的代理为fiddler,(端口默认是8888)。这样来自手机的请求就会被fiddler捕获到,你就能使用fiddler的强大功能来调试代码了。

上面这个办法挺方便的,但是需要一个小小的硬件,360wifi。你可以买一个,非常便宜,百度也有相同的产品。那如果我们手边没有这个硬件可怎么办呢?接下来该主角出场了,那就是ngrok。

ngrok是个什么玩意呢?其实它就是一个反向代理,我们机器上运行起这个服务后,它可以把本地的一个端口代理到公网。代理到公网是什么概念?公网啊,那就是大家都可以访问到了,没有任何网络限制。当然,我们的测试机,连接到任何网络下的手机也是可以的了。

然而不幸的时,ngrok架设在美国,已经被我们伟大的祖国给墙掉了。但是!一位良心网友在国内架设了一台服务器,我们可以任意使用,鼓掌!

废话说了这么多,我们来看看ngrok到底怎么使用呢?其实是相当简单的。

一、下载相关文件

首先,从这位仁兄架设的网站上(

二、运行服务

下载后的两个文件,我们随便找一个目录放好就行,例如,我放在D盘,这样就行了:
图片 1

然后,打开cmd终端,输入如下命令来启动服务: ngrok -config ngrok.cfg -subdomain lvdabao 80

用-config参数来指定配置文件,-subdomain指定访问的子域名称和本地的端口,出现以下界面,说明启动成功了:

图片 2

注意一点,这个子域名称是可以随意起的,但不能与别人的重名,因为这个名称是你的代理的唯一标识,之后用

三、进入调试界面

把服务启动起来还不够,我们的最终目的是要调试呀,我们得能捕获到http请求才行。要实现这个也相当简单,因为ngrok已经为你准备好了。真是相当贴心啊~

请看上面服务运行起来后的信息,有一项 Web Interface 127.0.0.1:4040 ,我们直接访问它就可以进行调试了,在你本地浏览器输入这个地址,试试看吧。

图片 3

很炫酷有没有,你可以看到http请求头和返回的内容,你需要的都有了。

而且,还有一个更好用的功能,看到那个Replay按钮了吗,点击它可以手动再发起一次你选中的请求,简直不能更赞,这样我们调试某个数据接口时,也省了老去手机上刷新页面了,尤其是调试微信页面,不必每次都去刷该死的二维码了。

这个利器的基本用法就介绍到这里,能满足我们开头提出的需求了。其实它还有更强大的功能,有兴趣的可以FQ去官网查看文档。最后再次为国内的这位仁兄点赞,大家也可以去他搭建的网站上面查看相关资料:

2 赞 5 收藏 4
评论

图片 4

主要实现外网访问内网的功能。例如微信公众号的开发。我现在主要是使用的QQ浏览器的微信调试工具。

由于开发微信公众号项目,经常需要将本地部署的接口让外网能直接调用到,偶然发现还有个叫ngrok的神器专门做了这件事,不但提供了一个在外网能够安全的访问内网Web主机,还能捕获所有请求的http内容,方便调试,甚至还支持tcp层端口映射。支持Mac
OS X,Linux,Windows平台。

ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web
服务器之间建立一个安全的通道。ngrok
可捕获和分析所有通道上的流量,便于后期分析和重放
官网:www.qydev.com
当然更推荐下这个
链接:http://pan.baidu.com/s/1nvTvqy9
密码:5h2l

ngrok 部署本机代码,使外网可以访问,ngrok部署

ngrok
内网穿透利器
ngrok 线上服务器

1. ngrok下载运行

下载完毕解压压缩包

一 什么是ngrok

  ngrok is a reverse proxy that creates a secure tunnel from a public
endpoint to a locally running web service. ngrok captures and analyzes
all traffic over the tunnel for later inspection and replay.

  ngrok是一个反向代理,可以从公网建立一个安全隧道到本地的web服务。ngrok
抓取和分析所有的经过数据,用于之后的检查和重放。

/root/ngrok/ngrok http 10.0.7.61:88

体积很小,官网下载后直接解压得到一个二进制文件,

1.修改key.txt文件

找到key.txt文件 如果你下的官网的就要自己创建一个了

ngrok -config=ngrok.cfg -subdomain name 8020

图片 5

Paste_Image.png

举例:ngrok -config=ngrok.cfg -subdomain yahaha 8020
那么你的外网地址就是
https://yahaha.tunnel.qydev.com

二 使用ngrok

  1. 访问ngrok官网

首先访问ngrok官网
注册一个账号,注册后才能获取自己的一个账号秘钥用于进行后面的绑定操作.

图片 6

 

Authtoken
82GkmZCUpRT1Z4uMLCBZ9_6MqWSeGVuXGU9zeBvFrzv

 

  1. 点击下载链接,下载ngrok.

根据操作系统,选择不同版本的ngrok.下载成功后,将下载的文件放到指定位置,下载的文件里包含ngrok.exe. 比如,把ngrok.exe放到
d:/example 文件夹下,并输入如下命令。

1 cd d:/example
2 
3 ngrok authtoken 82GkmZCUpRT1Z4uMLCBZ9_6MqWSeGVuXGU9zeBvFrzv
4 
5 ngrok http 8080  

注意:

第1行:这条命令切换到ngrok的安装目录。

第3行:初次使用ngrok时,首先要保存在ngrok官网获得的秘钥到(authtoken)到配置文件(ngrok.yml)中。默认保存到
 C:\Users\当前用户名/.ngrok2/ngrok.yml下。

第5行:这条命令代表ngrok
监听本地的所有8080端口的web应用。并生成外网可以访问的网络地址。如下图所示

图片 7

3 访问生成的代理地址

 

 

 

部署本机代码,使外网可以访问,ngrok部署
一什么是ngrok ngrok is a reverse proxy that creates a secure tunnel from
a public endpoint to a locally running w…

在shell中执行./ngrok 80即可

,默认会分配随机的二级域名来访问,转发到本机的80端口。可以通过-help参数来查看详细的说明,运行后如下提示:

图片 8

我这里是使用了自定义二级域名,意味着访问

  1. ngrok常用示例

  2. 采用自定义二级域名steven-mbp.ngrok.com转发到本机的8080端口。

./ngrok -subdomain steven-mbp 8080

  1. tcp端口转发,当然外网端口是随机分配的。

./ngrok -proto=tcp 22

  1. 转发到局域网其他的机器

./ngrok 192.168.0.1:80

4.
绑定顶级域名(付费才可用),在dashboard中添加域名,将域名cname解析到ngrok.com即可。

./ngrok -hostname test.dorole.com 8080

3. ngrok配置文件

ngrok可以将参数写到文件中,默认是放在~/.ngrok。例如:

图片 9

这里定义了三个隧道,client表示转发http到本机8080,同时要求验证,ssh表示支持远程访问,第三个是绑定了域名转发到9090。这时候只需要一个./ngrok
start client ssh test.dorole.com即可快速启动这三个隧道服务。

每一个隧道的配置节点都有五个参数,proto,subdomain,auth,hostname和remote_port,每个隧道必须有proto参数来指定本地地址和端口。auth参数用于在http(s)中身份认证,而remote_port用于在tcp隧道中指定远程服务器端口。如果没有配置subdomain参数,ngrok会默认一个二级域名与隧道节点一样的名字。

4. 配置文件中的其他参数

图片 10

authtoken用于设置登录ngrok的授权码,可以在ngrok首页的dashboard中查看到。inspect_addr用于设置监听ip,比如设置为0.0.0.0:8080意味着监听本机所有ip的8080端口上。ngrok也支持自己架设ngrokd服务器,在配置中通过server_addr:“dorole.com:8081″来指定自己搭建的服务器地址。设置trust_host_root_certs:true来支持TLS加密协议的证书信任。

2.在地址栏上输入cmd或是使用命令行工具进入改目录

图片 11

Paste_Image.png

图片 12

Paste_Image.png

这个时候我们就在改目录启动了一个命令行工具

下载地址:

链接: 密码:ka13

官网:https://ngrok.com/

3.把key.text中的命令复制到命令行并执行

图片 13

Paste_Image.png

我们可以看到online 就代表成功了 如果是红色的 那就是失败了
可能是跟人家重名了 把第二步的name换一个试试把

图片 14

Paste_Image.png

这个时候就已经把我们的内网127.0.1:8020映射出去了
打开http://yahaha.tunnel.qydev.com/
我们可以看到它提示我们在127.0.1:8020启动一个web服务

图片 15

Paste_Image.png

4.在你需要外网访问的目录启动一个web服务

图片 16

Paste_Image.png

比如我这个目录想让外网访问到 就可以在这个目录下 启一个web服务

npm install http-server -g

图片 17

Paste_Image.png

http-server -p 8020 

图片 18

Paste_Image.png

然后我们就可以去访问
http://yahaha.tunnel.qydev.com

图片 19

Paste_Image.png

我们还可以看到相应的请求

图片 20

Paste_Image.png

以后我们使用的时候 只要去ngrok 目录用命令行执行

//name 自己的域名

ngrok -config=ngrok.cfg -subdomain name 8020

然后再去你需要展示的目录 执行 就OK啦

http-server -p 8020 

发表评论

电子邮件地址不会被公开。 必填项已用*标注