MENU
オンライン講座開催中
コーディング＆AWSにゃ(ΦωΦ)

【AWS CloudFront導入③】CloudFrontで403エラーが出る原因と解決方法｜Apache設定を修正する手順

AWS EC2
【AWS CloudFront導入③】CloudFrontで403エラーが出るときの対処法｜Apacheの設定が原因だった
目次

AWS CloudFront導入③

この記事はAWS CloudFront導入４部作です。

前編・中編でRoute53への移行とCloudFrontのドメイン紐付けが完了しました。しかし設定後に以下のような403エラーが表示される場合があります。

403 ERROR
The request could not be satisfied.
Bad request. We can't connect to the server for this app or website at this time.
Generated by cloudfront (CloudFront)

この記事ではこの403エラーの原因と対処法を紹介します。

原因

CloudFrontはHTTPでEC2に接続しようとします。しかしCertbot（Let’s Encrypt）でSSL化した際に wordpress.conf にHTTP→HTTPSリダイレクトの設定が自動で追加されています。

つまり以下のような状態になっています。

ユーザー → HTTPS → CloudFront → HTTP → EC2
                                  ↓
                          HTTPSにリダイレクト！
                          → 403エラー

CloudFrontからのHTTPリクエストをEC2がHTTPSにリダイレクトしてしまい、ループが起きて403エラーになります。

確認方法

SSHでEC2に接続してエラーログを確認します。

bash

ssh -i "~/Documents/キーペア名.pem" ec2-user@(IPアドレス)
sudo tail -20 /var/log/httpd/error_log

以下のようなエラーが出ていれば原因はApacheのリダイレクト設定です。

AH02032: Hostname ip-172-31-10-33.ap-northeast-1.compute.internal 
and hostname mysite.com provided via HTTP have no compatible SSL setup

解決方法

wordpress.conf からHTTPSリダイレクトの設定を削除します。

まず現在の設定を確認します。

bash

sudo cat /etc/httpd/conf.d/wordpress.conf

以下のようなリダイレクト設定が含まれている場合は削除します。

RewriteEngine on
RewriteCond %{SERVER_NAME} =mysite.com
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]

以下を実行してリダイレクト設定を削除した wordpress.conf に書き直します。

bash

sudo tee /etc/httpd/conf.d/wordpress.conf << 'EOF'
<VirtualHost *:80>
    DocumentRoot /var/www/html/wordpress
    ServerName mysite.com
    <Directory /var/www/html/wordpress>
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>
EOF
sudo systemctl restart httpd

キャッシュを削除する

Apacheを再起動したらCloudFrontのキャッシュも削除します。

AWSコンソール → CloudFront → ディストリビューション → 対象のディストリビューション →「キャッシュ削除」タブ →「キャッシュ削除を作成」をクリックします。

「Object paths to invalidate」の入力欄に以下を入力して「キャッシュ削除を作成」をクリックします。

/*

確認

ブラウザで https://mysite.com にアクセスしてサイトが表示されれば完了です！

CloudFront経由でサイトが表示されているか確認するには、ブラウザの開発者ツール（F12）→「ネットワーク」タブ → レスポンスヘッダーに via: 1.1 xxxxxxxxxx.cloudfront.net が含まれていればCloudFront経由で配信されています。

それでも解決しない場合｜リダイレクトループが起きるとき

上記の方法で403エラーが解決しても、今度は以下のエラーが出る場合があります。

ERR_TOO_MANY_REDIRECTS
charakatsu.com でリダイレクトが繰り返し行われました。

これはWordPressがHTTPSへのリダイレクトをしようとしているのに、CloudFrontからEC2へのリクエストがHTTPで来るため無限ループになっている状態です。

ユーザー → HTTPS → CloudFront → HTTP → EC2
                                  ↓
                        WordPressがHTTPSにリダイレクト
                                  ↓
                        CloudFrontがまたHTTPで接続
                                  ↓
                        永遠にループ → ERR_TOO_MANY_REDIRECTS

解決方法

wp-config.php にHTTPSを強制認識させる設定を追加します。

bash

sudo sed -i "s/<?php/<?php\n\$_SERVER['HTTPS'] = 'on';/" /var/www/html/wordpress/wp-config.php
sudo systemctl restart httpd

この設定を追加することでWordPressがHTTPS環境として認識するようになり、リダイレクトループが解消されます。

またCloudFrontのオリジン設定も以下のように変更してください。

項目設定値
Origin domainEC2のパブリックDNS（例：ec2-xx-xx-xx-xx.ap-northeast-1.compute.amazonaws.com）
プロトコルHTTPのみ
オリジンリクエストポリシーAllViewer
キャッシュポリシーCachingDisabled

設定変更後はCloudFrontのキャッシュを削除してブラウザのCookieもクリアしてから確認してください。

https://mysite.com が正常に表示されれば完了です！🎉

まとめ

3記事を通してやったことをまとめると👇

  • 【前編】Route53でDNS管理をAWSに統一
  • 【中編】CloudFrontにドメインを紐付け
  • 【後編】403エラーの対処（Apacheのリダイレクト設定を修正）

CloudFrontを導入することでサイトの表示速度向上・EC2への負荷軽減・DDoS攻撃への耐性向上が期待できます。設定中にエラーが出ても原因を一つずつ確認していけば必ず解決できます！

AWS EC2
  • URLをコピーしました！
目次