この記事は traPアドベントカレンダー2023 12日目の記事です！
外部の端末から、localhostに接続したい場合に利用できます。
ngrokを使えば、localhost:3000 に立っているアプリケーションをngrok http 3000のコマンド一つでスッと外部に公開することができます！
やっていき
1. brew install
$ brew install ngrok/ngrok/ngrok
2. Sign Up & Login
ngrokの公式サイトにアクセスして、登録した後ログイン。
MFA(2段階認証)の設定を求められるので、お好きなAuthenticatorのアプリをインストールして（私は Google Authenticatorを使っています）、表示されたQRコードを読み込みます。ログイン時は、表示されているワンタイムパスコードを入力することでログインできます
ちなみに、Authenticatorアプリは既定のプロトコルに従えば誰でも作ることができるらしく、学科の友人がAuthenticatorアプリを自作してて衝撃を受けました。
3. Authtoken を取得
ダッシュボード画面のGetting Started > Your Authtoken からトークンをコピーします。
4. ngrok をセットアップ
ターミナルに移り、以下のコマンドを打ちます。
$ ngrok config add-authtoken <your-token>
使い方
接続
$ ngrok http 80
を実行すると
ngrok (Ctrl+C to quit)
Introducing Cloud Edges for all ngrok users: https://ngrok.com/r/cloud-edges
Session Status online
Account <自分のメールアドレス> (Plan: Free)
Version 3.3.4
Region Japan (jp)
Latency 9ms
Web Interface http://127.0.0.1:4040
Forwarding https://xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx.ngrok-free.app -> http://localhost:80
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00 0.00 0.00
と表示されます。
Forwarding の https://xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx.ngrok-free.app が外部に公開されているURLです。このURLに他の端末からアクセスすると、ngrokで繋げられたlocalhost:80にアクセスすることが出来ます。
注
ただし、localhost:80に何も立っていない状態だと、URLにアクセスしても以下のようなエラーが出ます
Traffic was successfully tunneled to the ngrok agent, but the agent failed to establish a connection to the upstream web service at localhost:80. The error encountered was:
dial tcp [::1]:80: connect: connection refused
（あなたのPCの）ngrok agentには接続できたけど、localhost:80 にある Webサービスに接続できなかったよ！
それはそう。
切断
Ctrl + Cで簡単に公開を止めることができます。
ちゃんと止まっているか不安な場合は、公開しているlocalhost の一覧をWeb上のダッシュボードの Tunnels > Agents から確認、停止できます。ただし、ngrokコマンドからは確認できない(n敗)
認証
ngrokを使うとやはり不安になるのはセキュリティ面です。月5ユーザーまでではありますが、各種OAuthプロバイダーと連携してホワイトリスト形式でアクセスできるユーザーを限定できます。
以下のような感じです。
ngrok http 80 --oauth=google --oauth-allow-email=example@gmail.com,example2@gmail.com
以前は有料プランに入る必要があったので、嬉しい変化ですね。5人を超える場合は月15ドルの有料プランに入る必要がありますが、個人利用や簡単なデバッグ程度なら十分でしょう。
利用例
1. 成果物の共有
現状の成果物をngrokを通して共有するといったことができます。
例えば、フロントエンドの開発をしていて現在の進捗を他の人に共有したい時に、npm run dev等でローカルのポートにアプリケーションを立てて、ngrokを通じて公開するといったことができます。ただし最近はVercelのPreview Deployments機能が便利すぎて（ブランチ毎のプレビュー環境を作成してくれる）、利用機会が減ってきました。
Vercel2. 外部の端末で動作確認したい
例えばフロントエンドを実装している際に、CSSやレスポンシブ対応の実装の際にスマホやiPadの実機で確認しながら開発したいといった場合が考えられます。こういった事例はまさにngrokの良さが光るところで、コマンド１つで外部からアクセスが可能になります。
他には以前に芸術の課題で、「画像を交換することで人と人を繋げるSNS」を題材に開発したことがあり、その際に複数の端末(スマホとタブレット)でもちゃんと動作するのかの確認に利用しました。
3. 外部との連携箇所のデバッグ
前にSlack Boltを用いてSlack上で対話ボットを作ってしていた時に、Slack Boltのリッスンの挙動がドキュメントを読んでもよく分からず沼ったことがありました。Slack側でRequest URLを設定しないとメッセージをリッスンすることすらできないため、コードを修正しては長い時間かかけてデプロイして試すということを繰り返していました。
こういう時に、サッとローカルで立ち上げてngrokで公開し、Slackから直接ローカルにリクエストを飛ばすようにすれば、毎回の試行錯誤でデプロイする必要がないので、かなり開発体験がよくなります。デバッグの手数をたくさん持っていくことは開発速度にダイレクトに影響しますし、知っておいて損はないんじゃないかと思います。
下の記事はSlack BotとLINE Botの差こそあれど、同じことをやっていますね。
ひょうどう
4. ローカルのリソースを使いたい時
一番の用途はこれですね。今回ブログを書くということで、ngrokの記事をZennやQittaで漁っていたのですが、一番の多かったのはこの用途でした。
真っ先に思いつく事例としては、円安の影響も受けて高くなっているGPUインスタンスの代わりに、自宅のデスクトップPCのGPUを利用して外部から機械学習を回したい時にngrokを利用できます。flaskでWebサーバーを立てて、ngrokからそのアプリケーションに向けてトンネルを開ければ、外から自由に実行できます。
他の事例としては、ラズパイに外部からアクセスしたい時などがありそうです。
手塚裕貴
明日は
@Kirby0717さんの「おっきい数の話」と、@kegraさんの「setIntervalの第二引数には気を付けろ」です。お楽しみに！！！
