はじめに

この記事では、Lightsail + CloudFront + Route53 を用いてWordPressを構築した時にライブプレビューが表示されない問題の解決方法を紹介します。

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

環境

• macOS 10.14.3
• WordPress 5.2.1

テーマカスタマイズのライブプレビューが表示されない

ライブプレビューとは、WordPress管理画面のテーマのカスタマイズ時にデザインの変更などがリアルタイムに確認できる機能です。

しかし、カスタマイズから設定を変更しても右側の画面には何も表示されません。

原因

CloudFront のCookieの設定に問題がありました。Behaviorの Default(*) の Whitelist Cookies に問題がありました。当時参考にした記事に漏れがありました（人のせいにするダメなやつ）

ブラウザに出力されているCookieは以下のようです。

このCookieに対して、私が設定していた Whitelist Cookies の値は

suffixの * 抜けとるやないかーい

対処法

出力されているCookieの形式に合うように下記設定で Behavior を更新します。

CloudFrontを更新すると、無事にライブプレビューが表示されるようになりました！

まとめ

Lightsail + CloudFront + Route53 を用いてWordPressを構築した時にライブプレビューが表示されない問題の解決方法を紹介しました。

今回の問題に限らず、CloudFrontのOrigin、Distribution、Behaviorなどの設定が不十分なことで発生する問題が多いイメージです。

自分の勉強も兼ねてCloudFrontの説明記事でも書きたいな〜

参考

https://dev.classmethod.jp/cloud/aws/sugano-007-cloudfront/

https://dev.classmethod.jp/cloud/aws/how-to-install-original-domain-ssl-wordpress-with-amazon-lightsail/