ページの提供
Cloudflare Pages には、Pages サイトを提供するためのいくつかのデフォルト設定が含まれています。このページでは、それらの決定のいくつかを詳述し、Pages の動作を理解し、デフォルトの動作をオーバーライドする方法を検討できるようにします。
現在リクエストされたルートに一致するパスを持つ HTML ファイルが見つかった場合、Pages はそれを提供します。また、Pages は HTML ページを拡張子なしの対応物にリダイレクトします。たとえば、/contact.html は /contact にリダイレクトされ、/about/index.html は /about/ にリダイレクトされます。
リクエストされたファイルが見つからない場合に表示するカスタムページを定義するには、404.html ファイルを作成します。Pages は次に、最も近い 404 ページを探そうとします。リクエスト中のルートと同じディレクトリに 404 ページが見つからない場合、Pages は一致する 404.html ファイルを見つけるためにディレクトリツリーを上にさかのぼります。これにより、/blog/404.html や /404.html のようなカスタム 404 パスを定義でき、状況に応じて正しいものが自動的にレンダリングされます。
プロジェクトにトップレベルの 404.html ファイルが含まれていない場合、Pages はシングルページアプリケーションをデプロイしていると見なします。これには、React、Vue、Angular などのフレームワークが含まれます。Pages のデフォルトのシングルページアプリケーションの動作は、すべての受信パスをルート (/) にマッチさせ、/about や /help のような URL をキャッチし、SPA 内から応答できるようにします。
ほとんどの状況では、サイトにカスタムキャッシングを設定することは避けるべきです。Pages には、できるだけ多くのキャッシングを最適化し、最新のコンテンツを提供するために最適化された組み込みのキャッシングデフォルトが付属しています。資産を Pages にデプロイするたびに、その資産は次のデプロイメントまで Cloudflare CDN にキャッシュされます。
したがって、カスタムドメイン にキャッシングを追加すると、デプロイ後に古い資産が提供される可能性があります。
さらに、カスタムドメインにキャッシングを追加すると、Pages のリダイレクト や Pages の関数 に問題が発生する可能性があります。これらの問題は、キャッシュされた応答が Pages がリクエストに対処する前にエンドユーザーに提供される可能性があるために発生します。
ただし、Cache Rules がカスタムドメインに適用される状況もあります。たとえば、CSS やファイル名にコンテンツハッシュを含む JS ファイルなど、変更不可能な資産のためのキャッシュ可能な場所があるかもしれません。この場合、カスタムキャッシングは役立ち、ファイル（および関連するファイル名）が変更されるまでユーザーエクスペリエンスを向上させることができます。リダイレクトや関数に干渉しないようにキャッシングを行うことを確認してください。
なお、Pages のカスタムドメインでは階層キャッシングはサポートされていません。
ブラウザキャッシングについて、Pages は常に 200 OK 応答に対して Etag ヘッダーを送信し、ブラウザはその後のリクエストで If-None-Match ヘッダーとして返します。Pages はリクエストの If-None-Match ヘッダーを送信予定の Etag と比較し、一致する場合は、Pages は代わりに 304 Not Modified で応答し、ブラウザにローカルキャッシュに保存されているものを使用することが安全であることを伝えます。
Pages は現在、HTTP 範囲リクエストに対して 200 応答を返します。ただし、チームは仕様に準拠した 206 部分応答を追加する作業を進めています。
Pages は可能な限り Gzip および Brotli 応答も提供します。
資産はデータセンターごとにキャッシュに挿入されます。資産の生存期間 (TTL) は 1 週間ですが、いつでも消える可能性があります。新しいデプロイを行うと、そのデータセンターに資産が最大 1 週間存在する可能性があります。
デフォルトでは、Pages は資産を提供する際にいくつかの HTTP 応答ヘッダー ↗ を自動的に追加します。これには以下が含まれます。
Access-Control-Allow-Origin: *Cf-Ray: $CLOUDFLARE_RAY_IDReferrer-Policy: strict-origin-when-cross-originEtag: $ETAGContent-Type: $CONTENT_TYPEX-Content-Type-Options: nosniffServer: cloudflare// 資産がエンコードされている場合Cache-Control: no-transformContent-Encoding: $CONTENT_ENCODING
// 資産がキャッシュ可能な場合（リクエストに `Authorization` または `Range` ヘッダーがない）Cache-Control: public, max-age=0, must-revalidate
// プレビュー URL 経由で資産をリクエストしている場合X-Robots-Tag: noindexCloudflare Pages によって追加されるヘッダーを変更するには、Early Hints を追加するために、プロジェクト内の _headers ファイル を更新してください。