Next.jsで最適化した画像をCloudflareでキャッシュできるようにする方法
Next.jsの<Image>コンポーネントを使うと簡単に画像を最適化できますが、これによって最適化した画像は、デフォルトではCloudflareにキャッシュされません。
実際、ブラウザーの開発者ツールのネットワークタブを確認すると、Next.jsで最適化した画像のレスポンスヘッダーがcf-cache-status: DYNAMICとなっており、Cloudflareにキャッシュされていないことがわかります。
画像がCloudflareにキャッシュされない理由
Next.jsで最適化した画像がCloudflareにキャッシュされないのは、Cloudflareのキャッシュのデフォルトの挙動が原因です。
Cloudflareは、デフォルトでは拡張子によってコンテンツをキャッシュするかどうかを判断するようになっています。
Cloudflareのキャッシュについてのドキュメントには、次のように書かれています。
Cloudflare only caches based on file extension and not by MIME type. The Cloudflare CDN does not cache HTML or JSON by default. Additionally, by default Cloudflare caches a website's robots.txt.
日本語訳：
CloudflareはMIMEタイプではなくファイル拡張子にもとづいてのみキャッシュします。Cloudflare CDNはデフォルトでHTMLとJSONをキャッシュしません。加えて、CloudflareはデフォルトでWebサイトのrobots.txtをキャッシュします。
——『Default Cache Behavior · Cloudflare Cache (CDN) docs』より
このように、CloudflareはコンテンツのMIMEタイプではなくファイル拡張子でキャッシュするかを判断しています。
Next.jsで最適化した画像のパスは、次のようになっています。
/_next/image/?url=<元の画像のURL>&w=<幅>&q=<最適化のクオリティ>このパスからクエリーパラメーターを取り除くと、/_next/image/となります。
クエリーパラメーターを取り除いたパスにファイル拡張子が含まれていないので、Cloudflareはキャッシュすべきコンテンツか判断できず、結果としてキャッシュされないということです。
Cloudflareにキャッシュさせるには？
Cloudflareのダッシュボードでキャッシュルールを変更することで、Next.jsの画像をキャッシュできるようになります。
設定を変更したいWebサイトのCloudflareダッシュボードを開きます
サイドバーから［Caching］>［Cache Rules］を開きます
［ルールを作成］をクリックします
ルールの内容を次のように設定します
- ルール名：（わかりやすい任意の名前）
- カスタムフィルタ式
- フィールド：［URIパス］
- オペレーター：［次で始まる］
- 値：
/_next/image
- キャッシュの適格性：［キャッシュの対象］
- エッジTTL：［存在する場合は cache-control ヘッダーを使用し、存在しない場合は Cloudflare のデフォルト TTL でリクエストのレスポンス ステータスをキャッシュします］（※お好みでほかのものでも可）
ルールを保存します
Webサイトを開いてリロードし、画像のレスポンスヘッダーが
cf-cache-status: HITとなっていることを確認します
記事をシェア
フォローして最新情報を入手
Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。
関連記事
-1.png&w=1080&q=75)
生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。
Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。
