ngrokを用いたローカル開発環境の公開方法

はじめに

Rails 7 で LINE Messaging APIを取り入れたオリジナルプロダクト（ポートフォリオ）の作成中、メッセージの送信テストを行うために公開されたURLが必要になりました。
ngrok で簡単に実現できたのでまとめました。

開発環境

• OS：macOS Ventura 13.2.1
• Ruby：3.2.2
• Rails：7.0.6
• Homebrew 4.0.28

ngrokについて

ngrokとは

読み方：エン・グロック
開発中のローカルサーバーをインターネット上に一時的に公開するためのツール。無料版あり！
ローカルホストで動作しているWebアプリケーションやAPIなどを、インターネット上からアクセス可能な状態にすることができます。

もう少し具体的に言うと、ngrokは安全なトンネルを作成し、そのトンネルを通じて公開URL（ngrokが提供）からローカルホストへの接続を可能にします。
　　
トンネル：ネットワーク間を接続する安全な通り道のこと。ここでいう「トンネル」は、データが安全に通過できる特別なパスを指します。
　　
イメージ図

メリット

1. 簡単なセットアップ：ngrokはダウンロードして実行するだけで利用可能。私は、10分足らずで公開できました。
2. ローカル開発環境の公開：（繰り返しになりますが）ローカルホスト上で動作しているWebアプリケーションやAPIを一時的にインターネット上に公開できます。これにより、開発中のプロジェクトを外部のサービス（Webhook等）やクライアントと容易に共有可能にします。
3. 安全性：ngrokはHTTPSを介してセキュアなトンネルを提供します。これにより、安全にデータのやり取りを行うことが可能になります。
4. リアルタイムのトラフィック観測：リアルタイムでHTTPリクエストとレスポンスを観測できるため、開発やデバッグが容易になります。

デメリット

1. 無料版の制限：無料版のngrokは一度に一つの公開URLしか提供できません。同時に複数のトンネルや固定のURLが必要な場合は、有料プランに移行する必要があります。

2. 公開URLのセキュリティ：ローカル開発環境を公開するという性質上、悪意のある第三者によるアクセスも可能になります。重要なデータはローカル環境上で扱わない、または適切なセキュリティ対策を講じる必要があります。

3. 通信速度の遅延：ngrokはローカルサーバーと公開URLの間にトンネルを介するため、直接接続する場合に比べて若干の遅延が発生します。高度なパフォーマンスが求められる場合には注意が必要です。

ngrokのインストールと準備、実行

インストール

Homebrewを使ってインストールしました。
コンソールで以下のコマンドを実行します。

brew install ngrok

• インストールできたか確認

ngrok --version

• バージョンが表示されればインストール完了！

ngrok version 3.3.1

アカウントの登録

ngrok - Sign up

メールアドレス、またはGithubかGoogleアカウントので登録可能です。

トークンの取得

アカウント登録後の表示画面のサイドバーにある「Your Authtoken」をクリックしてください。

トークンが表示されるのでコピーします。

ngrokアカウントとの紐付け

取得したトークンで、先ほどインストールしたngrokにアカウントを紐付けします。

以下のコマンドをプロジェクトディレクトリで実行します。

ngrok authtoken コピーしたトークン

以下のようなメッセージが表示されれば準備完了です。

Authtoken saved to configuration file: /User/ユーザ名/.ngrok2/ngrok.yml

ngrokの実行

まず先に、Railsアプリのサーバを起動します。

rails server

サーバ起動後の表示例

=> Booting Puma
=> Rails 7.0.6 application starting in development
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.6.6 (ruby 3.2.2-p53) ("Birdie's Version")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 60987
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop

新しいターミナルを開き、ngrokを実行します。
以下のコマンドを実行します。

ngrok http [ポート番号]

さきほどの表示例にあるように、ポート番号が3000なので、このように実行します。
もし、番号が異なれば3000の部分を入れ替えて実行してください。

ngrok http 3000

以下のように表示されれば成功です。

Session Status                online
Account                       あなたのメールアドレス (Plan: Free)
Version                       3.3.1
Region                        Japan (jp)
Latency                       12ms
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://xxxxxxxx.ngrok-free.app -> http://localhost:3000

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

※ control + cで終了できます。

水色のURLが外部からアクセスするためのURLです。

URLは起動する度に変わります。

2023/07/17現在で、フリープランにおいてURLの有効期限はありません。
ngrokプロセスが稼働している限り、その公開URLは有効であり続けます。

　　
以上です。
水色のURLに続けて、ご自身のプロジェクトの任意のエンドポイントを追加して期待通りに動作するか確認してみてください。

おわりに

私は、ngrokで生成したURLを LINE Messaging API の Webhook URL として設定し、無事メッセージの送信テストをすることができました。

URLがngrok起動の度に変わるので、その点はくれぐれもご注意ください！

最後までお読みいただきありがとうございます。
少しでも参考になれば幸いです。
記事内に不備がありましたら遠慮なくご指摘いただけると嬉しいです。

参考リンク

ngrok