はじめに

この記事では、Lightsail + CloudFront + Route53 を用いてWordPressを構築した時のエラーについて解決した話を紹介します。

構築の手順を書いた記事はこちら

環境

• macOS 10.14.3
• WordPress 5.2.1

前提

• Route53のレコード設定 + CloudFrontのDistribution、Behaviorの設定が完了済み
• ACMにて証明書発行＋アタッチ済み

CSSが適用されない

https://ドメイン でアクセスはできるがCSSが適用されていないという状況です。

原因

エンドユーザからのアクセスはCloudFrontによって HTTP から HTTPS にリダイレクトされますが、html内の参照はリダイレクトされないようです。

WordPressの初期状態では、 http でスクリプトやCSSを呼び出しているため、呼び出し時に403エラーとなるようです。

対処法

対処法は、WordPressのプラグインを使用します。

https://ドメイン/wp-login.php にアクセスし、管理画面にアクセスします。

ユーザ名とパスワードはSSH接続をして確認することができます。

サイドバーのプラグイン → 新規追加から SSL Insecure Content Fixer を検索します。

設定から下記の設定をして設定の保存をすると、サイトへのアクセスが可能となります！

まとめ

Lightsail + CloudFront + Route53 を用いてWordPressを構築した時にCSSが適用されない件について、確認するべき点を紹介しました。

CloudFrontを用いて構築する場合（ACMで証明書発行済）にはWordPressにもCloudFrontに沿った設定を適用しましょう。

参考

https://stangler.hatenablog.com/entry/2018/11/07/094528#CSS-や-JS-を-HTTPS-化