ngrokを使用してローカル環境を外部に公開する

ちょっと記事で紹介されていて面白そうだったので、
使用方法など自分用メモです。

インストール

下記のコマンドを実行する。

$ brew install ngrok

上記のコマンドでダメだった場合

$ brew cask install ngrok

ngrokを実行

ngrokの後にローカルで起動しているページのポート番号を入れ起動する。

$ ngrok http 3000

実行して下記様な文字が出れば起動成功。

Tunnel Status                 online                                                    
Version                       1.7/1.7                                                   
Forwarding                    http://77f81e21.ngrok.com -> 127.0.0.1:3000               
Forwarding                    https://77f81e21.ngrok.com -> 127.0.0.1:3000              
Web Interface                 127.0.0.1:4040                                            
# Conn                        0                                                         
Avg Conn Time                 0.00ms

ポート番号

localhost後の数字

http://localhost:3000/

ローカル環境へ外部からアクセス

乱数のURLが表示されるので、これでどこからでもアクセス出来る。

localhost後の数字

http://77f81e21.ngrok.com

サブドメインを使用したい！

乱数だと分かりにくいから、サブドメインを指定したい場合の手順。

ngrokにSign up

下記のURLへアクセスしてSign upします。
無料で登録可能です。2.0は有料です。1.0は無料で使用できます。

201７年１２月の時点では有料プランのみの提供になっているようです。

authtokenを実行する

下記のURLにアクセスするとauthtokenがあるので、
そこに表示されているコマンドを実行する。

$ ngrok -authtoken ***** 3000

一度起動に成功したら、一度ngrokを止めて、
次の下記のコマンドを実行するとサブドメインを使用できる。

$ ngrok -subdomain=kitaro 3000

Tunnel Status                 online                                                    
Version                       1.7/1.7                                                   
Forwarding                    http://kitaro.ngrok.com -> 127.0.0.1:3000                 
Forwarding                    https://kitaro.ngrok.com -> 127.0.0.1:3000                
Web Interface                 127.0.0.1:4040                                            
# Conn                        0                                                         
Avg Conn Time                 0.00ms  

表示されるURLが乱数ではなくなるので、
これで下記のURLでどこからでもアクセス出来る。

http://kitaro.ngrok.com