微信开发之ngrok环境搭建

àì夳堔傛蜴生んèń 2022-07-14 11:39 255阅读 0赞

### 一，为什么要用到ngrok？ ###

各位肯定都知道，做微信开发，我们的开发服务器需要和微信服务器做交互，我们需要准备一台放置在公网的服务器，能够使得我们的服务器可以正常访问微信服务器，并且微信服务器也需要可以正常访问我们的开发服务器。并且我们做开发时的服务器都是放在内网中的，只能通过内网来访问。然而微信服务器无法和我们的内网服务器做交互，这就导致我们做微信开发在本地调试出现了一定的困难！

今天就向大家介绍一个非常强大的外网映射工具:ngrok.它可以把你的本地ip(127.0.0.1|localhost)映射成一个公网域名,这样所有人都可以通过这个域名来访问你的项目,这个功能对本地调试,特别是[微信][Link 1]公众号开发带来了极大的便利.

示例:  
[http://localhost:8080/][http_localhost_8080]项目名/ -> http://\*\*.ngrok.cc/项目名

提醒：[微信][Link 1]接口服务只支持80端口，并不支持其他的端口

###  ###

### 二,准备开发工具 ###

1.tomcat

2.ngrok客户端（可以访问官网进行下载，官网地址是：http://www.ngrok.cc）

三，ngrok版本说明

此处要介绍三个ngrok版本:ngrok,tunnel,sunny-ngrok.

第一个版本是国外开发的原生ngrok版本,这个版本将我们的本地ip映射到一个二级域名上,这个域名有两种形式:自定义主机名和系统分配主机名(主机名为最左边的部分,比如我们平时经常看到的www).这个版本有两个缺陷:  
1.系统分配的主机名是动态分配的,即每一次开启都会不一样,所以每次访问的时候都要记住不一样的域名,这很蛋疼.  
2.这个域名是在国外的,所以访问速度会相当慢

第二个版本是国内基于ngrok开发的一个改良版,由于域名在国内,所以解决了访问慢的问题,但是这个版本现在已经无法使用

第三个版本也是国内开发出的一个版本,可以自定义主机名,还可以自定义域名(前提是你有一条域名),很好的解决了原生ngrok的那两条缺陷.

## 四，环境搭建步骤 ##

我们这里主要来介绍sunny-ngrok版本的搭建方法；

1、访问ngrok授权管理系统（http://www.ngrok.cc/login），点击注册，注册帐号。

![Center][]

2，注册一个新的账号，如下如所示：

![20161208163958030][]

3，注册成功以后点击登录进入ngrok授权管理系统的主界面，然后点击左侧菜单栏中的隧道管理----》开通隧道，进入下面的界面，

![20161208164045501][]

进入界面以后提供隧道的两种购买方式，一种是付费的，一种是免费（其实两者的区别就是带宽的不同，如果只是做测试用，10M带宽肯定够用）

然后点击立即购买；将会出现下面的界面

![20161208164426518][]

注意：1.隧道协议选择http协议；

2.填写隧道名称以及前置域名

3.把上面本地端口改成127.0.0.1：8080

然后点击确定添加

4.确定添加成功后跳转到新的界面下，继续点击左侧菜单中的隧道管理，出现下面的界面，并且要复制隧道id

![20161208164459317][]

5.下载ngrok的客户端

访问下面的网址http://www.ngrok.cc就可以下载客户端，如下图所示：

![20161208164527474][]

下载到本地的D盘中，然后解压，如下图所示：

![20161208164613304][]

![20161208164647191][]

6.输入上文的隧道id，然后回车。如下图所示：

![20161208164719332][]

到此ngrok的环境搭建已经完成，下面就是测试，测试的时候在项目中启动tomcat，用http://127.0.0.1:8080/访问能访问到

同时用http://\*\*\*\*.ngrok.cc/也能访问到；

7.最后一步就是把该域名配置到微信公众平台上就ok了，大功告成。。。。。。

[Link 1]: http://lib.csdn.net/base/wechat
[http_localhost_8080]: http://localhost:8080/
[Center]: /images/20220714/529288e931394478a26ce73b801dc965.png
[20161208163958030]: /images/20220714/81546ef85b1a4d969d8c91b15acea5b2.png
[20161208164045501]: /images/20220714/354c11bea20c476f812bc9b693caf206.png
[20161208164426518]: /images/20220714/94e0bcc8ada3429094b2c3f0d2b43a4a.png
[20161208164459317]: /images/20220714/58551915e5074e75b8ebecb5eca18952.png
[20161208164527474]: /images/20220714/4c988e90b921413c8a20a8db7b310242.png
[20161208164613304]: /images/20220714/9538342e058b43bbb144f3707d697c3c.png
[20161208164647191]: /images/20220714/572162013c1043da8a07ce3479adaad2.png
[20161208164719332]: /images/20220714/3fea69d33c4c4599a37a1a2f98acd3e7.png