半年多没用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语言很简单的:

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”为例,生成证书的命令如下:

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.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个文件:

1
2
3
4
5
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目录下找到ngrokdngrok这两个文件。

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

6.运行ngrokd服务

1
2
3
4
5
6
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是否能够正常使用。

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

    1
    2
    server_addr: “ngrok.fex.im:4443"
    trust_host_root_certs: false
  2. 运行客户端,暴露8080端口的站点

    1
    $ ngrok -subdomain demo -config=/Users/lv/bin/ngrok.cfg 8080
  3. 在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
  4. 在浏览器中输入demo.ngrok.fex.im:8088

    bingo!

    aotu.io

  5. 在浏览器中输入:localhost:4040

    可以查看所有的请求情况!
    aotu.io

注意事项

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

1
2
3
4
[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服务
  1. http://tonybai.com/2015/03/14/selfhost-ngrok-service/
  2. https://github.com/inconshreveable/ngrok/blob/master/docs/SELFHOSTING.md
  • go的安装
  1. 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
感谢您的阅读,本文由 凹凸实验室 版权所有。如若转载,请注明出处:凹凸实验室(https://aotu.io/notes/2016/02/19/ngrok/