初めてのngrok  localhost:3000を外部に公開する方法

ローカルで立ち上げたアプリをngrokを使って外部公開する方法と、
より使いこなすためのTips、利用時の注意点などを紹介します。

初めてngrokを使う方でもサクッと使い方を学べます。

# ngrokとは
ローカルで立ち上げたウェブアプリケーションを外部に簡単に公開できるサービスです。
読み方はエングロック。

例えば、`http://localhost:3000`でアプリケーションを立ち上げている状態で、
併せてngrokを立ち上げると他の人もこのアプリケーションにアクセスできるようになります。
つまり、外部に（世界に）公開されます。

用途としては、ローカル開発中にwebhookや外部サービスからの通信を受けたい場合などに使えますし、
他にもモックアップを見てほしい場合などにも使えるでしょう。

# 使い方
とても簡単。インストールして起動するだけです。

## インストール
### Mac
Homebrew経由でインストール
```bash
$ brew install ngrok/ngrok/ngrok
```

### Linux
```bash
curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null && echo "deb https://ngrok-agent.s3.amazonaws.com buster main" | sudo tee /etc/apt/sources.list.d/ngrok.list && sudo apt update && sudo apt install ngrok
```

他にもファイルからインストールする方法やWindowsでのインストールを知りたい方は公式HPをご覧ください。

https://ngrok.com/download



## 起動
```bash
$ ngrok http 3000
```

これで起動完了です。

起動後の画面に出てくるForwarding（この例だと https://f727-240f-a7-af8-1-c4c6-9ba9-cd09-6f89.jp.ngrok.io ）にアクセスするとローカルのlocalhost:3000で起動しているアプリケーションにアクセスできます。

```bash
ngrok                                                                                                      (Ctrl+C to quit)

We added a plan for ngrok hobbyists @ https://ngrok.com/personal

Session Status                online
Session Expires               1 hour, 59 minutes
Terms of Service              https://ngrok.com/tos
Version                       3.1.1
Region                        Japan (jp)
Latency                       39ms
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://f727-240f-a7-af8-1-c4c6-9ba9-cd09-6f89.jp.ngrok.io -> http://localhost:3000

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

停止は`Ctrl + C`で可能です。

# Tips1 : 有効期限を解除する
ここからはいくつか小技を紹介します。

一つ目は有効期限に関する話。
気づいた方もいるかと思いますが、上記で`Session Expires 1 hour, 59 minutes`と表示されている通り、初期状態では2時間でURLが無効になります。

この有効期限、無料のアカウント登録で解除できます。

## アカウント登録の方法
まずはこちらのページからサインアップします。

https://dashboard.ngrok.com/signup

次にこちらのページからAuthtokenをコピーします。

https://dashboard.ngrok.com/get-started/your-authtoken

最後に、ローカルでコマンドを打って完了です。

```bash
$ ngrok config add-authtoken コピーしたAuthtoken
```

完了後、`ngrok http 3000`で起動すると、Session Expiresが表示されていないことがわかります。

```bash
ngrok                                                                                                      (Ctrl+C to quit)

Check which logged users are accessing your tunnels in real time https://ngrok.com/s/app-users

Session Status                online
Account                       xxxxxx@xxxx.com (Plan: Free)
Version                       3.1.1
Region                        Japan (jp)
Latency                       29ms
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://ffdd-240f-a7-af8-1-c4c6-9ba9-cd09-6f89.jp.ngrok.io -> http://localhost:3000

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

# Tips2 : Web InterfaceからRequest履歴を見る

`http://127.0.0.1:4040`（`http://localhost:4040`でも同じ）にアクセスするとWeb Interfaceと呼ばれるページが開かれます。

初期状態では`No requests to display yet`と表示されますが、
Requestを受けると履歴が残ります。

![スクリーンショット 2023-02-26 11.45.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174359/c014eb18-552b-e2cc-2e36-9ed1922f1510.png)

このページ内でRequestのHeaderやBodyを見ることができるので、開発時に重宝します。
また、右側にある`Reply`ボタンを押すと、なんとRequestを再送してくれます。
これがとても便利。

# Tips3 : 認証をかける

外部公開する場合、セキュリティに関する懸念をされる方も多いでしょう。
ngrokでは、簡単に認証をかけることが可能です。

認証方法はいくつか用意されていますが、
ここでは一番手っ取り早いBasic認証をかける方法を紹介します。

## Basic認証
起動時に`--basic-auth`オプションを渡すことでBasic認証をかけることができます。

```bash
$ ngrok http 3000  --basic-auth="username:password"
```

このオプションをつけて起動すると、アクセス時にユーザー名・パスワードの入力を求めることができます。
![スクリーンショット 2023-02-26 11.56.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174359/19974746-2a83-cc7b-b861-2086dad40951.png)

## その他の認証方法
OAuthやOpenID Connectなども利用可能です。
詳細はこちらに記載されています。

https://blog.ngrok.com/posts/authentication-with-ngrok


# Tips4 : lvh.meで起動する

lvh.meを使っていくつかサブドメインを準備して開発を行なっている場合など、
`localhost`以外を指定して立ち上げることも可能です。

次のようにhost:ポートを指定して起動します。

```bash
$ ngrok http example.lvh.me:3000
```

# ngrokの注意点
利用時の注意点をいくつか記載します。

## URLは固定されない
無料利用では、ngrok起動時のURLは固定されず、立ち上げるたびに変わります。
webhookの受信先として指定する場合など毎回設定変更が必要なのでご注意ください。

※有料版では、Custome Domainという機能を利用して固定する方法があります。
詳しくはこちらご覧ください。

https://ngrok.com/docs/guides/how-to-set-up-a-custom-domain


## セキュリティ
最初に書いた通り、ngrokを立ち上げるとローカルで起動したアプリケーションが世界に対して公開されることになります。

以下の点、ご注意ください。
- 利用が終わったら停止する（`ctrl + C`で停止）
- 機密事項を認証不要な状態でアクセス可能な状態にしない（上記で紹介した認証をかける、アプリケーション自体に認証機構をかける、など)
- URLを不用意にネットに公開しない