内网穿透ngrok的使用教程,微信公众平台本地调试详解

Posted by admin on 2016, April 25

内网穿透ngrok的使用教程,微信公众平台本地调试详解

以微信公众平台为例,日常开发中经常会遇到要在公网访问本地环境的代码,测试也好,演示也罢,总之我们总会遇到这样的需求,这里我们就说说这个内网穿透的工具ngrok

需要的工具

  • ngrok官网本身提供了公共服务,只需要注册一个帐号,运行它的客户端,就可以快速把内网映射出去。但不幸的是,被墙了,所以我们首先需要一个能够安装ngrok服务的带独立ip的linux机器,也就是vps
  • 一个域名,解析域名或者二级域名到vps以备穿透使用

安装服务端ngrokd

ngrok以及其服务端ngrokd都是开源的,我们直接通过源码编译安装ngrokd

  1. 获取源码 git clone https://github.com/tutumcloud/ngrok.git
  2. 安装go,sudo yum install go
  3. 生成自签名证书, 比如我想把tunnel.akmumu.com作为穿透的网址,那么下面几步就是了:
NGROK_DOMAIN="tunnel.akmumu.com"

openssl genrsa -out base.key 2048
openssl req -new -x509 -nodes -key base.key -days 10000 -subj "/CN=$NGROK_DOMAIN" -out base.pem
openssl genrsa -out server.key 2048
openssl req -new -key server.key -subj "/CN=$NGROK_DOMAIN" -out server.csr
openssl x509 -req -in server.csr -CA base.pem -CAkey base.key -CAcreateserial -days 10000 -out server.crt

cp base.pem assets/client/tls/ngrokroot.crt
cp server.crt assets/server/tls/snakeoil.crt
cp server.key assets/server/tls/snakeoil.key

编译ngrokd

sudo make release-server 恩,一切正常,ngrok/bin 目录下应该有 ngrokd 这么个可执行文件。

开始使用

启动服务端

sudo ./bin/ngrokd -domain="akmumu.com" -httpAddr=":8080" -httpsAddr=":8082" 这个时候如果你解析好了域名到这太机器,那么在浏览器访问 http://tunnel.akmumu.com:8080就能看到提示了Tunnel tunnel.akmumu.com:8080 not found 到这里,说明服务端已经ok了,等待客户端连接吧

启动客户端

这里我们启动客户端的地方就是我们想要被穿透出去的本地环境,我这里是一台mac,所以在linux编译出来拷贝到mac去了: sudo GOOS=darwin GOARCH=amd64 make release-server release-client  这样会在bin/darwin_amd64下生成对应的客户端。 你若不同,可以自己编译一个客户端,还是原来的源码,命令为:sudo make release-client,同样bin目录下出现一个ngrok文件,他就是喽。 写一个简单的配置文件,随意命名如 ngrok.cfg:

server_addr: akmumu.com:4443
trust_host_root_certs: false

开始运行 ./ngrok -config=ngrok.cfg -subdomain=tunnel 8080 看看提示,呵,成了
Tunnel Status online
现在再访问 http://tunnel.akmumu.com:8080,访问到的已经是我本机 8080 端口上的服务了。至于你想映射到80端口,用nginx代理一下吧,因为我相信你和我一样80端口早就被占用了。

微信公众平台只能访问服务端的80端口问题

如果你机器上的80端口没有被占用,那么只需要改一下参数-httpAddr=":80”就好了,如果被占用了,只好代理一下了,举个例子

server {
    listen       80;
    server_name  tunnel.akmumu.com;
    access_log  logs/access.log;
 
    location / {
        proxy_pass http://tunnel.akmumu.com:8080;
    }
}

好了,只要设置微信那边tunnel.akmumu.com这个就好啦。

还有一个管理小页面

Web Interface                 127.0.0.1:4040 在浏览器上看看吧。