最近、久しぶりにWebアプリ開発の試行錯誤をする機会があり、その時に知った便利ツールの紹介とそのツールに関するトラブルシューティングです。
Problem
開発マシン上で開発中のWebアプリに、WWW経由でHTTPS通信を行いたい。
なお、「開発マシン」は会社の社内NW（あるいは学校のNWなど）に接続しており、あらかじめ決められたフォーワードプロキシを経由する以外にはWWWへのアクセスができない。
Solution
ngrok（えんぐろっく）というツールを使います。
ngrok はローカル環境で稼働するWebサーバーを動作検証などのためにWWW（インターネット）に公開するためのツールです。
これにより他のシステムや開発メンバーがWWWを経由して開発中のWebアプリにHTTP/Sでアクセスすることが可能になります。
公開には *.ngrok.io のサブドメインが利用され、* の部分には都度ランダムな値が設定されます。
またこのようなフォーワーディングの他にも、HTTP/S通信内容を解析したり、HTTP/S要求を再実行したりすることもできるようです。
具体的な手順は次の通り（フォーワードプロキシが介在しない環境であれば、手順3～6は不要です。）：
- 開発マシンに Node.js をインストールする。直接インストールでも
nvm経由でも構わない。 - シェル／コマンドプロンプトで次のコマンドを実行する：
npm install -g ngrok - ngrok のサイトでサインアップする。
- ダッシュボードの Your Authtoken で認証トークンを取得する。
- ngrokのリファレンス Default configuration file location を参考にして所定の場所に次のファイルを作成する：
ngrok.yml
- テキストエディタで
ngrok.ymlを開きauthtokenとhttp_proxyのキー／値をYML形式で記述する：
- 開発中のWebアプリを起動し、開発サーバー上でHTTPリクエストを待ち受ける状態にする（例：
http://localhost:8080）。 - シェル／コマンドプロンプトで次のコマンドを実行する：
ngrok http ポート番号（例：ngrok http 8080） - シェル／コマンドプロンプトに次のように表示されるのを待つ：
-
Forwarding欄に表示されたURLを使い、Webブラウザでアクセスする。
ところで、、、
この記事を執筆している時点（2021/12/08）で、Chromeブラウザを使って ngrok で作成されたURLにアクセスをすると、以下のような警告画面が表示されてしまいます：
FirefoxやEdgeなど他のブラウザでは問題ありません。
この画面そのものについては「詳細」→「安全でないこのサイトにアクセスする」をクリックするとアクセスを続行できますが、この警告内容を見ていると ngrok 経由のアクセスがセキュリティ対策ツールなどにより遮断されてしまうケースもありそうに思えます。。
Background
Webアプリ（WebAPIも含む）を開発するとき、単にWebアプリを作って動かせばよいのであれば比較的シンプルですが、そのWebアプリに別のアプリからHTTPSリクエストで接続する必要がある場合は厄介です。
本番稼動のためのWebサーバーであれば、（LBやWAFなどの介在の有無はともかく）WWWに公開されているでしょうし、SSL証明書もインストール済みでしょう。
しかし、ふつう開発マシンはWWWに公開しませんし、SSL証明書のインストールもしません。
ngrok （えんぐろっく）というツールを使えばこのような問題が解決します。都度発行されるランダムなドメインを使って、開発サーバーを一時的にWWWに公開することができるのです。
ところで ngrok を使う場合に会社や学校のNWで利用されることの多いフォーワードプロキシが障壁になります。前述の手順のうち3～6を実行しないと、このプロキシにより ngrok の動作が妨げられてしまいます。