ウェブサイト検索

Ngrokトンネルを使用してインターネット上でローカルアプリケーションのデバッグを行う

Ngrokは、あなたに公開URLを割り当て、それをあなたのローカルホストにトンネル接続するユーティリティです。これにより、ネットワーク外の誰でも公開URLを使用して、あなたのローカル開発環境に簡単にアクセスできるようになります。

Ngrokとは何ですか？

ウェブアプリを開発していて、同僚にテストしてもらうために共有したいとします。ngrokがない場合、どこかの小さなサーバーにアップロードするか、ルーターをポートフォワードして自分のコンピュータに接続する必要がありますが、前者は時間がかかり、ローカルデータベースなどのものを移行することができません。また、後者は使い勝手が悪く、どこでも機能するわけではありません。

Ngrokは、デバイスへのトンネルを提供する単一のURLを提供することによってこれを解決します。それは一種のVPNのように動作し、ファイアウォールを直接デバイスに渡ってトンネルすることができます。複数のトンネルを同時に実行でき、各トンネルのポートとプロトコルを選択できます。たとえば、ポート3000でHTTPで実行されるWebサーバーを転送し、ポート8080で生のTCP接続を介してデータベースを転送することができます。

ngrokクライアントは、自動的に次のようなURLを割り当てます

yourapp.ngrok.io:1234

. これは本質的にSSHトンネルですが、エンドポイントはngrokサービスによって管理されています。ngrokには有料プランがあり、予約されたURLでより多くのトンネルを実行できるようになりますが、無料プランはほとんどの基本的なトンネリングとデバッグには十分です。

無料プランではURLが自動生成されるため、ngrokは稼働時間が懸念されるようなものを実行するには適していません。しかし、セキュリティ上の理由から、常に個人のコンピュータへのトンネルを開いたままにしておくべきではありません。ポートフォワードも同様ですが、ngrokはオンまたはオフにできるため、その点ではより良いです。

Ngrokのインストール

始めるには、ngrokのオンラインダッシュボードに移動してアカウントを作成します。認証されると、セットアップは非常に簡単です。ngrokはパッケージマネージャーを通じてインストールする必要はなく、自分のシステム用のバイナリをダウンロードしてファイルを解凍するだけです。これはファイルエクスプローラーを使っても、または

unzip

指示。

そこから、ngrokを実行する準備が整いますが、おそらくダウンロードフォルダーから移動し、どこからでもアクセスできる場所に置きたいでしょう。LinuxおよびmacOSでは、この場所はPATH変数に保存されており、次のコマンドを実行することで見つけることができます:

echo $PATH

通常、/usr/local/bin/が含まれているので、ダウンロードフォルダからこのコマンドを実行してngrokをそこに移動できます:

sudo mv ngrok /usr/local/bin/

次に、ngrokは通常のユーティリティのように機能します。Windowsでは、システムのPATHに新しいフォルダを追加する必要があります。

実行する前に、アカウントで認証する必要があります。これを行うには、ダッシュボードのステップ3に表示されているauthtokenをコピーし、コマンドに貼り付けてください:

ngrok authtoken xxxxxxxxxx

これにより、あなたのアカウントが接続され、トンネルを作成することができます。

Ngrokトンネルの設定方法

トンネルを作成するには、接続するローカルポートとトンネルが使用するプロトコルを指定するだけです。例えば、ローカルウェブサーバーをトンネリングするには、次のコマンドを実行します:

ngrok http 80

現在のオープン接続とセッションに関する情報を表示するGUIが開きます。トンネルのURLは「転送」の下に表示されており、それをコピーしたいと思います。

構成ファイルから一度に複数のトンネルを開始することもできます。この構成ファイルは、ホームディレクトリにある~/.ngrok2/ngrok.ymlにあります。デフォルトでは、このファイルは自動トークンを除いて空です。トンネルを手動で追加できます：

tunnels:



 http:








    



 proto: http



 addr: 80



 tcp:



 proto: tcp



 addr: 9090

その後、一度にすべてを開始することができます:

ngrok start --all

または、トンネル名を手動で指定して開始します。トンネルのすべてのプロパティと、ngrok ドキュメントにあるより多くの例の設定ファイルを見つけることができます。

言語用のラッパークライアントを使って、ngrokトンネルをプログラム的に作成することもできます。たとえば、Nodeのラッパーを使用すると、ウェブサーバーが自動的に自分自身を転送するようにできます。

const url = await ngrok.connect({proto: 'http', addr: 80});

...これは、あなたが使用するために転送URLを変数に保存します。

Ngrok インスペクター

ngrokがウェブアプリのデバッグに特に便利なもう一つの機能は、トンネルインスペクターです。トンネルを開始すると、通常はlocalhost:4040というウェブインターフェースのためのURLが提供されます。これをブラウザで開くと、トンネルを通るすべてのリクエストのリストとその内容およびレスポンスが表示されます。

PostmanのようなAPI開発環境には敵わないが、クライアントとサーバーの間のトラフィックを調査するには非常に便利です。アプリケーションが自動的に行うリクエストを含めて、すべてをキャプチャします。

ここに「ステータス」とラベル付けされた別のタブがあり、各トンネルの接続時間や秒あたりの接続数など、トンネルの健康状態を表示します。

関連記事: