サマリ
ngrokをインストールして、ローカルのWebアプリ（Webページ）を外部公開してみました。
背景
自宅で作成したWebアプリを外から触ってみたいと思い、
ngrokを試してみました。
ゴール
ngrokのインストールおよび外部からのWebアプリへのアクセス
対象読者
- ngrokが気になっている方
- ローカルWebアプリを外から触りたい方
前提
必須：インターネット環境
推奨：特になし
環境
- ホストOS：Window11 Home 24H2
手順
ではいきます！
そもそも
ngrok（エングロック）とは、
What is ngrok?
ngrok is a globally distributed reverse proxy that secures, protects, and accelerates your applications and network services.
You can think of ngrok as the front door to your applications.
ngrok is environment independent because it can deliver traffic to services
running anywhere with no changes to your environment's networking. Run your app
on AWS, Azure, Heroku, an on-premise Kubernetes cluster, a Raspberry Pi, and
even your laptop. With ngrok, it all works the same.
ngrok is a unified ingress platform because it combines all the components to
deliver traffic from your services to the internet into one. ngrok
consolidates together your reverse proxy, load balancer, API gateway, firewall,
delivery network, DDoS protection and more.
公式サイトより
なんかいろいろ書いてありますが、
冒頭の記載で、
ngrokは、世界中に分散配置されたリバースプロキシであり、アプリケーションやネットワークサービスを安全に保護し、高速化します。
とのこと。
あまりピンとこないですが、
ローカル環境のWebアプリを外部公開できるものみたいです。（ざっくり）
nginxなどでも公開できるようですが、
ドメイン取得不要で、コマンド1本実行するだけで簡単に公開できるみたいなので、
ちょっと開発中のWebアプリを外部環境から使ってみたい場合はngrokが楽そうでした。
アカウント作成
公式サイトにアクセスします。
GET STARTED（FOR FREE）をクリックします。
好きなものを選択します。（自分の場合はGitHubにしました）
Authorize ngrok-privateをクリック
アカウントを持っていなかったので、作成するかを聞かれるので、作成しました。
（ちなみに、キャンセルを押すと元の画面に戻るので、作るしか選択肢はないです。）
すると、次に以下のように多要素認証の導入を求められます。
一応やることにしました。（GoogleAuthenticatorや、Microsoft Authenticatorなどなんでもいいので、多要素認証のアプリをインストールの上進めてもらえたらと思います。）
こんな感じでリカバリーコードというものが発行されます。
これは認証アプリをなくした時等に使える緊急事態用パスワードのようです。
仕事における役割と興味がある機能についてチェックします。
continueをクリックすると、以下の画面に遷移します。
次からインストールです。
インストール
先ほどの画面のMicrosoft Store Installerをクリックします。
余談ですが、wingetでもできそうですが、それで入手できるngrokは古いので推奨されていなさそうです。（下図参照）
なのであまりかっこよくない（？）ですが、おとなしくMicrosoft Storeからインストールします。
Authtokenの設定
左のサイドバーにあるyour authtokenからコピーします。
PowerShellで以下のコマンドを実行します。（"認証トークン"部分はコピーしたものを貼り付け）
ngrok config add-authtoken "認証トークン"
これで行けているはずです。
試しにバージョン確認します。
おぉ～
ローカルでのHTTPサーバ起動
今回、試すために、サンプルのHTMLファイルを作成し、
PythonでHTTPサーバ起動します。
ngrok起動
指定したポート番号でngrokのコマンドを実行します。
ngrok http "ポート番号"
今回は"ポート番号"部分は8080
表示されたURLにアクセス
こんな感じで表示されました。
このForwardingというところに書かれたURLが
外部からアクセス可能なURLとなります。
試しに、スマホ（Wi-Fiは切った状態）からアクセスしてみました。
最初に警告が出ました。
信頼できる人から送信されたものだったらアクセスして、個人情報やクレジット情報などの公開には十分気を付けて的な内容だけなので、
気にせずVisit Siteをクリックします。
おぉ～無事表示されました！（ちょっとわかりにくいですが）
結果・まとめ
無事ngrokのインストールとサンプルサイトへ外部からアクセスできました。
ローカルで作ってまだ外部公開していないアプリを試験的に試すのにはちょうどいいですね。