Netlify + Cloudflareでリダイレクトループ(ERR_TOO_MANY_REDIRECTS)が起こった時の対応

Netlifyで公開しているサイトが、リダイレクトループ(ERR_TOO_MANY_REDIRECTS)で見れなくなるケースがあったため、原因と解決方法をまとめました。

現象

トップページにアクセスすると、リダイレクトループ(ERR_TOO_MANY_REDIRECTS)になる。

原因

原因は、Cloudflareのキャッシュ機能の影響でした。

当該サイトは、DNSをNetlifyではなく、Cloudflareで管理していて、NetlifyへはCNAMEで転送をかけていました。その際、CDNのキャッシュを利用しようと思って、Cloudflareのキャッシュを有効にしていたところ、今回のリダイレクトループになりました。

ちなみに、すべてのページがリダイレクトループになったわけではなく、トップページのみがリダイレクトループになりました。

Netlify由来なのか、Cloudflare由来なのか、原因の切り分けが難しいところですが、Chrome Dev Toolでネットワーク状況を見る限り、Cloudflareがリダイレクトを起こしているようでしたので、Cloudflareのほうだろうと当たりをつけた感じです。

解決方法

Cloudflareのリダイレクトループに関しては、公式のサポートページに対策がありました。

Cloudflare SSL options incompatible with your origin web server

CloudflareのSSLモードに関しては、こちらのページでまとめてありますが、SSLモードがFlexibleになっている場合、Cloudflareからサイト側へはHTTPでアクセスするので、NetlifyがHTTPのアクセスをHTTPSへリダイレクトするため、リダイレクトループになるようです。

流れで見ていくと、

  1. ユーザーがhttps://example.com/をコール
  2. (Cloudflareが) http://example.comにアクセス
  3. (Netlifyが) https://example.comにリダイレクト

1-3をループする、という感じですね。

ですので、CloudflareのSSLモードをFULL(HTTPS -> HTTPS)にすれば問題は解決です。もしくは、DNSを素直にNetlifyにしても良いですね。


Cloudflareのリダイレクトループって、WordPressサイトとかでもよく見るトラブルな気がしますが、毎回解決策を探している気がします。最近は、SSLが無料でついてくるサーバーがほとんどなので、SSLを使えないケース(Google Cloud Storageとか)以外は、「CloudflareのSSLモードはFULLにする」というルーティンにしたほうが良さそうですね。