ngrokを使ってローカルの開発環境を一時的に外部に公開する

この記事ではMac OSX(10.10.4)をつかっています。
nmp(2.5.1)を使ってngrokをインストールします。またnpmはインストール済みの前提です。
インストールしているngrokのバージョンは2.0.19です。

はじめに

サイト制作の過程でクライアントにちょっとした確認をしてもらいたいけど、タイミングによってはテストサーバを準備したりアップロードする作業が煩わしい時があるのではないでしょうか。
そんなときはngrokを使うと、いくつかのコマンドを打つだけで自分のローカル環境を外部に公開することができます。

まずはngrokをインストールします。

インストール

$ npm i -g ngrok

ローカルサーバをたてる

このくだりはMAMPなどを使ってローカルサーバを立てる場合は不要です。

$ python -m SimpleHTTPServer

ポート番号を省略すると8000が用いられます。

$ python -m SimpleHTTPServer 8888

ポート番号8888を指定する場合

##ngrokの起動
ローカルサーバを立ち上げたらngrokを起動してみましょう

$ ngrok http 8888

ローカルサーバを立てたポートを指定してngrokを起動します。
以下の様な画面になると思います。

Tunnel Status                 online                                            
Version                       2.0.19/2.0.19                                     
Web Interface                 http://127.0.0.1:4040                             
Forwarding                    http://decd3d2a.ngrok.io -> localhost:8888        
Forwarding                    https://decd3d2a.ngrok.io -> localhost:8888       
                                                                                
Connections                   ttl     opn     rt1     rt5     p50     p90       
                              7       0       0.00    0.00    0.00    0.00      
                                                                                
HTTP Requests                                                                   
-------------                                                           

確認を依頼したい相手に、http://xxxxxxxx.ngrok.ioの部分を伝えます。自分自身のスマホで確認したい時にも便利かもしれません。
終了したい場合はctl + Cを入力。

認証のパスワードを設定したい場合は、公式サイトにメールアドレスの登録を行うことで設定ができます。
登録が済んだらDashboardのmainタブにあるYour Tunnel Authtoken(英数字の長い文字列)をコピーします。

$ ngrok AUTHTOKEN(←ここをコピーした文字列にする)

もう一度ngrokを起動してみましょう。今度は認証も設定します。

$ ngrok http -auth="id:pswd" 8888

「id」と「pswd」の部分を任意のidとパスワードにおきかえてください。

##参考にさせていただいた記事
開発用ローカルサーバを立ち上げる方法