【ngrok】ローカルでもOGPやWebhookの確認がしたい

業務でTwitterのOGP画像をLargeで設定してほしいとの依頼がありました。

対応自体は簡単なのですが、OGPはTwitterやFacebookにサイトを読み込んでもらう必要があるため、ローカルの開発環境やBASIC認証などがかかっている環境では確認ができないのです。

ちなみにOGPとは「Open Graph Protocol」の略で、TwitterやFacebookでシェアをしたときに、ページのタイトルや画像がカード風に表示される機能でおなじみですね。

さすがにぶっつけ本番は怖いのでローカルで確認したいけれど、そのままでは確認できない。どうしよう・・。

そんなときにはngrokが便利です!
ngrokを使えば、OGPだけではなく、Webhookの動作確認などもできちゃいます。

というわけで、今回はngrokを使ってローカル環境でOGPやWebhookの動作確認をする方法をご紹介しますね。

目次

ngrokとは?

ngrokは安全なトンネルを介してローカルサーバーをインターネット上に公開してくれるツールです。

公式ページには以下のように紹介されています。

Ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels.

https://ngrok.com/

一時的に利用可能な公開URLを発行してくれるので、開発時には払い出されたURLにアクセスするだけでOK。
とても簡単ですね。

今回のようにOGPの設定を確認するときだけではなく、Webhookの動作確認やローカルサーバーにアプリからアクセスする際などにも便利です。

他にも、ローカルで構築したスタイルをデザイナーさんに確認していただく際にも使えそうですね。

ngrokのインストールから起動まで

ngrokをインストールする

まずはインストールからですね。
インストールにはhomebrewを使います。

$ brew install ngrok

無事にインストールが完了したら、バージョン確認用のコマンドを実行してみましょう。

$ ngrok --version
ngrok version 2.3.40

大丈夫そうですね。

ngrokを起動する

それでは早速起動してみましょう!

起動時には、ローカルで起動しているサーバーのポート番号が必要です。

今回対象となるのがhttp://localhost:3210だった場合は以下のように実行します。
※開発環境をDockerで構築しており、既存ポートとの重複を避けるため3210にしています。

$ ngrok http 3210

すると以下のような画面が表示されます。

ngrokを起動した際の表示

こちらの画面には、httpとhttpsの場合のURLが表示されています。
Forwardingと表示されている行ですね。

Forwarding                        http://4a0b-106-167-98-187.ngrok.io  ->  http://localhost:3210
Forwarding                        https://4a0b-106-167-98-187.ngrok.io  ->  http://localhost:3210

お好みの方にアクセスしてみましょう。
無事にアクセスできれば準備完了です!

  • ここで払い出されたURLは、ngrokを起動するたびに変更されます。
    URLは固定ではないのでご注意ください。

ngrokを終了する場合は、Ctrl+cキー を押しましょう。
そのまま閉じると立ち上げたngrokが生きたままになる場合があるので注意してくださいね。

通信内容を確認する

通信内容の詳細を確認したいときは、4040ポートに接続するとGUIで確認ができます。

ngrok provides a real-time web UI where you can introspect all of the HTTP traffic running over your tunnels. After you’ve started ngrok, just open http://localhost:4040 in a web browser to inspect request details.

https://ngrok.com/docs#getting-started-inspect

見た目はこんな感じです。
私の画面は開発中のAPI情報とかが表示されていて見せられないので、公式の画像をお借りしますね。

ngrok公式ドキュメントより

結構見やすくて良い感じです!

また、通信内容のリプレイ機能もあります。

ngrok allows you to replay any request with a single click dramatically speeding up your iteration cycle. Click the Replay button at the top-right corner of any request on the web inspection UI to replay it.

https://ngrok.com/docs#getting-started-replay
ngrok公式ドキュメントより

右上のReplayボタンを押すと、該当のリクエストが再実行することができます。

手軽にリクエストを再実行できるのでとても便利ですね。

Nginxを利用していて400エラーになる場合

Nginxを利用している場合に、ngrokから払い出されたURLにアクセスすると、以下のようなエラーメッセージが表示される場合があります。

The plain HTTP request was sent to HTTPS port.

これはNginx側がhttpsで待ち受けているのに、ngrokがhttpに繋いでいることで起きるエラーです。

このエラーを回避する方法は別途記事にまとめますので、そちらをご確認ください。

終わりに

今回はngrokを使ってローカル環境でOGPやWebhookの動作確認をする方法をご紹介しました。

ngrokさえあれば、ローカル環境にアクセスするURLを簡単に払い出すことができます。

OGPやWebhookなどに利用できるのはもちろんですが、自分の開発環境を気軽に共有できるのが便利ですよね。

私もデザイナーの方などに確認していただく際には、ngrokでURLを生成してみようと思います。

今回はここまで。それでは!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次