当ページのリンクには広告が含まれている場合があります。業務でTwitterのOGP画像をLargeで設定してほしいとの依頼がありました。対応自体は簡単なのですが、OGPはTwitterやFacebookにサイトを読み込んでもらう必要があるため、ローカルの開発環境やBASIC認証などがかかっている環境では確認ができないのです。Protocol」の略で、TwitterやFacebookでシェアをしたときに、ページのタイトルや画像がカード風に表示される機能でおなじみですね。ぶっつけ本番は怖いのでローカルで確認したいけれど、そのままでは確認できない。そんなときにはngrokが便利です!ngrokを使えば、OGPだけではなく、Webhookの動作確認などもできちゃいます。いうわけで、今回はngrokを使ってローカル環境でOGPやWebhookの動作確認をする方法をご紹介しますね。目次ngrokとは?ngrokは安全なトンネルを介してローカルサーバーをインターネット上に公開してくれるツールです。公式ページには以下のように紹介されています。tunnels.https://ngrok.com/一時的に利用可能な公開URLを発行してくれるので、開発時には払い出されたURLにアクセスするだけでOK。今回のようにOGPの設定を確認するときだけではなく、Webhookの動作確認やローカルサーバーにアプリからアクセスする際などにも便利です。他にも、ローカルで構築したスタイルをデザイナーさんに確認していただく際にも使えそうですね。ngrokのインストールから起動までngrokをインストールするまずはインストールからですね。インストールにはhomebrewを使います。ngrok無事にインストールが完了したら、バージョン確認用のコマンドを実行してみましょう。2.3.40大丈夫そうですね。ngrokを起動するそれでは早速起動してみましょう!起動時には、ローカルで起動しているサーバーのポート番号が必要です。今回対象となるのがhttp://localhost:3210だった場合は以下のように実行します。※開発環境をDockerで構築しており、既存ポートとの重複を避けるため3210にしています。3210すると以下のような画面が表示されます。ngrokを起動した際の表示こちらの画面には、httpとhttpsの場合のURLが表示されています。Forwardingと表示されている行ですね。http://localhost:3210お好みの方にアクセスしてみましょう。無事にアクセスできれば準備完了です!ここで払い出されたURLは、ngrokを起動するたびに変更されます。URLは固定ではないのでご注意ください。そのまま閉じると立ち上げたngrokが生きたままになる場合があるので注意してくださいね。通信内容を確認する通信内容の詳細を確認したいときは、4040ポートに接続するとGUIで確認ができます。details.https://ngrok.com/docs#getting-started-inspect見た目はこんな感じです。私の画面は開発中のAPI情報とかが表示されていて見せられないので、公式の画像をお借りしますね。ngrok公式ドキュメントより結構見やすくて良い感じです!また、通信内容のリプレイ機能もあります。it.https://ngrok.com/docs#getting-started-replayngrok公式ドキュメントより右上のReplayボタンを押すと、該当のリクエストが再実行することができます。手軽にリクエストを再実行できるのでとても便利ですね。Nginxを利用していて400エラーになる場合Nginxを利用している場合に、ngrokから払い出されたURLにアクセスすると、以下のようなエラーメッセージが表示される場合があります。port.これはNginx側がhttpsで待ち受けているのに、ngrokがhttpに繋いでいることで起きるエラーです。このエラーを回避する方法は別途記事にまとめますので、そちらをご確認ください。先日、ngrokを使ってローカル環境でOGPやWebhookの確認をする方法をご紹介しました。実はこのとき1点問題が発生しまして・・。開発中のサービスでNginxを使っていたの...終わりに今回はngrokを使ってローカル環境でOGPやWebhookの動作確認をする方法をご紹介しました。ngrokさえあれば、ローカル環境にアクセスするURLを簡単に払い出すことができます。OGPやWebhookなどに利用できるのはもちろんですが、自分の開発環境を気軽に共有できるのが便利ですよね。私もデザイナーの方などに確認していただく際には、ngrokでURLを生成してみようと思います。