ngrok とは

ローカルで実行しているWebサーバーを外部（インターネット側）に公開する仕組みです。使い方は簡単でWebサーバーと同じ環境で ngrok を動かすことでトンネリングにより外部公開することができます。

ちなみにこれまで無料枠で出来たことが 2024/6 現在できないなど仕様変更があります。そこらも含め自分の整理も含め記事にしてみました。

ngrok を使用するためには

ngrok を使用するためには、アカウント登録が必須となりました。以前は（Webの記事を見る限り）、アカウント登録せずともトンネリングが使用できていたようです。

2024/6 現在無料枠でできること（アカウント登録必須）
　・無料の静的ドメインで HTTP アプリ、Webhook、API を提供
　・テスト用の一時的/ランダムドメイン
　・OAuth を使用してサービスへのアクセスを保護および制限
　・Webhook のセキュリティ検証
　・API および Terraform プロバイダー
　・tcpトンネリングは、クレジットカード登録が必要（オーソリのみ/課金されません） ※ほんと？

※ngrok を使うと簡単にバックドアを作成できることからこんなことも・・・

アカウント登録とAuthトークン取得

https://ngrok.com/ にアクセスしてアカウント登録します。メールアドレス/GitHub/Googleアカウントでアカウント登録することができるので好きな方法で登録します。

登録が終わるとトークンが払い出されるので Getting Started - Your Authtoken メニューを表示しトークンをコピーします（トークンの再作成も可能）。

Authトークンの設定

Getting Started - Setup & Installation から、ngrok アプリケーションをインストールします。
使用できるプラットフォームが沢山あるのはいいですね。ngrok アプリケーションをインストールしたら、初めに Authトークンを設定します（下記は Linuxの例）。

# ngrok config add-authtoken 取得したトークン

localhostの公開（httpトンネリング）

アカウントの登録とAuthトークン設定することで、httpトンネリングを使用することができます。Webサーバは、Apacheでもnginx などお好みでよいと思います。

# ngrok http 80

正常に起動すると下記のような画面となります。
表示されている https://0981-207-65-166-31.ngrok-free.app が、トンネリングされた公開用URLとなります。ちなみに 0981-207-65-166-31 部分は動的に生成されます。

ちなみにAuthトークンを設定せずにトンネリングを使用すると以下のエラーが表示されます。

ERROR:  authentication failed: Usage of ngrok requires a verified account and authtoken.
ERROR: 
ERROR:  Sign up for an account: https://dashboard.ngrok.com/signup
ERROR:  Install your authtoken: https://dashboard.ngrok.com/get-started/your-authtoken
ERROR: 
ERROR:  ERR_NGROK_4018
ERROR:

固定のドメインとしたい場合（ngrok 無料枠）

ngrok 無料枠では、xxxxx-yyyyyyyy-zzz.ngrok-free.app(xxxxx-yyyyyyyy-zzz部分) 固定の静的ドメインを使用することができます。操作は簡単で Cloud Edge - Domain メニューから Create domain ボタンを押下することで作成することができます。

xxxxx-yyyyyyyy-zzz が固定化することで、下記のように起動することで固定ドメインとして使用することができます。

カスタムドメインの設定方法（有料）

所有しているドメインに対し ngrok で生成した固定ドメインを紐づけることで、カスタムドメインを使用することができます（有料）。

たとえば、foo サブドメインの設定を・・・ MyDNSならこんな感じで設定します。

無料枠で試すと以下のエラーが表示されます。

ERROR:  failed to start tunnel: Only Personal, Pro and Enterprise plans may bind custom hostnames.
ERROR:  Failed to bind the custom hostname 'foo.所有ドメイン' for the account 'hagehage@gmail.com'.
ERROR:  This account is on the 'Free' plan.
ERROR:  
ERROR:  Upgrade to a paid plan at: https://dashboard.ngrok.com/billing/subscription
ERROR:  
ERROR:  ERR_NGROK_314
ERROR:  https://ngrok.com/docs/errors/err_ngrok_314
ERROR:

ちなみにお値段みると。”開発者 1 人あたり月額 8 ドル（年間請求）（月額請求 10 ドル）” がよさげですが、この円安の今（2024/7 時点で 161円）ちょっとだけの勉強とはいえお高い勉強代です。

basic認証やOAuth(Google認証)を使用

URLがランダムに生成されるのはよいとしてもセキュリティ面に不安がある場合は、basic認証やOAuth(Google認証)を使用することができます。

ngrok 使ってみて

外部公開する前のテストとしては、自分でドメイン設定の細かいとこすっとばして使用できるため非常に便利だと思います。ただね・・・ローカルサイトの公開が簡単にできるとは言え会社で使用するのは…NGですね。これ。理由としては、よほど隔離されたネットワーク環境で使用するならよしだけど会社のネットワーク越しでやるとだめでしょう。

ただ「wifi＋PC の組み合わせ」のようにしておけば、小規模なイベントなどで使用するのにはいいかなと思いました。

2024年版 ngrok を使用したローカルサイトの公開について（アカウント登録など必要）