CloudFront FunctionsでWordPressのプレビューが更新されるようにする

2024-06-09

Amazon CloudFrontでWordPressサイトをキャッシュすることでページ表示速度の高速化とサーバー負荷の削減ができるメリットがあります。

一方で、AWSのガイドに従い、WordPressサイトの管理者用ページをキャッシュしない設定にした場合でも、記事のプレビュー画面はキャッシュされ、更新されない課題があります。この挙動は、下書き状態で記事の見た目を確認できなくなるため、サイトの運営上問題となってしまいます。

本記事では、CloudFront Functionsを用いて、WordPressのプレビュー表示が正常に行えるようにする方法を紹介します。

なぜWordPressのプレビューがキャッシュされてしまうのか？

まずは、WordPressのプレビュー画面がキャッシュされてしまう理由を解説します。

端的にお伝えすると、WordPressのプレビューのURLが次のURLのように通常のURLにクエリストリング&preview=trueを付与しただけの形になるからです。

https://www.bloomblock.net/?p=2611&preview=true

CloudFrontは、キャッシュポリシーをパス単位でしか指定できず、クエリストリングによって処理を分けることができません。そのため、プレビュー画面も投稿済みのページと同様にキャッシュ対象に含まれ、更新されなくなります。

そのため、&preview=trueがクエリストリングに含まれていた場合に、追加のクエリパラメータを追加してキャッシュにヒットしなくなる処理をCloudFront Functionsで追加します。

CloudFront Functionsのコード

それでは、実際に利用するコードを見ていきましょう。

&preview=trueがリクエストのクエリストリングに含まれている場合、nonceというパラメータを追加しています。nonceには、new Date().getTime()を代入し、常に現在時刻をUnixtimeで表した値が入るようにしています。

function handler(event) {
  const request = event.request;
  const queryString = request.querystring;

  // クエリストリングに preview=true が含まれているかチェック
  if (
    queryString.hasOwnProperty("preview") &&
    queryString["preview"].value === "true"
  ) {
    const currentTime = new Date().getTime();
    // nonce=<current time> をクエリストリングに追加
    queryString["nonce"] = { value: currentTime.toString() };
  }

  // 更新されたクエリストリングをリクエストに設定
  request.querystring = queryString;

  // 変更されたリクエストを返す
  return request;
}

リクエストする度に現在時刻がクエリストリングに含まれるため、キャッシュヒットしなくなり、常に最新のプレビューが表示されるようになります。