本地调试微信接口（内网穿透到外网）

客官°小女子只卖身不卖艺 2022-07-19 00:25 454阅读 0赞

原文链接：[http://blog.csdn.net/xyang81/article/details/52141881][http_blog.csdn.net_xyang81_article_details_52141881]

在做微信开发的时候，调用微信接口成功之后，微信会回调我们事先配置好的一个接口。由于微信的服务是在外网的，所以这个回调接口也只能是外网，而且微信要求回调接口只能是通过ICP备案的域名，不能使用IP。所以在开发调试的时候，需要把代码部署到线上的服务器，通过打log来跟踪接口调用情况，很明显这样开发效率非常低。下面介绍两款工具（[natapp][]和[sunny-ngrok][]）来解决这个问题，将本机的IP和端口映射到外网指定的域名下，通过访问映射的外网域名就可以直接访问到本机的服务。

## 1、[natapp][]（免费/收费模式） ##

### 1> 首先在官网下载natapp客户端 ###

![客户端下载][20160807114124266]  
解压后得到一个natapp/natapp.exe执行程序，Linux/Mac 系统 需要 添加执行权限：`chmod a+x natapp`

### 2> 运行 ###

打开终端，在命令行中直接运行`./natapp`即可。运行成功后会进入如下界面：  
![natapp][natapp 1]  
从上图中可以看出，转发那行显示了外网域名到本机的端口映射关系。在外网访问[http://3c8db5aa.ngrok.natapp.cn][http_3c8db5aa.ngrok.natapp.cn]就可以将请求转发到本地80端口对应的服务上了。当然你需要在本机装一个监听80端口的web服务，比如：nginx、apache、iis。如果你是用Tomcat等应用服务器，端口也不是80的话，需要在nginx上再做一个反向代理配置，转换到tomcat对应的端口上。

location / {
        proxy_pass http://localhost:8080;
    }

访问[http://127.0.0.1:4040][http_127.0.0.1_4040]可以监控请求路径、请求头和响应头等日志信息。

通过以上的操作，就完成了外网访问本机服务的工作。

### 3> 指定映射端口 ###

natapp默认只能映射本机的80端口，如果要映射到指定端口，你需要在natapp官网注册一个帐号，并购买一个免费或收费的隧道，来配置映射到指定的端口上。操作流程如下图所示：  
![购买隧道][20160807120403377]  
![购买免费隧道][20160807120446137]

将本地端口修改成你需要映射的端口号，点击免费购买后回到我的隧道列表中，复制authtoken列对应的值。

![隧道列表][20160807121842362]

运行：`./natapp -authtoken=xxxxxx`即可在控制台看到刚刚配置的自定义端口和域名的映射信息。如下图所示：

![自定义端口映射][20160807121350234]  
通过[http://3c8db5aa.ngrok.natapp.cn/jingtong][http_3c8db5aa.ngrok.natapp.cn_jingtong]地址就可以访问到我本机8080端口tomcat部署的应用 jingtong 了。如下图所示：  
![访问外网域名映射到本地服务效果][20160807231618856]

但是免费的隧道有几点限制：  
1> 域名是natapp随机生成的  
2> 每个协议只能购买一个隧道，即每个协议只能映射一个端口  
3> 只能映射一条隧道（一个转发域名）（sunny-ngrok可以映射多条隧道）  
但也已经够用了，不是吗？

说了这么多，你应该知道怎么调试微信接口了吧？ 只需要将natapp随机生成的域名，配置到微信的回调参数配置中即可。因为ngrok.natapp.cn域名是通过了ICP备案的，所以natapp随机生成的三级域名在微信当中都是可以通过验证的。

## 2、[sunny-ngrok][]（完全免费模式） ##

sunny-ngrok配置稍微麻烦一点，需要有自己的域名。

### 1> 在sunny-ngrok[注册][Link 1]一个帐号 ###

### 2> 添加隧道 ###

登录个人中心，新增一条隧道  
![添加隧道][20160807123416260]  
**参数解读：**  
隧道协议：支持http、https、tcp端口转发  
隧道名称：名字随意  
http域名类型：选择自定义  
域名或远程端口：填写自己的在外网访问的域名  
本地地址：本机IP或127.0.0.1  
本地端口：本机web服务的端口  
http验证用户名和http验证密码：访问域名时用户名密码校验，如果不需要校验可以不填  
![隧道列表][20160807124710234]

### 3> 自定义域名解析到server.ngrok.cc ###

需要将自定义的域名在域名管理服务商，将自定义域名用CNAME类型解析到server.ngrok.cc，才能提供服务。

### 4> 发布内网服务到外网 ###

从隧道列表中，拷贝刚刚创建的客户端ID，执行：`./sunny clientid 客户端ID1,客户端ID2`，多个客户端ID用逗号分隔。效果如下图所示：  
![这里写图片描述][20160807125501213]

访问[http://weixin.digi-zones.com][http_weixin.digi-zones.com]效果，和natapp访问的效果一致。如下图所示：

![这里写图片描述][20160807125606269]

## 3、小结 ##

### sunny-ngrok： ###

1> 完全免费  
2> 可以定义多条隧道  
3> 可以完全自定义域名  
4> 需要自己申请域名并备案（算是一个缺点吧）

### natapp： ###

1> 基本免费，高级功能收费（如自定义域名）  
2> 免费版每个协议只能申请一条隧道  
3> 域名随机生成，不能完全自定义域名。收费版也只能修改域名的前缀  
4> 不需要单独申请域名（优点）  
5> 运行简单，下载执行程序直接运行即可，默认监听80端口。如果要监听其它端口，没有注册帐号的前提下，需要用web服务器做反向代理

[http_blog.csdn.net_xyang81_article_details_52141881]: http://blog.csdn.net/xyang81/article/details/52141881
[natapp]: https://natapp.cn/
[sunny-ngrok]: http://www.ngrok.cc/
[20160807114124266]: /images/20220718/bad6aa3d363f440581f9493f581309ea.png
[natapp 1]: /images/20220718/deb96ec3ab73462aaf24036123c584b7.png
[http_3c8db5aa.ngrok.natapp.cn]: http://3c8db5aa.ngrok.natapp.cn
[http_127.0.0.1_4040]: http://127.0.0.1:4040
[20160807120403377]: /images/20220718/ec7c06ae77bb472798729568ee8d7791.png
[20160807120446137]: /images/20220718/05210b97f8d84cd6a6237cd3ed5b3358.png
[20160807121842362]: /images/20220718/e98cf47ba6584cb599e296ca77703308.png
[20160807121350234]: /images/20220718/12b99726e9a146e0b8026f9828dc8edb.png
[http_3c8db5aa.ngrok.natapp.cn_jingtong]: http://3c8db5aa.ngrok.natapp.cn/jingtong
[20160807231618856]: /images/20220718/de2d8514649b45a6b2b943931cdcfbc4.png
[Link 1]: http://www.ngrok.cc/index.php/login/reg.html
[20160807123416260]: /images/20220718/45183de2e904489491dd45ef179afd27.png
[20160807124710234]: /images/20220718/de88155e410f486bb7121a6023c306dd.png
[20160807125501213]: /images/20220718/87c334735b89443584f2d5cfe2b13a51.png
[http_weixin.digi-zones.com]: http://weixin.digi-zones.com
[20160807125606269]: /images/20220718/979693acbb074056952d79ac1e58dd0f.png