从零教你搭建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服务。

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

解析

二、搭建ngrok服务

1. 安装go语言环境

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

1
$ yum install golang

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

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

1
2
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时需要的包：

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

2) 下载git源码，并解压

1
2
3
$ 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) 编译安装并设置环境变量

1
2
3
4
5
$ 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一份源码

1
2
3
$ 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.morongs.com 就是用来作为这次要提供的基础域名。如果你的域名是 abc.com，那么域名基础域名可以设置为 ngrok.abc.com。

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

1
2
3
4
5
6
$ cd ngrok
$ openssl genrsa -out rootCA.key 2048
$ openssl req -x509 -new -nodes -key rootCA.key -subj "/CN=ngrok.morongs.com" -days 5000 -out rootCA.pem
$ openssl genrsa -out device.key 2048
$ openssl req -new -key device.key -subj "/CN=ngrok.morongs.com" -out device.csr
$ openssl x509 -req -in device.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out device.crt -days 5000

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

1
2
3
4
5
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的默认证书。

1
2
3
$ 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目录下，执行如下命令：

1
$ make release-server

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

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

1
2
3
$ 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等工具把它下载到对于的平台。

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

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

6. 启动ngrokd服务器

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

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

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

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

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

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

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

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

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

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

    1
    2
    server_addr: “ngrok.morongs.com:4443"
    trust_host_root_certs: false

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

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

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

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

    启动图

8. 访问页面

浏览器中输入：demo.ngrok.morongs.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服务，解决外网调试本地站点

文章作者:MoRong

发布时间:2016-12-28, 16:07:56

最后更新:2016-12-29, 17:04:36

原始链接:http://morongs.github.io/2016/12/28/dajian-ngrok/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 一、准备工作
  2. 2. 二、搭建ngrok服务
    1. 2.1. 1. 安装go语言环境
    2. 2.2. 2. 安装git
    3. 2.3. 3. 下载ngrok源码
    4. 2.4. 4. 生成自签名证书
    5. 2.5. 5. 编译ngrokd和ngrok
    6. 2.6. 6. 启动ngrokd服务器
    7. 2.7. 7. 启动ngrok客户端验证效果
    8. 2.8. 8. 访问页面
  3. 3. 三、参考资料
  4. 4. 四、结语
,