WordPress に最適な CloudFront キャッシュ設定 (2023年度版)

AWS 公式ドキュメントが　2023年8月時点で公開している「Best Practices for WordPress on AWS」にある設定例「CloudFront distribution creation」の内容が古かったので、自分なりに改良してみました。

主な改良点は

• レガシーキャッシュルールではなく、新しいのキャッシュポリシーを使う
• wp-json ディレクトリの通信を対応する
• Facebook や広告タグのクエリをオリジンサーバーに飛ばなくする

です。

STEP.1 キャッシュポリシーを作成

絶対に CloudFront にキャッシュさせるように最小TTLを60に設定しています。アクセス頻度が少ないサイトであれば、最小TTLを増やすなどしてください。ただ、ページの更新の時間もかかるのでバランスを考えましょう。

• 名前: 0-default (適当に変えてください)
• 説明: 任意
• TTL 設定
  • 最小TTL: 60 秒
  • 最大TTL: 31536000 秒
  • デフォルトTTL: 86400 秒
• キャッシュキー設定
  • ヘッダー：次のヘッダーを含める
    • Authorization (開発中用)
    • Host
  • クエリ文字列
    • 次以外のすべてのクエリ文字列を含める
      • fb_ref
      • fbclid
      • fb_action_types
      • fb_action_ids
      • gclid
      • utm_campaign
      • utm_content
      • utm_medium
      • utm_term
      • utm_source
  • Cookie
    • 指定された cookie を含める
      • comment_*
      • wordpress_*
      • wp-settings-*
• 圧縮サポート
  • Gzip チェック
  • Brotli チェック

追加するプラグイン・カスタマイズによって、必要なポリシーを増やします。

STEP 2. ビヘイビア設定

STEP 2-1. キャッシュする用のビヘイビア3つ

デフォルトのキャッシュ設定です。3つのビヘイビアを作成します。

• パスパターン:
  • デフォルト
  • /wp-includes/*
  • /wp-content/*
• オリジン: WordPress サーバーを選択
• オブジェクトを自動的に圧縮: Yes
• ビューワー: Redirect HTTP to HTTPS (適宜変更)
• 許可された HTTP メソッド: GET, HEAD
• ビュワーのアクセスを制限する: No
• キャッシュキーとオリジンリクエスト
  • Cache policy and origin request policy (recommended)
    • キャッシュポリシー: 0-default (もしくは自分でつけた名前)

STEP 2-2. 管理画面 & 動的ページの設定、3つ

管理画面や、Contact Form 7 などキャッシュできないページの設定です。3つのビヘイビアを作成します。

• パスパターン
  • /wp-login.php
  • /wp-admin/*
  • /wp-json/*
    • その他動的な動作をするプラグインで wp-json ディレクトリに向かって通信するディレクトリがあれば追加する。
• オリジン: WordPress サーバーを選択
• オブジェクトを自動的に圧縮: Yes
• ビューワー: Redirect HTTP to HTTPS (適宜変更)
• 許可された HTTP メソッド: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
• ビュワーのアクセスを制限する: No
• キャッシュキーとオリジンリクエスト
  • Legacy cache settings
  • ヘッダー: すべて
  • クエリー: すべて
  • cookie: すべて

これで、基本的な WordPress のキャッシュ設定ができます。

追記: より細かいチューニングをしてみよう

サーバーを冗長化していたり、よりキャッシュ率を上げたい場合は、トップページのビヘイビアをつけたり、wp-json のビヘイビアルールをプラグインによってキャッシュをしたりしないルールにしたりとチューンアップしていきます。

/wp-json/* パスは奥が深い

/wp-json/* パスは現在「動的」な動作を行う場所として設定サンプルを提示しています。

ただ、追加でプラグイン・カスタマイズによってもビヘイビアルールを追加する必要がある場合があります。

例えば WordPress をヘッドレスで使用している場合、post (投稿) 関連のエンドポイントはキャッシュしたいパスです。

反対に、Contact Form 7 の様に、フォーム送信時にも/wp-json/* パスが使われるので、そこは動的パスとしての登録が必要です。

Chrome の Developer ツールなどを使い、どのパスをキャッシュするべきかを確認し調整しましょう。