ブログ

先日とある既存のWordPressサイトにCloudFrontを導入したところ、サイトがERR_TOO_MANY_REDIRECTSになり、ページが開けなくなる事象が発生しました。
今回の構成はALBを使用しておらず、CloudFrontからEC2へ直接アクセスする構成です。
同じような構成で躓く方もいるかと思いますので、原因と対応内容をまとめていきます。

構成

今回の構成は以下のような形です。
CloudFrontでHTTPSを受け、オリジンであるEC2へはHTTPで接続していました。

ユーザー
  ↓ HTTPS
CloudFront
  ↓ HTTP
EC2（Apache）
  ↓
WordPress

発生した事象

CloudFront導入後、サイトへアクセスすると以下のエラーが発生しました。

ERR_TOO_MANY_REDIRECTS

Chromeでは、

このページはリダイレクトのループが発生しています

と表示されます。
また、管理画面にもアクセスできない状態になりました。

原因

原因は、ユーザーからはHTTPSでアクセスされているものの、CloudFrontからEC2への通信がHTTPだったため、EC2側ではHTTPアクセスとして認識されていたことでした。
WordPress側ではHTTPS化のためにリダイレクト設定を行っていたため、

HTTPSアクセス
↓
CloudFront → EC2 はHTTP
↓
EC2側でHTTPアクセスと判定
↓
WordPress側でHTTPSへリダイレクト
↓
再度CloudFront経由でアクセス
↓
再びHTTP判定
↓
ループ

という状態になっていました。

なぜ起きるのか

CloudFrontはHTTPSでアクセスを受けても、オリジンとの通信設定によってHTTPでEC2に接続します。（今回はそういう設定）
そのため、EC2側では「HTTPでアクセスされた」と認識されます。
WordPressなどでHTTPS強制リダイレクトをしている場合、ここで認識のズレが発生すると無限リダイレクトになります。

対応内容

今回はX-Forwarded-Protoヘッダを利用して、CloudFront経由のHTTPSアクセスを正しく認識させることで解決しました。
wp-config.phpに以下を追加します。

if (
    isset($_SERVER['HTTP_CLOUDFRONT_FORWARDED_PROTO']) &&
    $_SERVER['HTTP_CLOUDFRONT_FORWARDED_PROTO'] === 'https'
) {
    $_SERVER['HTTPS'] = 'on';
    $_SERVER['SERVER_PORT'] = 443;
}

そして、CloudFrontのオリジンリクエストポリシーで、以下のように設定します。

これにより、WordPress側でHTTPSアクセスとして扱われるようになり、リダイレクトループが解消されました。

まとめ

CloudFront導入時の無限リダイレクトは、HTTPS終端やリダイレクト設定の組み合わせによって発生しやすい問題のようです。
特にALBを使用していない構成では、EC2側でHTTPSをどう認識させるかが重要になります。
同じような構成でERR_TOO_MANY_REDIRECTSが発生した場合は、まずX-Forwarded-Protoの確認をおすすめします。

株式会社ウイングドアは福岡のシステム開発会社です。
現在、私達と一緒に"楽しく仕事が出来る仲間"として、新卒・中途採用を絶賛募集しています！
ウイングドアの仲間達となら楽しく仕事できるかも？と興味をもった方、
お気軽にお問い合わせ下さい！