手把手教你搭建ngrok服务－轻松外网调试本机站点

半年多没用ngrok，然后昨天发现它被墙了，艸～。

ngrok是什么鬼？

做前端开发的童鞋或许不会太陌生。
如果你完全不知道它是什么东西，可以在它的github项目上了解下：https://github.com/inconshreveable/ngrok
这里只提下它的核心功能：能够将你本机的HTTP服务（站点）或TCP服务，通过部署有ngrok服务的外网伺服器暴露给外网访问！

如上封面图所示，举一个栗子。

橘色屏幕的笔记本是你的工作机器，安装了ngrok客户端
ngrok.com所在的服务器安装了ngrok的服务端（ngrokd）
利用ngrok 8080命令可以将你本机的8080端口暴露给反向代理至ngrok.com的某个二级域名如：xxx.ngrok.com
别人通过xxx.ngrok.com就可以访问你本机8080端口上的站点内容了。

由此可见，除了Weinre、browsersync 这些惯用的手段外，借助ngrok，也一样可以解决前端开发过程经常遇到的“本地开发，外网调试”老大难题。

囧的是：ngrok.com被墙了，我们已无法用它官方的服务～
国内虽然有一些第三方的ngrok服务，但是也无法保证其稳定性。
还好ngrok是开源的，我们可以通过它的源码在自己的外网服务器上搭建自己的ngrok服务。

前提条件是：一台外网可访问的主机，且有域名解析至该主机上。

搭建服务端ngrokd

1.安装go语言开发环境

ngrok是利用go语言开发的，所以先要在服务器上安装go语言开发环境。
以CentOS的服务器示例，安装Go语言很简单的：

1	sudo yum install golang

安装完毕后，利用go version来验证是否安装成功。
go安装好后，我们再设置下go的环境变量：

在~/.zshrc或~/.bash_profile文件内，加入以下环境变量配置内容：

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

保存后，重新给shell加载下配置文件：source ~/.zshrc

最后可通过go env查看是否配置成功。

2.安装git

安装过程略。后面我们需要利用git拉取源码。

3.fork并拉取ngrok的源码

下面编译过程需要改官方的部分源码，所以最好fork一份源码至自己的github账户。

1
2
3

$ mkdir -p ~/go/src/github.com/mamboer
$ cd ~/go/src/github.com/mamboer
$ git clone https://github.com/mamboer/ngrok.git

源码拉取下来后，需要修改一个地方：
打开src/ngrok/log/logger.go文件
将code.google.com/p/log4go 修改为：github.com/alecthomas/log4go

googlecode已经寿终了，我们将依赖的log4go替换成github的版本。

在编译ngrok的源码之前，我们还需要改下官方源码用到的签名证书。

4.生成自签名证书

使用ngrok.com官方服务时，我们使用的是官方的SSL证书。自建ngrokd服务，如果不想买SSL证书，我们需要生成自己的自签名证书，并编译一个携带该证书的ngrok客户端。

证书生成过程需要一个NGROK_BASE_DOMAIN。以ngrok官方随机生成的地址693c358d.ngrok.com为例，其NGROK_BASE_DOMAIN就是”ngrok.com”，如果你要提供服务的地址为”example.ngrok.xxx.com”，那NGROK_BASE_DOMAIN就应该是”ngrok.xxx.com”。

我们这里以NGROK_BASE_DOMAIN=“ngrok.fex.im”为例，生成证书的命令如下：

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

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

-rw-rw-r-- 1 lv lv  985 Feb 17 19:04 device.crt
-rw-rw-r-- 1 lv lv  895 Feb 17 19:04 device.csr
-rw-rw-r-- 1 lv lv 1679 Feb 17 19:03 device.key
-rw-rw-r-- 1 lv lv 1675 Feb 17 19:01 rootCA.key
-rw-rw-r-- 1 lv lv 1103 Feb 17 19:03 rootCA.pem
-rw-rw-r-- 1 lv lv   17 Feb 17 19:04 rootCA.srl

ngrok通过bindata将ngrok源码目录下的assets目录（资源文件）打包到可执行文件(ngrokd和ngrok)中去，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.编译客户端程序ngrok和服务端程序ngrokd

在ngrok目录下执行如下命令，编译ngrokd：

1	$ make release-server

类似的，利用以下命令编译ngrok:

1	$ make release-client

成功编译后，会在bin目录下找到ngrokd和ngrok这两个文件。

我们将ngrokd文件拷贝至~/go/bin目录下，以方便在其他目录内也可以直接通过ngrokd来访问该执行程序。

6.运行ngrokd服务

ngrokd -domain="ngrok.fex.im" -httpAddr=":8088" -httpsAddr=":8089"
[15:08:52 CST 2016/02/18] [INFO] (ngrok/log.(*PrefixLogger).Info:83) [registry] [tun] No affinity cache specified
[15:08:52 CST 2016/02/18] [INFO] (ngrok/log.(*PrefixLogger).Info:83) [metrics] Reporting every 30 seconds
[15:08:52 CST 2016/02/18] [INFO] (ngrok/log.Info:112) Listening for public http connections on [::]:8088
[15:08:52 CST 2016/02/18] [INFO] (ngrok/log.Info:112) Listening for public https connections on [::]:8089
[15:08:52 CST 2016/02/18] [INFO] (ngrok/log.Info:112) Listening for control and proxy connections on [::]:4443

7.为ngrok.fex.im添加dns解析

添加两条A记录：ngrok.fex.im和*.ngrok.fex.im，指向fex.im所在的服务器ip。

至此为止，我们的ngrokd服务端搭建配置完成，同时我们在CentOS系统的服务器上编译了一份客户端的执行程序－一个ngrok文件。
如果你的开发机器系统也是CentOS，是可以直接将ngrok这个客户端执行文件拷贝到本地开发机器中来使用的。
但如果你的机器是Mac 或者windows，我们还需要在自己的电脑中编译一份相同签名文件的客户端程序！

注意：请记得提交已更改的源码至github，一会还要用到。

在MAC中编译ngrok客户端

服务器是CentOS，自己的工作电脑是Mac，所以得在自己的电脑中编译一份相同签名文件的客户端程序！

1.安装go

与服务器的步骤类似，我们首先要安装go语言环境：

1 2	brew update brew install go

2.设置go的环境变量（略）

3.拉取源码并编译客户端（略）

最后将编译好的ngrok文件，拷贝至$GOPATH/bin目录内，以便在命令行内任意目录内均可以直接通过ngrok运行程序。

最后的验证

ngrokd服务配置好了，客户端程序也有了，下面测试下ngrok是否能够正常使用。

创建一个ngrok配置文件：ngrok.cfg

1 2	server_addr: “ngrok.fex.im:4443" trust_host_root_certs: false

运行客户端，暴露8080端口的站点

1	$ ngrok -subdomain demo -config=/Users/lv/bin/ngrok.cfg 8080

在8080端口下建一个测试站点
方便起见，我们拉取git@github.com:o2team/brand.git做测试：
1
2
3
4
npm i -g node-static
git clone git@github.com:o2team/brand.git
cd brand
static
在浏览器中输入demo.ngrok.fex.im:8088
bingo!
在浏览器中输入：localhost:4040
可以查看所有的请求情况！

注意事项

客户端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服务

go的安装

https://blog.starkandwayne.com/2014/12/04/how-to-install-go-on-digital-ocean/

结语

本文主要介绍了ngrok服务的自行搭建。同时为大家免费提供我搭建好的ngrok服务：ngrok.fex.im。
fex.im所在的机器是digitalocean的一个主机，虽然国内速度慢但是还算稳定。

如何使用ngrok.fex.im?

安装client

Linux 下载:http://fex.im/files/ngrok
Mac OSX 下载：https://github.com/mamboer/ngrok/releases/download/1.7.2/ngrok

放在 /usr/local/bin 目录下

设置所有者

1	sudo chown $(whoami):staff ngrok

设置权限

1	sudo chmod 777 ngrok

运行客户端

1	$ ngrok -subdomain demo -config=/Users/lv/bin/ngrok.cfg 8080

配置文件

1 2	server_addr: “ngrok.fex.im:4443" trust_host_root_certs: false

上次更新：2016-12-22 17:53:25