このブログは WordPress で作られており、AWS 上に稼働しています。EC2 に直接アクセスさせると、SSL の設定やパフォーマンス設定などがややこしいので EC2 (WordPress) の前面にキャッシュサーバー (CloudFront) を立てることにしました。

ググると記事がたくさん見つかりますが誤った情報も多く、かなり苦戦しました。

まず参考にしたのはこのブログ様です。

CloudFront を SSL のためだけに使いたいならこの内容でも OK なのですが、肝心のキャッシュがされないのです。CloudFront はキャッシュサーバーであり、キャッシュさせないと価値が無いのです。

ビヘイビアの設定を分割する

アクセスしたいパスに応じてキャッシュ設定を変更します。以下のように分割しました。

ブロックエディタを利用する際は、wp-json も必要なようなので忘れずに。簡単にいうと、デフォルト(*) はキャッシュを効かせ、それ以外のビヘイビアはキャッシュを無効にしてしまいます。これで管理画面はキャッシュレス、表示はキャッシュを効かせたレスポンスを返すことが可能になります。

デフォルトビヘイビアの設定

ビューワープロトコルポリシー	Redirect HTTP to HTTPS
許可された HTTP メソッド	GET, HEAD
キャッシュヘッダー	CloudFront-Forwarded-Proto, Host
クエリ文字列	すべて
cookie	なし

ビューワープロトコルポリシー	Redirect HTTP to HTTPS
許可された HTTP メソッド	GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
キャッシュヘッダー	すべて
クエリ文字列	すべて
cookie	すべて

このブログは Nginx ではなく Apache で動いています。なぜなら簡単だから！WordPress は Apache のほうが設定がラクでいいです (お仕事では間違いなく Nginx を採用しますけど)。

.htaccess のキャッシュ設定に以下を追記しました。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"
</IfModule>

上記設定で上手く動作しました。

x-cacheが Miss from cloudfront と記載されているとオリジンからのレスポンスになります。

ちなみにキャッシュの都合上、この記事のプレビューも上記の設定の都合でできませんw

おそらく記事を公開しても CloudFront の管理画面からキャッシュを消去しない限りアクセスできません。WordPress のプラグインで、CloudFront のキャッシュを削除するものがあったのですが、設定が悪いのか現状動作していません。そのへんは改善が必要です。

が、CloudFront でちゃんとキャッシュを効かせることにより、表示速度が圧倒的に速くなりました。フロントエンドの細かい高速化テクニックより、まずはキャッシュサーバーを立てることが高速化で一番重要なことだと思います。