ローカルで立ち上げたアプリをngrokを使って外部公開する方法と、
より使いこなすためのTips、利用時の注意点などを紹介します。
初めてngrokを使う方でもサクッと使い方を学べます。
ngrokとは
ローカルで立ち上げたウェブアプリケーションを外部に簡単に公開できるサービスです。
読み方はエングロック。
例えば、http://localhost:3000でアプリケーションを立ち上げている状態で、
併せてngrokを立ち上げると他の人もこのアプリケーションにアクセスできるようになります。
つまり、外部に（世界に）公開されます。
用途としては、ローカル開発中にwebhookや外部サービスからの通信を受けたい場合などに使えますし、
他にもモックアップを見てほしい場合などにも使えるでしょう。
使い方
とても簡単。インストールして起動するだけです。
インストール
Mac
Homebrew経由でインストール
$ brew install ngrok/ngrok/ngrok
Linux
curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null && echo "deb https://ngrok-agent.s3.amazonaws.com buster main" | sudo tee /etc/apt/sources.list.d/ngrok.list && sudo apt update && sudo apt install ngrok
他にもファイルからインストールする方法やWindowsでのインストールを知りたい方は公式HPをご覧ください。
起動
$ ngrok http 3000
これで起動完了です。
起動後の画面に出てくるForwarding（この例だと https://f727-240f-a7-af8-1-c4c6-9ba9-cd09-6f89.jp.ngrok.io ）にアクセスするとローカルのlocalhost:3000で起動しているアプリケーションにアクセスできます。
ngrok (Ctrl+C to quit)
We added a plan for ngrok hobbyists @ https://ngrok.com/personal
Session Status online
Session Expires 1 hour, 59 minutes
Terms of Service https://ngrok.com/tos
Version 3.1.1
Region Japan (jp)
Latency 39ms
Web Interface http://127.0.0.1:4040
Forwarding https://f727-240f-a7-af8-1-c4c6-9ba9-cd09-6f89.jp.ngrok.io -> http://localhost:3000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
停止はCtrl + Cで可能です。
Tips1 : 有効期限を解除する
ここからはいくつか小技を紹介します。
一つ目は有効期限に関する話。
気づいた方もいるかと思いますが、上記でSession Expires 1 hour, 59 minutesと表示されている通り、初期状態では2時間でURLが無効になります。
この有効期限、無料のアカウント登録で解除できます。
アカウント登録の方法
まずはこちらのページからサインアップします。
次にこちらのページからAuthtokenをコピーします。
最後に、ローカルでコマンドを打って完了です。
$ ngrok config add-authtoken コピーしたAuthtoken
完了後、ngrok http 3000で起動すると、Session Expiresが表示されていないことがわかります。
ngrok (Ctrl+C to quit)
Check which logged users are accessing your tunnels in real time https://ngrok.com/s/app-users
Session Status online
Account xxxxxx@xxxx.com (Plan: Free)
Version 3.1.1
Region Japan (jp)
Latency 29ms
Web Interface http://127.0.0.1:4040
Forwarding https://ffdd-240f-a7-af8-1-c4c6-9ba9-cd09-6f89.jp.ngrok.io -> http://localhost:3000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
Tips2 : Web InterfaceからRequest履歴を見る
http://127.0.0.1:4040（http://localhost:4040でも同じ）にアクセスするとWeb Interfaceと呼ばれるページが開かれます。
初期状態ではNo requests to display yetと表示されますが、
Requestを受けると履歴が残ります。
このページ内でRequestのHeaderやBodyを見ることができるので、開発時に重宝します。
また、右側にあるReplyボタンを押すと、なんとRequestを再送してくれます。
これがとても便利。
Tips3 : 認証をかける
外部公開する場合、セキュリティに関する懸念をされる方も多いでしょう。
ngrokでは、簡単に認証をかけることが可能です。
認証方法はいくつか用意されていますが、
ここでは一番手っ取り早いBasic認証をかける方法を紹介します。
Basic認証
起動時に--basic-authオプションを渡すことでBasic認証をかけることができます。
$ ngrok http 3000 --basic-auth="username:password"
このオプションをつけて起動すると、アクセス時にユーザー名・パスワードの入力を求めることができます。
その他の認証方法
OAuthやOpenID Connectなども利用可能です。
詳細はこちらに記載されています。
Tips4 : lvh.meで起動する
lvh.meを使っていくつかサブドメインを準備して開発を行なっている場合など、
localhost以外を指定して立ち上げることも可能です。
次のようにhost:ポートを指定して起動します。
$ ngrok http example.lvh.me:3000
ngrokの注意点
利用時の注意点をいくつか記載します。
URLは固定されない
無料利用では、ngrok起動時のURLは固定されず、立ち上げるたびに変わります。
webhookの受信先として指定する場合など毎回設定変更が必要なのでご注意ください。
※有料版では、Custome Domainという機能を利用して固定する方法があります。
詳しくはこちらご覧ください。
セキュリティ
最初に書いた通り、ngrokを立ち上げるとローカルで起動したアプリケーションが世界に対して公開されることになります。
以下の点、ご注意ください。
- 利用が終わったら停止する（
ctrl + Cで停止） - 機密事項を認証不要な状態でアクセス可能な状態にしない（上記で紹介した認証をかける、アプリケーション自体に認証機構をかける、など)
- URLを不用意にネットに公開しない