ツール

ngrokで”The plain HTTP request was sent to HTTPS port.”となった【Nginx】

先日、ngrokを使ってローカル環境でOGPやWebhookの確認をする方法をご紹介しました。

実はこのとき1点問題が発生しまして・・。

開発中のサービスでNginxを使っていたのですが、ngrokで発行したURLにアクセスすると400エラーとなったのです・・。

最初は驚いたのですが、無事に接続することができましたので、同じ現象で悩んでいる方に向けてメモを残しておこうと思います。

そんなわけで、今回はngrokで発行したURLにアクセスした際に「The plain HTTP request was sent to HTTPS port.」というエラーになった場合の対処法についてご紹介します。

400エラーとなった原因は?

こちらの現象ですが、「httpリクエストがhttps用のポートに送られてますよ〜、ちゃんとhttpsで送ってきてね」というものになります。

Nginx側ではhttpsの通信を待っているけれど、ngrokで発行したURLがhttpリクエストを送っているため、Nginxから怒られているんですね。

ngrokを起動した際の画面を見ると、確かにhttpsでアクセスした際に接続されるのはhttpになっていますね。

つまり、ngrokで発行したhttpsのURLの向き先を開発環境のhttpsのURLにしてあげれば問題は解決するわけです。

それでは、ngrokからhttps宛てに通信を繋いでいきましょう。

ngrokでHTTPSポートに通信を繋ぐ方法

実はngrokにはhttps向けに接続するオプションがあります。

ただし、そのためにはngrokが発行するAuthtokenが必要です。

まずは以下の手順でAuthtokenを取得しましょう。

  1. こちらからngrokのアカウントを作成する。(無料で作成できます!)
  2. 作成したらダッシュボードの「Your Authtoken」を開く
  3. Authtokenが表示されているので、Copyボタンでコピーする

コピーできましたか?

それでは、以下コマンドの<token>の箇所に先ほどコピーしたAuthtokenを入れて、ngrokを起動しましょう。

ngrok http --authtoken=<token> -region=ap https://localhost:3210
※「https://localhost:3210」の箇所には、ご自身の環境に合わせてアドレスとポート番号を入れてください。
※ -regionに指定したapとはAsia Pasificのことです。

すると、以下のように表示されます。

ngrok起動時の画面

Forwardingのところが、通常起動時と変わっているのが分かりますでしょうか?

ngrokで発行したURLの向き先が、開発環境のhttpsになっています。

これでNginxから怒られることもなくなりますね。

あとは通常の場合と同様に、ngrokで発行したURLにアクセスするだけです。

お疲れ様でした!

終わりに

今回は、ngrokで発行したURLにアクセスした際に「The plain HTTP request was sent to HTTPS port.」というエラーになった場合の対処法をご紹介しました。

無料で便利な機能を使えるngrok先輩の懐の深さに感動ですね!

これからも便利に使っていこうと思います。

本日はここまでです。それでは。