ngrokを使ってみる

# はじめに
今回`ngrok`というサービスについての記事を書こうと思います。

このサービスを知った経緯としては、LINEのOGP（Open Graph Protocol）設定がおかしい！という依頼を受け、ローカルサーバー（docker）で修正したはいいものの、URLをLINEに張ってもOGPを確認できないからホントに正しく修正できたかわからない... というところから始まりました。

ローカルサーバーを一時的にインターネット上に公開できないかな？
と調べていたところ`ngrok`に行きつきました。

# ngrokとは？
ngrok はローカル開発サーバーをインターネット上で簡単に公開できるツールです。
このツールを利用すると、ローカルで実行しているwebサイトやAPIに対して、一時的にパブリックなURLを提供しインターネット上のどこからでもアクセスできるようになります。

一般公開されることで、携帯からでもローカルサーバーにアクセスできるのでOGPの仕様について確認できるようになります。

### 特徴と機能
・<strong>セキュアなトンネリング</strong>: ngrok はセキュアなトンネルを提供し、HTTPS接続を通じてローカルの開発環境に安全にアクセスできます。

・<strong>インスペクター</strong>: リクエストとレスポンスをリアルタイムで可視化し、デバッグに役立つ内蔵のウェブインターフェイスが提供されます。

・<strong>再生可能なリクエスト</strong>: トラフィックの履歴を保存し、デバッグやテストのためにリクエストを再生する機能があります。

・<strong>多プロトコルサポート</strong>: HTTP, HTTPS, TCPといった複数のプロトコルをサポートしており、様々なタイプのアプリケーションに対応しています。

・<strong>簡単なセットアップ</strong>: 初期設定が非常に簡単で、数分でローカル環境をインターネット上に公開できます。

# インストールしてみる

ngrokについて説明したところで、実際にインストールを行いたいと思います。

<strong>今回インストールする環境はLinuxになります。</strong>

https://ngrok.com/

こちらのサイトからGet started for freeをクリックしダウンロードを行うことが出来ますが、以下のコマンドでもダウンロードできます。

今回はコマンドで...
```terminal:
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
```
# 設定
続いて、以下のURLからアカウントの作成を行います。
アカウントを作成することで、認証トークンを発行できます。
今回LINE上でOGPについて確認するだけなので無料版にします。

https://ngrok.com/

アカウントが作成出来たら、ログインしダッシュボードから`Your Authtoken`をコピーします。

トークンをコピーしたら、コピーしたトークンをターミナルで入力し認証を行います。

```terminal:
ngrok authtoken <認証トークン>
```

ここまでで、ngrokの設定は完了です。
実際にローカルサーバーを公開してみましょう。

# サーバーを公開してみる
今回はdockerで構築したローカルサーバーを公開してみます。

ngrokでサーバーを公開するには、以下のコマンドを実行します。

```terminal
ngrok http [ポート]
```

例えばlocalhost:1000で公開しているアプリケーションを公開する場合は、
```terminal
ngrok http 1000
```
上記のようなコマンドを実行します。

それではdockerで公開したいポートを確認し公開してみます。
ポートの確認は`docker ps`で行います。

```terminal
[18:24:57]tn /docker docker ps
CONTAINER ID   IMAGE        COMMAND                  CREATED       STATUS       PORTS                                                                      NAMES
b26bb3ec7b79   web   "docker-php-entrypoi…"   8 hours ago   Up 8 hours   0.0.0.0:80->80/tcp, :::80->80/tcp, 0.0.0.0:443->443/tcp, :::443->443/tcp   test
[18:24:58]tn /docker
```

ポート80はHTTP用、ポート443はHTTPS用になります。
今回はポート443を公開します。

```terminal
ngrok http 443
```

コマンドを実行するとターミナルが以下の表示になります。

```terminal
ngrok                                                                                                                                                                                            (Ctrl+C to quit)                                                                                                                                                                                                                 Sign up to try new private endpoints https://ngrok.com/new-features-update?ref=private

Session Status                online
Account                       test.taro@gmail.com (Plan: Free)
Version                       3.18.4
Region                        Japan (jp)
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://7e75-58-156-74-54.ngrok-free.app -> https://localhost:443                                                                                                                                                                                                                                                                                                                                   Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00                                                                                                                                                                                                                       
```

この画面に行くと正しくポートを公開できています。
公開されたURLは`https://7e75-58-156-74-54.ngrok-free.app`になります。

ngrokを終了したい時は`Ctrl+c`で終了できます。
ちなみに、停止する度に公開されるURLは変わります。

`https://7e75-58-156-74-54.ngrok-free.app/アクセスしたいパス`このようにして、携帯からアクセスすると無事、インターネット上に公開されていることを確認できました。


# まとめ
今回は、Linuxでngrokのインストールからローカルサーバー公開の方法までを説明しました。

ローカルサーバーにインターネット上からアクセスしたい場合に、非常に便利なサービスになります。

OGPの確認だけではなく、クライアントにローカルサーバーの画面を触ってもらい、使用感を確かめてもらうこともできます。

ぜひ利用してみてください。