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

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

### 開発環境
- 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が提供）からローカルホストへの接続を可能にします。
　　
トンネル：ネットワーク間を接続する安全な通り道のこと。ここでいう「トンネル」は、データが安全に通過できる特別なパスを指します。
　　
イメージ図
![shapes-1689526689685.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/931369/6cfd4bac-1dad-84b2-10fb-7e4aa1d67f17.png)

### メリット


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

### デメリット

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

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

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


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

### インストール

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

```console
brew install ngrok
```
- インストールできたか確認

```console
ngrok --version
```
- バージョンが表示されればインストール完了！

```console
ngrok version 3.3.1
```

### アカウントの登録


[ngrok - Sign up](https://dashboard.ngrok.com/signup)

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

![スクリーンショット 2023-07-17 3.41.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/931369/5d6dbd1e-e77f-df37-b445-041140728c8a.png)

### トークンの取得

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

![スクリーンショット 2023-07-17 3.47.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/931369/b4e2d435-f317-781f-e49b-2234e317b44d.png)

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

### ngrokアカウントとの紐付け

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

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

```console
ngrok authtoken コピーしたトークン
```

以下のようなメッセージが表示されれば準備完了です。
```console
Authtoken saved to configuration file: /User/ユーザ名/.ngrok2/ngrok.yml
```

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

```console
rails server
```
サーバ起動後の表示例
```console
=> 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を実行します。
以下のコマンドを実行します。

```console
ngrok http [ポート番号]
```

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

以下のように表示されれば成功です。
```console
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](https://ngrok.com)