ngrok的核心功能:能够将你本机的HTTP服务(站点)或TCP服务,通过部署有ngrok服务的外网服务器暴露给外网访问!
ngrok是什么东西?
做前端开发的童鞋或许不会太陌生。 如果你完全不知道它是什么东西,可以在它的github项目上了解下: Github
这里只提下它的核心功能:
能够将你本机的HTTP服务或TCP服务,通过部署有ngrok服务的外网服务器暴露给外网访问!
举一个栗子。
- 你有个笔记本,它是你的工作机器,安装了ngrok客户端
- yhdzz.cn所在的服务器安装了ngrok的服务端(ngrokd)
- 利用ngrok 8080命令可以将你本机的8080端口暴露给反向代理至yhdzz.cn的某个二级域名如:ngrok.yhdzz.cn
- 别人通过ngrok.yhdzz.cn就可以访问你本机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/xiaoman1221/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.yhdzz.cn”为例,生成证书的命令如下:
$ cd ngrok
$ openssl genrsa -out rootCA.key 2048
$ openssl req -x509 -new -nodes -key rootCA.key -subj "/CN=ngrok.yhdzz.cn" -days 5000 -out rootCA.pem
$ openssl genrsa -out device.key 2048
$ openssl req -new -key device.key -subj "/CN=ngrok.yhdzz.cn" -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.yhdzz.cn" -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.yhdzz.cn添加DNS解析
添加两条A记录:ngrok.yhdzz.cn
和*.ngrok.yhdzz.cn
,指向yhdzz.cn
所在的服务器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是否能够正常使用。创建一个ngrok配置文件:ngrok.cfg
server_addr: “ngrok.yhdzz.cn:4443" trust_host_root_certs: false
运行客户端,暴露8080端口的站点
在8080端口下建一个测试站点方便起见,我们拉取 git@github.com :o2team/brand.git做测试:
npm i -g node-static git clone git@github.com:o2team/brand.git cd brand static
在浏览器中输入demo.ngrok.yhdzz.cn:8088
- 在浏览器中输入: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的安装
暂无评论内容