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

https://aotu.io/notes/2016/02/19/ngrok/index.html

ngrok 是啥，这里就不赘述了，本文主要讲如何搭建的自己的 ngrok 服务，包含 ngrok 服务端、ngrok 客户端。

前置条件

• 一台外网可访问的主机
• 一个可用域名并解析至主机上

搭建服务端

安装golang

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

$ sudo yum install golang

# 查看是否安装成功
$ go version
go version go1.11.5 linux/amd64

安装Git

$ sudo yum install git

# 查看是否安装成功
$ git --version
git version 1.8.3.1

拉取ngrok源码

$ mkdir /opt/local && cd /opt/local

# 拉取ngrok源码
$ git clone https://github.com/mamboer/ngrok.git

生成自签名证书

$ cd ngrok

# 生成证书
$ mkdir cert && cd cert
$ NGROK_DOMAIN="ngrok.sprainkle.com"
$ openssl genrsa -out ca.key 2048
$ openssl req -x509 -new -nodes -key ca.key -subj "/CN=$NGROK_DOMAIN" -days 5000 -out ca.pem
$ openssl genrsa -out ngrok.key 2048
$ openssl req -new -key ngrok.key -subj "/CN=$NGROK_DOMAIN" -out ngrok.csr
$ openssl x509 -req -in ngrok.csr -CA ca.pem -CAkey ca.key -CAcreateserial -out ngrok.crt -days 5000

# 目录下就新生成6个文件
$ ll
-rw-r--r-- 1 root root 1675 Jul  2 18:24 ca.key
-rw-r--r-- 1 root root 1123 Jul  2 18:24 ca.pem
-rw-r--r-- 1 root root   17 Jul  2 18:24 ca.srl
-rw-r--r-- 1 root root 1005 Jul  2 18:24 ngrok.crt
-rw-r--r-- 1 root root  903 Jul  2 18:24 ngrok.csr
-rw-r--r-- 1 root root 1679 Jul  2 18:24 ngrok.key

# 复制证书ngrok目录
cp ca.pem ../assets/client/tls/ngrokroot.crt
cp ngrok.crt ../assets/server/tls/snakeoil.crt 
cp ngrok.key ../assets/server/tls/snakeoil.key
cd ../

服务端程序ngrokd和客户端程序ngrok

$ pwd
/opt/local/ngrok/cert
# 当前目录在cert，需要先回到上一层，即ngrok
$ cd ../

# 编译
export GOPATH=`pwd`
## centos 64
GOOS=linux GOARCH=amd64

# 编译客户端及服务器端
make release-server release-client

注：若生成签名或编译过程中出现错误，比如未安装 gcc、gcc-c++、openssl等，用 yum install -y <softwares> 安装即可。

编译成功后，会在 bin 目录下看到 ngrok 的两个程序：

$ cd bin && ll
-rwxr-xr-x 1 root root  2772750 Jul  2 18:27 go-bindata
-rwxr-xr-x 1 root root 11833510 Jul  2 21:13 ngrok
-rwxr-xr-x 1 root root  9308170 Jul  2 18:41 ngrokd

ngrokd 就是我们的服务端程序了，ngrok 是客户端程序，这个不一定用的到，因为这是在linux上编译的，所以只能在linux系统上使用。

启动服务器端

$ nohup ./ngrokd -domain="ngrok.trimeters.com" -httpAddr=":8002" -httpsAddr=":8003" -tunnelAddr=":4000"

• 8002：为HTTP端口，一般代理访问的地址
• 8003: 为HTTPS端口
• 4000: 为Ngrok服务器端口，配置时使用此地址

为ngrok.sprankle.com添加dns解析

ps: 因为域名和主机都是在阿里云购买的，所以这里以阿里云做例子。
先进入域名控制台，然后找到对应域名，点击解析：

域名控制台

然后添加两条解析记录：

添加两条解析记录

小结

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

在MAC中编译ngrok客户端

服务器是 CentOS，自己的电脑是 macOS，所以这里以 macOS 为例子，在自己的电脑中编译一份 相同签名文件 的客户端程序！

安装Go

略。

拉取ngrok源码到本地

略。

拷贝云主机上的签名到本地

$  scp root@47.107.229.78:/opt/local/ngrok/cert/ca.pem ~/Desktop/ngrok/assets/client/tls/ngrokroot.crt
$  scp root@47.107.229.78:/opt/local/ngrok/cert/ngrok.crt ~/Desktop/ngrok/assets/server/tls/snakeoil.crt
$  scp root@47.107.229.78:/opt/local/ngrok/cert/ngrok.key ~/Desktop/ngrok/assets/server/tls/snakeoil.key

ps: 演示的时候，我是把 ngrok 源码 clone 到桌面，所以需要把上面的 ~/Desktop 以及下文的都替换成自己的目录。

编译客户端

$ pwd
~/Desktop/ngrok

$ export GOPATH=`pwd`

# mac 64位
$ GOOS=darwin GOARCH=amd64
# mac 32位
$ GOOS=darwin GOARCH=386

# 编译客户端及服务器端
$ make release-server release-client

编译完成后，同样在 bin 目录下有 ngrokd、ngrok 两个程序，我们只需要客户端程序 ngrok 即可。

使用客户端

1. 拷贝 ngrok 客户端程序到其他目录，这里为了简单直接拷贝到桌面：

$ pwd 
~/Desktop/ngrok/bin

$ cp ngrok ~/Desktop/ngrok

2. 在桌面创建一个ngrok配置文件：ngrok.cfg，内容如下：

server_addr: ngrok.sprainkle.com:4000
trust_host_root_certs: false

注：请把 ngrok.sprainkle.com 换成自己的 ngrok 二级域名。

3. 运行客户端，代理的是本地的80端口

# demo 这个参数可以随便填，这最后会变成第三级域名
$ ./ngrok -subdomain demo -config=~/Desktop/ngrok.cfg 80

启动结果如下：

运行客户端

4. 验证
   前提是，80端口有程序绑定了，此时访问：http://demo.ngrok.sprainkle.com:8002/，即可访问本地的 80端口了。
   
   

   访问本地80端口

ps: 本地的80端由nginx代理了，所以看到了上面的页面。

小结

上面的演示是为了简单，才把客户端程序和配置文件都放桌面了，其实可以把这2个文件拷贝到单独目录，下次需要代理本地服务时，直接使用下面的命令即可：

# 假设当前目录包含客户端程序和配置文件
$ ./ngrok -subdomain demo -config=ngrok.cfg 80

另外，除了代理本地服务，已可以代理其他机器的服务，比如，开发环境为 192.168.0.100：5000，那么可以使用如下命令代理：

$ ./ngrok -subdomain demo -config=ngrok.cfg 192.168.0.100:5000

云主机使用nginx代理8002端口

安装nginx

略。可参考：Centos 7下编译安装Nginx。

新建ngrok_nginx.conf文件

upstream ngrok {
    server 127.0.0.1:8002;
    keepalive 64;
}

server {
    listen 80;
    server_name *.ngrok.trimeters.com;
    access_log /var/log/nginx/ngrok_access.log;
    proxy_set_header "Host" $host:8002;
    location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host:8002;
        proxy_pass_header Server;
        proxy_redirect off;
        proxy_pass  http://ngrok;

    }
    access_log off;
    log_not_found off;
}

然后include 到 nginx.conf 中:

image.png

然后，reload 一下 nginx 配置：

# 重新加载
./nginx -s reload

最后可以使用 http://demo.ngrok.sprainkle.com/
即可正常访问了，再也不用在后面接一个端口 8002。

参考

https://aotu.io/notes/2016/02/19/ngrok/index.html
https://yangbingdong.com/2017/self-hosted-build-ngrok-server/