ngrok：搭建ngrok服务, 外网调试本机站点, 本地服务器链接外网, 本地微信开发

 

官网地址：https://ngrok.com/

什么是ngrok呢？ngrok是一个反向代理，它能够让你本地的web服务或tcp服务通过公共的端口和外部建立一个安全的通道，使得外网可以访问本地的计算机服务。 也就是说，我们提供的服务（比如web站点）无需搭建在外部服务器，只要通过ngrok把站点映射出去，别人即可直接访问到我们的服务。

有做过微信公众号开发的人，对它应该不陌生。在微信公众号开发中，因为用户跟微信公众号产生的交互行为，微信会把用户的相关信息推送到我们自己的服务器，而这个推送的前提是微信能够访问到我们的服务，如果服务在本地，那微信当然无法推送给我们，这使得开发功能的时候调试相当麻烦。幸好有ngrok这个工具，我们可以使用ngrok把本地站点映射出去，解决微信推送给我们的用户信息等消息进行实时本地调试。

很不巧的是，目前国内访问该网站提供的服务相当不稳定，经常连接不上，出于什么原因，你懂得。虽然国内有不少第三方的ngrok服务提供，如natapp、花生壳，但不敢确定它们的稳定性。而QQ浏览器其实也有提供这样的服务专门用于开发微信公众号，不过太过局限，只能用于微信开发，想要做其他用途就不行了。

好在ngrok是开源的，我们可以去Github上下载它的源码，在自己的外网服务器上搭建这样一个服务。

源码地址：https://github.com/inconshreveable/ngrok

下面，我们开始搭建ngrok服务。

一、准备工作

搭建ngrok服务需要有一天外网服务器及一个域名解析到外网服务器上。

本文基于外网的一台VPS，系统版本为CentOS 6.6的linux服务器搭建ngrok服务。VPS有很多地方可以购买，如阿里云和腾讯云的，当然国内的这些相对比较贵，但速度肯定够快。而我买的是国外“搬瓦工”的vps，还可以做其他方面需求都使用。

至于域名，在哪里买都一样了，有了域名之后，建立两个A记录，把域名解析到服务器上，用来关联ngrok服务。

比如我的域名是：ikeepstudying.com，那么建立 ngrok.ikeepstudying.com 和 *.ngrok.ikeepstudying.com 解析到vps服务器上。

二、搭建ngrok服务

1. 安装go语言环境

ngrok是基于go语言开发的，所以需要先安装go语言开发环境，CentOS可以使用yum安装：

yum install golang

如果没有权限，请使用 sudo 安装，安装完成之后，执行 go version 看到如下信息，证明安装成功：
go version go1.7.3 linux/amd64

安装好后，需设置go环境变量，在 ~/.bash_profile 或 ~/.zshrc 文件添加如下代码:

export GOPATH=$HOME/go
PATH=$PATH:$HOME/.local/bin:$HOME/bin:$GOPATH/bin

保存后，重新加载配置文件 source ~/.bash_profile
执行完成后，echo $GOPATH 可查看go路径，或通过 go env 查看是否配置生效。

2. 安装git

git可以通过：yum install git 安装，但我们系统版本默认安装下来的是 1.7.x 版本，这个版本使用的过程中出现一些奇怪的问题，比如在编译ngrokd服务端时，git无法通过https获取到代码内容，如果你没有这种情况可跳过。

如果存在git版本问题，可先通过 yum remove git 移除已有git版本，再通过源码安装编译，具体步骤如下：

1) 安装编译git时需要的包：

$ yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel
$ yum install  gcc perl-ExtUtils-MakeMaker

2) 下载git源码，并解压

$ cd /usr/src
$ wget https://www.kernel.org/pub/software/scm/git/git-2.5.0.tar.gz
$ tar xzf git-2.5.0.tar.gz

3) 编译安装并设置环境变量

$ cd git-2.5.0
$ make prefix=/usr/local/git all
$ make prefix=/usr/local/git install
$ echo "export PATH=$PATH:/usr/local/git/bin" >> ~/.bash_profile
$ source ~/.bash_profile

4) 查看是否安装成功

git --version，返回 git version 2.5.0

3. 下载ngrok源码

新建一个目录，并clone一份源码

$ mkdir ~/go/src/github.com/inconshreveable
$ git clone https://github.com/inconshreveable/ngrok.git
$ export GOPATH=~/go/src/github.com/inconshreveable/ngrok

目前最新的ngrok文件已经把googlecode替换成GitHub地址了，如果仍然是googlecode，则把 src/ngrok/log/logger.go 文件中的：
code.google.com/p/log4go 修改为：github.com/alecthomas/log4go

4. 生成自签名证书

使用ngrok.com官方服务时，我们使用的是官方的SSL证书。自己建立ngrok服务，需要我们生成自己的证书，并提供携带该证书的ngrok客户端。

证书生成过程需要有自己的一个基础域名，官网随机生成的地址，如：693c358d.ngrok.com，基础域名就是ngrok.com。而在上文中提到的二级域名 ngrok.ikeepstudying.com 就是用来作为这次要提供的基础域名。如果你的域名是 abc.com，那么域名基础域名可以设置为 ngrok.abc.com。

以我的基础域名为例（注意替换成自己的域名），生成证书过程如下：

$ cd ngrok
$ openssl genrsa -out rootCA.key 2048
$ openssl req -x509 -new -nodes -key rootCA.key -subj "/CN=ngrok.ikeepstudying.com" -days 5000 -out rootCA.pem
$ openssl genrsa -out device.key 2048
$ openssl req -new -key device.key -subj "/CN=ngrok.ikeepstudying.com" -out device.csr
$ openssl x509 -req -in device.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out device.crt -days 5000

执行完成以上命令后，在ngrok目录下，会新生成6个文件：

-rw-r--r-- 1 mrnick mrnick   997 Dec 18 04:40 device.crt
-rw-r--r-- 1 mrnick mrnick   903 Dec 18 04:40 device.csr
-rw-r--r-- 1 mrnick mrnick  1675 Dec 18 04:39 device.key
-rw-r--r-- 1 mrnick mrnick  1679 Dec 18 04:39 rootCA.key
-rw-r--r-- 1 mrnick mrnick  1115 Dec 18 04:39 rootCA.pem
-rw-r--r-- 1 mrnick mrnick    17 Dec 18 04:40 rootCA.srl

我们在编译可执行文件之前，需要把生成的证书分别替换到 assets/client/tls和assets/server/tls中，这两个目录分别存放着ngrok和ngrokd的默认证书。

$ cp rootCA.pem assets/client/tls/ngrokroot.crt
$ cp device.crt assets/server/tls/snakeoil.crt
$ cp device.key assets/server/tls/snakeoil.key

5. 编译ngrokd和ngrok

首先需要知道，ngrokd 为服务端的执行文件，ngrok为客户端的执行文件。

接下来我们来编译ngrokd，在ngrok目录下，执行如下命令：

$ make release-server

编译过程需要等待一会，因为需要通过git安装相关依赖包。如果提示没有权限，使用 sudo 命令来安装。

由于客户端的平台版本较多，我们需要交叉编译来选择生成的平台。
以windows、arm、linux版本编译，如下：

$ GOOS=linux GOARCH=amd64 make release-client
$ GOOS=windows GOARCH=amd64 make release-client
$ GOOS=linux GOARCH=arm make release-client

不同平台使用不同的 GOOS 和 GOARCH，GOOS为go编译出来的操作系统 (windows,linux,darwin)，GOARCH, 对应的构架 (386,amd64,arm)

Linux 平台 32 位系统：GOOS=linux GOARCH=386
Linux 平台 64 位系统：GOOS=linux GOARCH=amd64

Windows 平台 32 位系统：GOOS=windows GOARCH=386
Windows 平台 64 位系统：GOOS=windows GOARCH=amd64

MAC 平台 32 位系统：GOOS=darwin GOARCH=386
MAC 平台 64 位系统：GOOS=darwin GOARCH=amd64

ARM 平台：GOOS=linux GOARCH=arm

通过上面的步骤，将生成所有客户端文件，客户端文件放在对于的文件夹中，如windows 64位的为：windows_amd64，linux客户端在bin目录下的ngrok文件。当然，也可以简单的使用 $ make release-client 进行编译成默认的ngrok客户端文件。

完成之后，可以在服务器上把ngrok客户端打个包，通过scp等工具把它下载到对于的平台。

$ scp mrnick@25.25.25.25:/mrnick/go/src/github.com/ikeepstudying/ngrok/bin/ngrok /Users/ikeepstudying/Documents/

连接成功输入密码下载文件，如果不是默认端口，则使用-P设置端口，如 scp -P xxx user@ip:/path path 连接linux服务器。具体命令参考scp相关介绍

6. 启动ngrokd服务器

请将 bin/ngrokd 放入环境变量中，启动命令：

$ ngrokd -domain="ngrok.ikeepstudying.com" -httpAddr=":8088" -httpsAddr=":8089"

其中，-domain为你的ngrok服务域名，-httpAddr为http服务端口地址，访问形式为：xxx.ngrok.ikeepstudying.com:8088，也可设置为80默认端口，-httpsAddr为https服务，同上。

ngrokd启动后，退出命令行即关闭服务。如果想要在后台运行，则执行：

 $ nohup ngrokd -domain="ngrok.ikeepstudying.com" -httpAddr=":8000" &

注意末尾需要有 & 号，详细搜索 nohup 了解。
关闭服务只需通过：

$ ps -A   # 找到PID，执行关闭
$ kill xxxid

7. 启动ngrok客户端验证效果

由于在准备工作中，已经把 ngrok.ikeepstudying.com 的域名解析到服务器上，接下启动客户端测试是否可用。

1.建立ngrok配置文件：ngrok.cfg

server_addr: "ngrok.ikeepstudying.com:4443"
trust_host_root_certs: false

server_addr端口默认4443，可通过ngrokd服务端启动修改端口

2. 运行客户端，暴露本地4000端口站点：

$ ngrok -subdomain demo -config=./config.cfg 4000

回车后，看到这样一个界面，说明启动成功。

8. 访问页面

浏览器中输入：demo.ngrok.ikeepstudying.com，成功访问本地hexo博客4000端口的站点内容：

浏览器输入：127.0.0.1:4040 查看页面请求情况：

至此，搭建成功，测试正常。

三、参考资料

1. https://aotu.io/notes/2016/02/19/ngrok/
2. http://studygolang.com/articles/2655
3. http://bbear.me/shi-yong-a-li-yun-da-jian-zi-ji-de-ngrokfu-wu/
4. https://xicheng412.github.io/2016/09/27/ngrok-config/

四、结语

ngrok提供的内网映射功能，不单单只是用在微信上，像我们平时的demo演示，也可以通过它让不在同一局域网内的人员能够实时看到我们本地开发项目的情况和进度。
要知道，工具存在本身就是为了提高我们的效率，不要因为别人使用什么，我们就用什么，关键在于这个工具能否提高目前的工作效率，如果是，请果断学习使用。

注意事项

客户端ngrok.cfg中server_addr后的值必须严格与-domain以及证书中的NGROK_BASE_DOMAIN相同，否则Server端就会出现如下错误日志：

[03/13/15 09:55:46] [INFO] [tun:15dd7522] New connection from 54.149.100.42:38252
[03/13/15 09:55:46] [DEBG] [tun:15dd7522] Waiting to read message
[03/13/15 09:55:46] [WARN] [tun:15dd7522] Failed to read message: remote error: bad certificate
[03/13/15 09:55:46] [DEBG] [tun:15dd7522] Closing

 

第二：借助ngrok工具，解决本地微信开发的麻烦

相信做过微信开发的童鞋都不同程度上遇到过这样的问题，那就是苦于微信的开发模式，必须提供一个可以外网访问的域名和服务器。因此我们只能在服务器中开发，或者在本地完成开发之后到服务器上测试。这就苦了我们这些没有域名或者服务器的宝宝们。那么如何解决这样一个问题呢？

现在好了，小编今天要给大家推荐这款神器可以完美解决这个问题啦。

那么 ngrok 到底可以给我们提供什么样的功能呢？小编觉得主要是以下三点：

（1）本地 Web 外网直接访问。

（2）微信开发

（3）TCP 转发

小编认为 ngrok 尤其是对于做微信开发的童鞋可真是能够帮上大忙。你只需要在你的本机上进行开发后，下载 ngrok ，运行一条简单的配置命令，就可以直接让微信服务器和你的本地电脑通信，再也不用每次开发完成都需要将项目发布到服务器才能进行测试啦。想想真的是方便的不要不要。

我们可以在 github 下载到 ngrok 的源码自行编译后使用，当然也可以到 ngrok 的官网下载，无论是 Windows，Linux 还是 mac OS 都有对应的版本下载。感兴趣的童鞋还可以利用 VPS 自行搭建 ngrok 的服务，怎么样？听起来是不是很炫酷？

 

1. 简介

微信开发，认证接口需要公网IP和80端口，给本地开发和测试带来麻烦，借助ngrok可以解决这个问题。

2. 使用方法

2.1 准备

官网下载，并解压ngrok。

2.2 启动ngrok

进入ngrok根目录，命令行运行ngrok 80，即在80端口启动监听。

浏览器打开 http://localhost:4040 可以看到一个临时的二级域名 http://******.ngrok.com

2.3 配置微信公众平台测试号

修改接口配置信息的URL的根域名为上面获得的临时二级域名。

只要本地在80端口启动了正确的响应上述接口配置的URL的应用，就可以认证成功。

2.4 ngrok监控

http://localhost:4040 会显示所有80端口进入的请求详情和响应，方便测试。

3. 其他

上面说了二级域名是临时的，每次重启ngrok都会变化，需要重新2.3 修改微信接口​配置。

相比于，借助外部服务器跳转到本地，本地再修改路由器的端口映射，该方法响应更快，更稳定。

4. 关于ngrok.com被封

由于ngrok.com服务器在国外，被墙了。修改配置文件，使用国内的服务器就没问题了。

请查看国内域名www.tunnel.mobi 、 国内域名www.ngrok.cc，软件不变，配置文件指向国内域名服务器，启动就好了。

这里提供一份我在使用的文件，可以根据里面README.txt说明，修改一下使用。

下载：ngrok.tar.gz

 

第三：官网用法

免费注册即开始：https://dashboard.ngrok.com/get-started

 

1. 1. 1. 直接下载 Download ngrok

         Linux

         Mac OS X

         Windows

         Mac (32-bit)

         Windows (32-bit)

         Linux (ARM)

         Linux (32-bit)

         FreeBSD (64-Bit)

         FreeBSD (32-bit)

      2. 解压安装 Unzip to install

         unzip /path/to/ngrok.zip

      3. 链接你的账户 Connect your account

         $ ./ngrok authtoken ${token_key}
         

      4.  开始吧 Fire it up

         Read the documentation on how to use ngrok. Try it out by running it from the command line:

         $ ./ngrok help

         To start a HTTP tunnel on port 80, run this next:

         $ ./ngrok http 80
         

      5.  打开监视器 Open the ngrok inspector

         Visit http://localhost:4040 once you have ngrok running to see live requests on your tunnels. Quickly inspect the headers and responses, or replay a request to speed up your development process.

         

      6.  实例

             ngrok_config=/home/{your-sshname}/.ngrok2/ngrok.yml # local config file
         
             if [ ! -f ${ngrok_config} ]
             then
                 echo ${ngrok_config} can not be found
                 ./ngrok authtoken {your-token} # check your account 
             else
                 ./ngrok http -subdomain={your-subdomain} {your-hostname-or-ip}:80 > /dev/null &   # subdomain only for paid account,  & means to run it at back-end

          

   其他实例：

       ngrok 80
       ngrok -subdomain=example 8080
       ngrok -proto=tcp 22
       ngrok -hostname="example.com" -httpauth="user:password" 10.0.0.1

    

    

   参考文档：https://ngrok.com/docs

    

   本文：ngrok：搭建ngrok服务, 外网调试本机站点, 本地服务器链接外网, 本地微信开发