Cloudflare Pages には、Pages サイトを配信するためのいくつかのデフォルトがあります。このページではその判断を説明します。Pages の動きを理解し、デフォルトの一部を上書きするかどうかを検討できます。
現在リクエストされたルートと一致するパスの HTML ファイルが見つかると、Pages はそのファイルを配信します。Pages は HTML ページを拡張子なしの対応パスへリダイレクトします。たとえば、/contact.html は /contact へ、/about/index.html は /about/ へリダイレクトされます。
Pages がリクエストされたファイルを見つけられないときに表示するカスタムページは、404.html ファイルを作成して定義できます。Pages は最も近い 404 ページを探します。現在リクエストしているルートと同じディレクトリに見つからない場合は、ディレクトリツリーを上へたどって一致する 404.html を探し、最後は /404.html です。そのため、/blog/404.html と /404.html のように状況ごとのカスタム 404 パスを定義でき、Pages は状況に応じて正しいページを自動でレンダリングします。
プロジェクトの最上位に 404.html ファイルがない場合、Pages はシングルページアプリケーションをデプロイしているとみなします。React、Vue、Angular などのフレームワークが該当します。Pages のデフォルトのシングルページアプリケーション動作は、入ってきたパスをすべてルート(/)にマッチさせます。これにより、/about や /help のような URL を捕捉し、SPA 内で応答できます。
ほとんどの場合、サイトにカスタムキャッシュを設定しないでください。Pages には組み込みのキャッシュデフォルトがあり、できるだけ多くキャッシュしつつ、最新のコンテンツを届けるように最適化されています。Pages にアセットをデプロイするたびに、そのアセットは次のデプロイまで Cloudflare CDN 上でキャッシュされたままです。
そのため、カスタムドメイン にキャッシュを追加すると、デプロイ後に古いアセットが配信されることがあります。
さらに、カスタムドメインへのキャッシュ追加は、Pages のリダイレクト や Pages Functions で問題を起こすことがあります。キャッシュされたレスポンスが、Pages がリクエストを処理する前にエンドユーザーへ届くことがあるためです。
一方で、カスタムドメインの Cache Rules が意味を持つ場合もあります。たとえば、ファイル名にコンテンツハッシュを含む CSS や JS など、不変アセット向けのキャッシュしやすい場所がある場合です。この場合、カスタムキャッシュはファイル(と関連するファイル名)が変わるまでユーザー体験を速くできます。キャッシュがリダイレクトや Functions を妨げないようにしてください。
Cloudflare Pages を使うと、Pages プロジェクトの一部としてアップロードした静的アセットは、自動的に Tiered Cache から配信されます。Pages プロジェクトが動作するカスタムドメインで、Tiered Cache を別途有効にする必要はありません。
ブラウザキャッシュでは、Pages は 200 OK レスポンスに常に Etag ヘッダーを送ります。ブラウザは、そのアセットへの後続リクエストで If-None-Match ヘッダーとして返します。Pages はリクエストの If-None-Match ヘッダーと、これから送る Etag を比較し、一致すれば代わりに 304 Not Modified を返します。これにより、ブラウザはローカルキャッシュの内容を使ってよいと判断します。
Pages は現在、HTTP レンジリクエストに対して 200 レスポンスを返します。ただし、仕様に準拠した 206 部分レスポンスの追加に取り組んでいます。
可能であれば、Pages は Gzip と Brotli のレスポンスも配信します。
アセットはデータセンターごとにキャッシュへ挿入されます。アセットの time-to-live(TTL)は 1 週間ですが、いつでも消えることがあります。新しいデプロイを行うと、そのデータセンターでは最大 1 週間アセットが残ることがあります。
デフォルトでは、Pages はアセット配信時にいくつかの HTTP レスポンスヘッダー ↗ を自動追加します。次が含まれます。
Access-Control-Allow-Origin: *
Cf-Ray: $CLOUDFLARE_RAY_ID
Referrer-Policy: strict-origin-when-cross-origin
Etag: $ETAG
Content-Type: $CONTENT_TYPE
X-Content-Type-Options: nosniff
Server: cloudflare// if the asset has been encoded
Cache-Control: no-transform
Content-Encoding: $CONTENT_ENCODING
// if the asset is cacheable (the request does not have an `Authorization` or `Range` header)
Cache-Control: public, max-age=0, must-revalidate
// if requesting the asset over a preview URL
X-Robots-Tag: noindexCloudflare Pages が追加するヘッダーを変更するには(たとえば Early Hints を追加する場合)、プロジェクトの _headers ファイル を更新します。