WordPressで作成したブログを静的サイトとして公開しています。静的サイトに移行する際に困ったのがCloudflareの設定です。WordPressをサーバーで動かしていれば、プラグイン「Super Page Cache」を使えばキャッシュ設定は簡単です。

Cloudflare x WordPress x Super Page Cacheで高速＆安全運用

CloudflareとWordPressを組み合わせた最新のキャッシュ・セキュリティ設定方法を詳しく解説します。Super Page Cacheプラグインの活用やWAF設定も紹介。IPアドレス制限やHTTPヘッダー追加、キャッシュルールの注意点、CloudflareのAPIキー取得手順など、実践的な運用ノウハウをまとめています。sumibi-blog.com

静的サイトではプラグインは使えないので、自分で設定をするのですが、私には専門的な知識はなく、調べてもブラウザキャッシュの期間程度の情報しか得られませんでした。そこで、知識が得られるまでの間はプラグイン「Super Page Cache」の設定を参考にし、キャッシュ設定を行います。

キャッシュ設定の考え方

htmlをキャッシュしHTTPレスポンスヘッダーに「cache-control : s-maxage=31536000, max-age=60」を加えます。ステータスコード「200」と「404」をキャッシュします。.htaccessにコードを加え、ファイルのキャッシュ設定をします。

手を加えるのはサーバーにアップロードしている「.htaccess」とCloudflareのルールの項目です。

.htaccessに加えるコード

.htaccessに下記コードを加えます。拡張子別にCache-Controlヘッダーを出力します。また、robots.txtをキャッシュから除外します。

<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xsl "access plus 0 seconds"
</IfModule>

<FilesMatch "\.(xml|xsl)$">
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate, max-age=0"
</IfModule>
</FilesMatch>

<FilesMatch "robots\.txt">
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate, max-age=0"
</IfModule>
</FilesMatch>

<FilesMatch "\.(css|js|pdf)$">
<IfModule mod_headers.c>
Header set Cache-Control "public, must-revalidate, proxy-revalidate, immutable, max-age=2592000, stale-while-revalidate=86400, stale-if-error=604800"
</IfModule>
</FilesMatch>

<FilesMatch "\.(jpg|jpeg|png|gif|ico|eot|swf|svg|webp|avif|ttf|otf|woff|woff2|ogg|mp4|mpeg|avi|mkv|webm|mp3)$">
<IfModule mod_headers.c>
Header set Cache-Control "public, must-revalidate, proxy-revalidate, immutable, max-age=31536000, stale-while-revalidate=86400, stale-if-error=604800"
</IfModule>
</FilesMatch>

リダイレクトルール

WordPressの基本機能であるwwwの統一、「www.example.com」にアクセスがあれば「example.com」にリダイレクトする機能をリダイレクトルールを使い設定します。逆に「example.com」へのアクセスを「www.example.com」へリダイレクトする場合はリダイレクトの条件と実行内容を逆に書き換えます。

実行内容

キャッシュルール

すべての受信リクエストをキャッシュの対象とすることでhtmlがキャッシュの対象になります。

ステータスコード TTLは「200」と「404」をキャッシュし、それ以外はバイパスするために下記の様にしました。

レスポンスヘッダー変換ルール

htmlのHTTPレスポンスヘッダーに「cache-control : s-maxage=31536000, max-age=60」を加えます。

だだし、.htaccessでcache-controlを付与している拡張子とrobots.txtは除外します。ANDで除外するものを加えます。下の例では「.xml」だけを表示していますが、すべての拡張子とrobots.txtを「URIパス」で加えます。

最後までお読みいただき、誠にありがとうございます。