ngrokインストール方法と簡単な使い方

最近、ngorkという便利なツールがあることを知りましたので、そのインストール方法と使い方を紹介します。
ngrokは「エングロック」と発音し、トンネリングを用いてローカルサーバーを全世界に公開できるツールです。
パソコン上のWebカメラ動画ストリーミングも公開可能という優れものです。
Windows、MacOS、Linux、FreeBSDで使えるそうです。
ここでは、Windows10の場合で説明します。

【目次】

1. ngrokサインアップしておく
2. ZIPファイルをダウンロードして解凍し、ngrok.exeファイルを実行してみる
3. Authtokenを設定し、Basic認証ができるようにする
4. ローカルサーバーを起動しておく
5. トンネリング地域を日本にし、Basic認証有りで公開するコマンド
6. ngrokを終了する
7. URLにBasic認証を含めてブラウザからアクセスする方法（非推奨ですよ）
8. トラフィック調査ウィンドウで監視できる
9. まとめ

ngrokサインアップしておく

以下のngrokサイトを開いて、「Get started for free」 をクリックします。

https://ngrok.com/

サインアップしなくてもngrokをフリーで使うことはできますが、セキュリティ強化のためのBasic認証を使うためにはサインアップが必要です。
それには現時点ではメールアドレス登録だけで済みます。
GitHubやGoogleのアカウントを持っていれば、それでログインすることもできます。

ZIPファイルをダウンロードして解凍し、ngrok.exeファイルを実行してみる

Windows用、MacOS用、Linux用、FreeBSD用のファイルがダウンロードできます。
私の場合は、「Download for Windows」というボタンをクリックして、Windows10 64bit用のZIPファイルをダウンロードしました。

そのZIPファイルを解凍すると、
ngrok.exe
という単独の実行ファイルがありますので、自分の好きなフォルダに保存しておきます。
これは単独のexe形式ファイルなので、扱いが楽ですね。

では、ngrok.exeファイルを起動すると、Windows10では下図の様なコマンドプロンプトウィンドウが開きます。

(図01)

ngrok起動初期画面

この説明文をDeepLで翻訳してみると、こんな感じでコマンドの使い方が書いてありました。

名前
   ngrok - ローカルポートを公開URLにトンネリングし、トラフィックを検査する

説明
    ngrokは、NATやファイアウォールに囲まれたローカルネットワークのサービスを
    安全なトンネルを介して公衆インターネットに公開します。ローカルウェブサイトの共有、Webhookコンシューマの構築/テスト
    Webhook コンシューマーの構築/テスト、個人サービスのセルフホスティングなどが可能です。
    各コマンドの詳細なヘルプは「ngrok help <command>」で確認できます。
    ngrok の Web インターフェースの http://localhost:4040 を開いて、トラフィックを検査します。

EXAMPLES
    ngrok http 80 # ポート 80 のウェブサーバーの安全な公開 URL
    ngrok http -subdomain=baz 8080 # 8080 番ポートを baz.ngrok.io で利用可能にします。
    ngrok http foo.dev:80 # localhost の代わりに host:port にトンネリングします。
    ngrok http https://localhost # ローカルの https サーバーを公開する
    ngrok tcp 22 # 任意の TCP トラフィックをポート 22 にトンネリングする
    ngrok tls -hostname=foo.com 443 # foo.com の TLS トラフィックを 443 番ポートに送る
    ngrok start foo bar baz # 設定ファイルからトンネリングを開始

VERSION
   2.3.40

AUTHOR:
  inconshreveable - alan@ngrok.com

COMMANDS:
   authtoken 設定ファイルにauthtokenを保存する
   credits 作者とライセンス情報を表示
   http HTTPトンネルを開始する
   start 設定ファイルから名前を指定してトンネルを開始する
   tcp TCPトンネルを開始
   tls TLSトンネルを開始
   update ngrok を最新のバージョンに更新します。
   version バージョン文字列を表示します。
   help コマンドの一覧や 1 つのコマンドのヘルプを表示します。

ngrok はコマンドラインアプリケーションなので、このターミナルプロンプトで「ngrok.exe http 80」と入力してみてください。
このターミナルプロンプトで「ngrok.exe http 80」と入力すると、80 番ポートが公開されます。

www.DeepL.com/Translator（無料版）で翻訳しました。

Authtokenを設定し、Basic認証ができるようにする

ngrokを使うにあたって、最低限のセキュリティとして、Basic認証を使うのは必須だと思います。
それを使う為には、Authtokenを設定しておきます。

ngrokのサイトにログインすると、下図の様に左側に「Your Authtoken」という項目があるので、そこを開いて、Authtokenをコピーしておきます。

(図02)

Authtokenを取得

これは第三者に知られないように注意してください。

次に、ngrokのコマンドプロンプトで、以下のように入力します。
（Windows10パソコンの場合）

ngrok authtoken xxxxxxxxxxxxxxxxxxxxxxxxx

※Windows PCの場合は、最初の「./」は不要です

(図03)

コマンドプロンプトでAuthtoken設定する。

すると、Windows10パソコンの場合、パソコンディスク内の以下のパスにAuthtoken入りの ngrok.ymlファイルが保存されます。（user-nameは自分のPCのユーザー名）

C:\Users\user-name\.ngrok2\ngrok.yml

これで、コマンド入力時に毎回Authtokenを入力しなくて済み、自動で入力しくれるようになります。

ローカルサーバーを起動しておく

ここで、ローカルサーバーを起動しておきます。

ただ、残念ながら、file:///C:～のようなアドレスで開くローカルファイルは公開できません。
Apacheなどのサーバーを使うか、ラズパイやESP32などで、ローカルIPアドレスが発行されているサーバーを使わねばなりません。

トンネリング地域を日本にし、Basic認証有りで公開するコマンド

Basic認証を使ったとしても万全ではないのですが、最低限のセキュリティ対策としてBasic認証を使う場合の個人的にお勧めの設定コマンドを紹介します。

例えば、ご自分のネットワーク上のマイコンのローカルIPアドレスが、192.168.0.10で、ポート番号が80番の場合、以下のコマンドを入力します。

ngrok http -auth="user-name:password" -region=jp 192.168.0.10:80

-authでBasic認証を設定します。
ユーザー名とパスワードの間にスペースなしのコロン「:」を入力します。

-regionで(jp)として地域を日本にしておきます。
設定しない場合、デフォルトで米国(us)になります。そうすると、通信速度が遅くなるかもしれません。

そのコマンドでエンターを押すと下図の様な画面になります。

(図04)

ngrokサーバー公開し、URLをコピーしておく。

上図のようにhttpsのところのURLをコピーします。
Windwos10のコマンドプロンプトの場合、範囲選択するには下図の様に画面上で右クリックして、「マーク」を選択すれば範囲選択できて、コピーできるようになります。

(図05)

コマンドプロンプトのURL範囲選択は右クリックでマークを選択する。

そうしたら、ブラウザを開き、URL入力欄に貼り付けすると、下図の様にBasic認証画面が出ます。
先ほど設定したユーザー名とパスワードを入力します。

(図06)

ブラウザのBasic認証画面

これでログインすれば、ローカルサーバーが公開できると思います。

ngrokを終了する

ngrokを終了させる方法は、下図の様にウィンドウの右端上に表示されています。
つまり、「Ctrl」＋「c」キーを打つと画面がクリアーされ、トンネリングサーバーが終了します。
その後にウィンドウを閉じればOKです。

(図07)

ngrokのトンネリングを終了するにはCtrl+c

ここで注意！
この操作をせずにウィンドウを閉じると、まだトンネリングサーバーが生きている場合があるので注意してください。
パソコンを再起動すれば、トンネリングサーバーは終了します。

URLにBasic認証を含めてブラウザからアクセスする方法（非推奨ですよ）

正直言って脆弱性があるため、あまりお勧めしませんが、URLにBasic認証ユーザー名およびバスワードを入れ込むという方法があります。
Basic認証はユーザー名やパスワード等を入力するのが面倒ですが、URLに入れ込むと入力が楽になります。
（※これは、あくまでテスト段階で作業を簡略化するためだけの方法と思って下さい。）
以下の感じです。

https://user-name:password@xxxxxxxx.jp.ngrok.io

このように、ユーザー名とパスワードの間に半角コロン(:)を入れ、その後にアットマーク(@)を入れます。
その後にngrokのURLを入力すれば良いわけです。
これは、ブラウザのシークレットモードでは機能しませんので注意してください。

更に注意しなければならないことは、必ずSSL通信のhttpsを使う事は大前提ですが、いくらSSL通信だからといってBasic認証をURLに含めてアクセスすると、履歴がブラウザに残りますし、経由しているサーバーにも履歴が残りますし、何らかの方法でユーザー名とパスワードが漏れる可能性が無いとは言えません。そのことをよく認識しておく必要があります。
URLにパスワードなどを含めて送信することの脆弱性はIPA(情報処理推進機構)に以前掲載されたことがありましたので、検索してみてください。

トラフィック調査ウィンドウで監視できる

あと、ngorkの便利な機能として、トラフィック調査ができるツールが装備されています。

ブラウザのURL入力欄に、
http://localhost:4040/
と入力すれば、下図の様なローカルサイトが開きます。

(図10)

ngrokのトラフィック解析ツール

コマンドプロンプトでもある程度確認できますが、これは結構便利ですよ。
何秒前にアクセスしたかが一目瞭然ですし、コマンドクエリの内容もわかります。
なかなかngrokは良いですね。

まとめ

以上、ngrokのインストール方法と簡単な使い方でした。

ローカルサーバーを全世界に公開できるこのツールは素晴らしいですね。
SSLでも公開できるところも素晴らしいです。
かなり完成されたツールだなぁという印象でした。

そして、Basic認証が使えるのはありがたいですね。
Webカメラのストリーミングも使えたので、とても優れたツールだと思います。
自前IoT化に役立つと思いますよ。

では、今回はここまでです。
次回はM5Cameraのストリーミングをngrokで行う方法を紹介します。
すぐにアップする予定です。
ではまた…。