はじめに

ngrokのLinux版をWSL2(Ubuntu)に導入する方法を紹介します。

環境

    WSL2
    Ubuntu 20.04.5 LTS
    ngrok version 3.2.2

ngrokとは

オープンソースのリバースプロキシツールであり、ローカルホスト上で実行されているWebサーバーを公開するためのトンネリングサービス。つまりngorkは、ローカルホスト上で動作しているアプリケーションを外部のインターネットからアクセス可能にしてくれるツールである。ちなみに、読み方は「エングロック」です (nginx的な...)。

インストール

Ubuntu環境のため、https://ngrok.com/download からLinux版をダウンロードする
圧縮ファイルのあるディレクトリ(デフォルトのままであれば "C:\Users[ユーザ名]\Downloads")をUbuntuの/usr/binへ移動する
このタスクを実行するには、WSLを使用してUbuntuのターミナルを開く必要がある。次に、以下の手順を実行して、ファイルを移動できる。
1. Ubuntuのターミナルを開き、移動先のディレクトリに移動するために以下のコマンドを実行する。
  cd /usr/bin
2. 移動したいファイルがあるフォルダーに移動するために以下のコマンドを実行する。
  cd /mnt/c/Users/[ユーザ名]/Downloads
  このコマンドは、Windowsのダウンロードフォルダーに移動する。ダウンロードフォルダーのパスが異なる場合は、そのパスに応じて変更すること。
3. 移動したいファイルを、以下のコマンドを使用して移動する。
  sudo mv [ファイル名] /usr/bin/
  　　ここで、[ファイル名]は移動したいファイルの実際のファイル名に置き換える。今回であれば、ngrok--v3-stable-linux-amd64.tgzとなる。
移動した圧縮ファイルを展開する
※もちろん、展開してから移動してもよいが、今回は先に移動してから展開する方法を取る。
tar xvf ngrok-v3-stable-linux-amd64.tgz
圧縮ファイルを削除する
sudo rm ngrok-v3-stable-linux-amd64.tgz
ngrokへアクセスできることを確認する。
ngrok version
ngrok version 3.2.2
ngrokが展開されたら、ngrokの管理画面のsetup & Installationに記載されている以下のコマンドを実行
ngrok authtoken [token]

アクセス方法

ngrok http [port]
80番ポートを外部に公開する場合はngrok http 80になる。
下記の画面が表示されるので、アクセスURLからブラウザでアクセスする。

ngrok実行結果

ngrok                                                       (Ctrl+C to quit)              
Announcing ngrok-rs: The ngrok agent as a Rust crate: https://ngrok.com/rust              
Session Status                online               
Account                       XXXXXXXX (Plan: Free)                          
Version                       3.2.2                                         
Region                        Japan (jp)                                    
Latency                       30ms                                          
Web Interface                 http://127.0.0.1:4040                         
Forwarding                    https://XXXXXXXX.ngrok-free.app -> http://localhost:80                                                                           
Connections                   ttl     opn     rt1     rt5     p50     p90                                               
                              0       0       0.00    0.00    0.00    0.00

Web Interfaceで示されたhttp://127.0.0.1:4040 は、作成したトンネルの利用状況を閲覧できるコンソールです。トンネルを通したHTTP通信の全情報を閲覧できるため、デバッグ時にも役立ちます。
Forwardingで示されたhttps://?????.ngrok-free.appが外部向けのURLです。ここへの接続がhttp://localhost:80にトンネリングされています。

おわりに

同じ過ちを皆に繰り返してほしくないので、ngrokを触った背景を述べる。(ngrokとは直接関係ないのでここでサイトを閉じても大丈夫) 一言でいうと一か月間Herokuを利用できなくなってしまったからだ。Herokuでwebアプリをデプロイしようと思い、クレジットカードの登録をしていたのだが、英語の注意書きをよく見ずにクレジットカードの登録を削除した結果、利用できなくなった。(笑) ngrokを触るきっかけにはなったけど。焦らずに注意書きにはしっかり目を通そう。

参考記事

https://www.nalabo.net/blog/2022/04/09/1292
https://qiita.com/mininobu/items/b45dbc70faedf30f484e
https://qiita.com/RayDoe/items/8a68f40d165819b82463