はじめに
簡単なWebアプリケーションを作成し、それをスマホから確認する場合、通常であればサーバーを立ててWeb上に公開する必要があります。
しかし、パッと確認したいときにはちょっとした手間も惜しいものです。
そんなときに使えるのがngrokというサービスです。
ローカル上で動かしているサービスを、ngrokが提供する一時的なURLを通じて、インターネット上に公開することができます。
事前準備
アカウント作成
アカウントを持っていない場合には以下から作成してください。
Googleアカウント、もしくはGithubアカウントから作成することもできます。
また、ログインする際にはMFA（多要素認証）の設定が求められるので、任意のAuthenticatorのアプリを使用します。
ngrokのインストール
ログイン後に、それぞれの環境に適したインストール方法が提示されます。
私はMacを使用している、かつhomebrewを導入しているため、以下のコマンドでインストールしました。
brew install ngrok
これでngrokコマンドが使用できるようになりました。
設定ファイルに認証情報を書き込み
ngrok configで設定ファイルに認証情報を書き込みます。
ngrok config add-authtoken [token]
[token]は自身のトークンに置き換えます。
トークンはngrokのページの「Your Authtoken」から確認できます。
ここまでで準備は完了です。
CLIを使ったngrokの基本的な使い方
ローカルで起動しているアプリをWebに公開する
自分が作成したアプリをローカルで起動した後、ngrok httpを使用します。
ngrok http [address:port]
私はviteを使用して作った適当なアプリで試すことにします。
ローカルでのアプリの表示はこのようになっています。
コマンドを以下の通り実行しました。
ngrok http http://localhost:5173
ターミナルの表示が変わります。
着目してほしいのは「Forwading」に表示されている「https」から始まるURLです。
これが、ローカルのアプリケーションに外部からアクセスするためのURLになります。
試しに、このURLでアクセスしてみましょう。
初回アクセス時は、このような警告画面が表示されます。
問題ないので、「Visit Site」をクリックします。
アクセスに成功しました。
先ほどローカルで確認したものと同じ画面が表示されています。
着目すべきはURLの部分で、http://localhost~ではなく、https://...となっています。
つまり、外部に対してローカルで立ち上げたアプリが公開できているということです。
ターミナルに戻ります。
「HTTP Requests」として、どのようなリクエストがあったのかが出力されているのがわかります。
コマンドを1つ叩くだけで、Web上に公開することができました。
注意点として、このURLはコマンド実行のたびに変わるので、静的なアドレスにしたい場合は別途設定が必要になります。