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

Question

ngrok 的核心功能：能够将你本机的 HTTP 服务（站点）或 TCP 服务，通过部署有 ngrok 服务的外网伺服器暴露给外网访问！

ngrok 是什么鬼？

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

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

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

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

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

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

搭建服务端 ngrokd

1.安装 go 语言开发环境

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

sudo yum install golang

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

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

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 账户。

$ 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 的默认证书文件，我们需要将它们替换成我们自己生成的：(因此这一步务必放在编译可执行文件之前)

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：

$ make release-server

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

$ 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 语言环境：

brew update
brew install go

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

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

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

最后的验证

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

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

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

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

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

3. 在 8080 端口下建一个测试站点，方便起见，我们拉取 git@github.com:o2team/brand.git 做测试：

   npm i -g node-static
   git clone git@github.com:o2team/brand.git
   cd brand
   static
   

4. 在浏览器中输入 demo.ngrok.fex.im:8088，bingo!

   

5. 在浏览器中输入：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 服务
• http://tonybai.com/2015/03/14/selfhost-ngrok-service/
• https://github.com/inconshreveable/ngrok/blob/master/docs/SELFHOSTING.md
• 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 目录下

设置所有者

sudo chown $(whoami):staff ngrok

设置权限

sudo chmod 777 ngrok

运行客户端

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

配置文件

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