[Cloudflare Pages] _headers でキャッシュとセキュリティヘッダを設定する

Cloudflare Pages は、リダイレクト用の _redirects と同じノリで、レスポンスヘッダを _headers で設定できます。Astro なら public/_headers に置けば dist/ 直下へコピーされて効きます。サーバー設定をいじらずにヘッダを足せるのが手軽です。

書式

パス を書いて、次の行からインデントして ヘッダ名: 値 を並べます。

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin

/images/*
  Cache-Control: public, max-age=31536000, immutable

/_astro/*
  Cache-Control: public, max-age=31536000, immutable

セキュリティヘッダ（全パスに適用）

/* で全レスポンスに最低限のセキュリティヘッダを付けています。

• X-Frame-Options: DENY — 他サイトの iframe への埋め込みを禁止（クリックジャッキング対策）
• X-Content-Type-Options: nosniff — MIME タイプの推測を無効化
• Referrer-Policy: strict-origin-when-cross-origin — 外部遷移時に送るリファラを抑える

個人ブログでもこのあたりは入れておいて損はないです。

キャッシュ（長期 immutable）

/images/* と /_astro/* には1年間の immutable キャッシュを指定しています。

Cache-Control: public, max-age=31536000, immutable

ポイントは /_astro/ 。Astro はビルド時に JS/CSS をファイル名にハッシュ付き（index.abc123.js のような名前）で出力します。内容が変わればファイル名も変わるので、古いファイルは一生キャッシュさせてOK＝ immutable が安全に効きます。immutable を付けると、再訪時にブラウザが再検証リクエストすら飛ばさなくなるので速いです。

画像も基本的に内容が変わらない前提で長期キャッシュにしています（差し替える場合はファイル名を変える運用にしておくと安心）。

反映の確認

ビルドして dist/ にコピーされているか確認。

npm run build
cat dist/_headers

デプロイ後は curl でヘッダを確認できます。

curl -sI https://nao-guitarist.com/_astro/ | grep -i cache-control

_redirects と _headers の2ファイルだけで、リダイレクトもキャッシュもセキュリティヘッダも完結するので、静的サイトの運用がかなり楽になりました。