ngrokの利用方法

業務でngrokを利用したので、忘れない為にも利用方法を記載します。

ngrokとは？

Public URLs for building webhook integrations.
Spend more time programming. One command for an instant, secure URL to your localhost server through any NAT or firewall.

webhookを利用する為のpublicURLを発行できます。
簡易的にセキュアなURLをローカルホストサーバーにNATやFirewallを通して構築することが可能です。

有料プランと無料プランがありますが、ちょっとした動作確認が目的の場合は無料プランで十分です。

ngrok説明図

画像参考：ngrok を使ったら Webhook のデバッグが非常に捗った話

ngrokのメリット

1. デモサイトをデプロイせずに試すことが出来る
2. 開発環境でwebhookを試す事が出来る
3. モバイルappのバックエンドサービスをテストを出来る。
4. httpだけではなくhttps通信可能

ngrokを利用した理由

ngrokを利用してローカル環境を外部に公開すれば、デプロイせずにwebhookの受信テストをローカル環境で試す事が出来ると思ったから。

ngrokの使い方

基本的には以下のサイトを参考にしました。
https://qiita.com/kitaro729/items/44214f9f81d3ebda58bd

インストール

brew install ngrok

インストール完了すると、以下のコマンド叩けばバージョンが確認できます。

❯❯❯ ngrok --version                                                                                                                                               [~/Desktop/workspac]
ngrok version 2.3.35

実行

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

http://localhost:3000

の場合はポート番号3000なのでこのように実行

ngrok http 3000

こんな画面が見れれば成功

Session Status                online
Session Expires               7 hours, 59 minutes
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://1fd2ec17.ngrok.io -> http://localhost:3000
Forwarding                    https://1fd2ec17.ngrok.io -> http://localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

アクセス

httpの場合

http://1fd2ec17.ngrok.io

httpsの場合

https://1fd2ec17.ngrok.io

まとめ

簡単にローカル環境をhttp/httpsで外部公開できるので、webhookURLで本当にhttps受信できるのか確認したりする時に便利です。あと、デモサイトを外部に一時的に見せるときとかにも便利です。