ngrokでローカル環境をネット公開する

はじめに

この記事はプログラミングスクールRUNTEQのAdventCalendar2023 23日目に参加しています。

11月から晴れてエンジニアになることができました。
入社してからngrokで苦戦したので備忘録にまとめておきます。

ngrokとは

自身のローカル環境を、インターネット上にアクセス可能にするツールです。
なので、まだプルリク投げていない段階の開発状態を、他者のPCでも見られるようにできます。
macOS, Windows, Linuxにも対応しています。

開発環境

• Macobook M1 Pro / Sonoma 14.2
• ngrok version 3.5.0

インストール

公式サイトからユーザー登録します。
その後、ガイダンスに沿ってコマンドを実行しましょう。

Homebrew経由でngrokインストール

brew install ngrok/ngrok/ngrok

認証トークン追加

ngrok config add-authtoken **********

ローカルポート80へドメイン転送

ngrok http 80

URLが生成される

ngrok                                                                                                                                        (Ctrl+C to quit)

Build better APIs with ngrok. Early access: ngrok.com/early-access

Session Status                online
Account                       your_name (Plan: Free)
Version                       3.5.0
Region                        Japan (jp)
Latency                       -
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://***-***-***-***.ngrok-free.app -> http://localhost:80

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

「Forwarding」欄に、毎回新しいhttps://***-***-***-***.ngrok-free.appが生成されます。
ここにアクセスして、「Visit Site」を実行、無事表示されたらOKです！
他の人にもこのURLを共有すればアクセスしてもらうことができます。

ログインが弾かれる場合 （Ruby on Railsアプリ）

ngrokを使用すると、ローカル開発環境に対して新しい外部ドメインが割り当てられます。
このドメインの変更は、セッションやCSRFトークンの検証プロセスに影響を与える可能性があり、ログインが弾かれることがあります。
もし弾かれた場合、protect_from_forgeryをSessionsControllerやApplicationControllerに追記します。
各リクエストに対して一意のセキュリティトークン（CSRFトークン）を生成してくれるので、ログインを正常に処理してくれます。

おわりに

以上になります！
プログラミングスクール生の時は、自分の開発環境を自分で操作しながら、相手に画面共有して見せていました。
しかし、ngrokでURLを渡せば、自分と複数人の相手が別々の操作をすることができます。
もし便利そうだなと感じた方は、ぜひ使ってみてください。