ngrokの導入

ngrokとは

ngrok（エングロクと読む）は、httpのトンネリングサービスです。

ngrokでホストされるURL（例：http://xxxx.ngrok.io/ ）へのアクセスをローカル環境のwebサーバー（http://localhost:3000 など）にトンネリングしてくれます。

例えば、stripeやLINE、その他クラウドサービスのwebhook処理を開発する際に、インターネット上に本番やステージングのwebサーバーを構築する前に、ローカル開発環境でwebhookへの対応コードを実装、テストすることができるようになります。

この記事では、ngrokの開発環境を用意する手順を紹介します。

ngrokのインストール

公式サイトでダウンロードして、インストールすることもできますが、インストールはmacOSの場合であれば、homebrewを使うほうが楽です。以下のコマンドでインストールできます。

% brew install --cask ngrok

ngrokアカウントのサインアップ

ngrokを使うためには、サービスの利用登録が必要なので、公式サイトでサインアップを行ってください。

auth tokenの設定

サインアップするとログイン後のページにauthtokenが表示されているので、それをコピーして、以下のように、コンソールから設定します。

% ngrok authtoken <your-token>

そうすると、~/.ngrok2/ngrok.yml にtokenの値が書き込まれてサインアップしたngrokアカウントが認識されるようになります。

ngrokエージェントの起動

トンネリングを開始するためには、以下のようなコマンドを実行します。

% ngrok http 3000

これで、以下のような情報がコンソールに表示され、トンネリングに使えるURLが分かります。

ngrok by @inconshreveable                                                                                                                                                                                       (Ctrl+C to quit)
                                                                                                                                                                                                                                
Session Status                online                                                                                                                                                                                            
Account                       <your account name>(Plan: Basic)                                                                                                                                                                        
Update                        update available (version 2.3.40, Ctrl-U to update)                                                                                                                                               
Version                       2.3.35                                                                                                                                                                                            
Region                        United States (us)                                                                                                                                                                                
Web Interface                 http://127.0.0.1:4040                                                                                                                                                                             
Forwarding                    http://<your-random-subdomain>.ngrok.io -> http://localhost:3000                                                                                                                                             
Forwarding                    https://<your-random-subdomain>.ngrok.io -> http://localhost:3000                                                                                                                                            
                                                                                                                                                                                                                                
Connections                   ttl     opn     rt1     rt5     p50     p90                                                                                                                                                       
                              0       0       0.00    0.00    0.00    0.00                                                                                                                                                      
                                                                                               

この記事では <your-random-subdomain> と記載しましたが、ここに、トンネリングで使えるインターネットアクセス可能なURLが表示され、また、そのURLがローカルのhttp 3000番ポートにトンネリングされているのが分かります。

この一般公開されているURLをクラウドサービスのwebhookのエンドポイントとして指定しておけば、ローカル環境のwebサーバーを使って動作確認をしながら開発を行うことができます。

ngrokのサブドメインの固定

無償のアカウントでは、ngrokを起動するたびに、http://<your-random-subdomain>.ngrok.io の <your-random-subdomain> の部分がランダムなサブドメインになってしまい、そのたびに、クラウドサービス側の呼び出し先設定を更新しなければなりません。

これは、ngrokの有償登録をすることで固定化できます。有償登録をすると、以下のようにサブドメインを他のユーザーが使っていない任意の文字列に固定できます。

% ngrok http 3000 -subdomain=<任意の固定したいサブドメイン>

ngrokのアップデート

ngrok起動中のコンソールでCtrl+U でアップデートが開始されます。

本サイトの更新情報は、Twitterの株式会社プレセナ・ストラテジック・パートナーズエンジニア公式アカウントで発信しています。ご確認ください。