刺球网络安全社区

 找回密码
 立即注册

新浪微博登陆

只需一步, 快速开始

QQ登录

只需一步,快速开始

搜索
查看: 902|回复: 0

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

[复制链接]

 成长值: 215168

新浪微博达人勋

  • TA的每日心情

    2018-12-27 02:05
  • 签到天数: 19 天

    [LV.4]偶尔看看III

    1130

    主题

    1711

    帖子

    38万

    积分

    管理员

    技术指数:★★★★★

    Rank: 9Rank: 9Rank: 9

    积分
    381053

    社区QQ达人最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

    QQ
    发表于 2017-3-28 05:07:45 | 显示全部楼层 |阅读模式

    半年多没用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服务。


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

    搭建服务端ngrokd1.安装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是否能够正常使用。

    • 创建一个ngrok配置文件:ngrok.cfg
      server_addr: “ngrok.fex.im:4443"
      trust_host_root_certs: false
    • 运行客户端,暴露8080端口的站点
      $ ngrok -subdomain demo -config=/Users/lv/bin/ngrok.cfg 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.fex.im:8088
      bingo!
      zmEfmyF.jpg
    • 在浏览器中输入:localhost:4040
      可以查看所有的请求情况!
      VrauUjn.jpg

    注意事项

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

    [03/13/15 09:55:46 [INFO] [tun:15 New connection from 54.149.100.42:38252
    [03/13/15 09:55:46 [DEBG] [tun:15 Waiting to read message
    [03/13/15 09:55:46 [WARN] [tun:15 Failed to read message: remote error: bad certificate
    [03/13/15 09:55:46 [DEBG] [tun:15 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






    楼主热帖
    回复 天涯海角搜一下: 百度 谷歌 360 搜狗 搜搜 有道 谷粉 雅虎 必应 即刻

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

    本版积分规则

    
     
     
    技术支持
    点击这里给我发消息
    在线客服
    点击这里给我发消息
    点击这里给我发消息
    刺球网安群①:
    刺球网安社区交流群①
    在线时间:
    8:30-21:00
     

    刺球网安 渝公网安备 50011402500080号 ( 渝ICP备15001097号-1 )申请友链|小黑屋| 刺球网络安全社区

    GMT, 2019-1-23 15:26 , Processed in 0.251735 second(s), 46 queries , Gzip On.

    Powered by 刺球网安

    © 2014-2025

    快速回复 返回顶部 返回列表