configure-cache-busting

このスキルを使用するタイミング

このスキルを使用するケース	別の方法を使用するケース
Next.js または Vite のビルドでコンテンツハッシュを設定する場合	サーバー側のキャッシュ（nginx、CDN 設定を直接）を最適化する場合
Vercel または Cloudflare の CDN キャッシュヘッダーを設定する場合	ビルド出力の問題をデバッグする場合（system-debugging エージェント）
フレームワークのアップグレード後にキャッシュバスティングへの準拠を確認する場合	一般的な CI/CD ワークフローを設定する場合（/configure:workflows）
ハッシュ付きアセットのビルド検証スクリプトを追加する場合	コンテナのビルドを設定する場合（/configure:container）
プロジェクト全体の静的アセットのキャッシュ戦略を監査する場合	フロントエンドのパフォーマンスをプロファイリングする場合（ブラウザーの開発者ツール）

コンテキスト

• プロジェクトルート：!pwd
• パッケージファイル：!find . -maxdepth 1 -name 'package.json'
• Next.js の設定：!find . -maxdepth 1 -name 'next.config.*'
• Vite の設定：!find . -maxdepth 1 -name 'vite.config.*'
• ビルド出力：!find . -maxdepth 1 -type d \( -name '.next' -o -name 'dist' -o -name 'out' \)
• CDN 設定：!find . -maxdepth 2 \( -path './vercel.json' -o -path './_headers' -o -path './_redirects' -o -path './public/_headers' \)
• プロジェクト標準：!find . -maxdepth 1 -name '.project-standards.yaml'

パラメーター

コマンド引数から解析します：

• --check-only：変更せずに準拠状況を報告します（CI/CD モード）
• --fix：確認を求めずに修正を自動適用します
• --framework <nextjs|vite>：フレームワークの検出結果を上書きします
• --cdn <cloudflare|vercel|none>：キャッシュヘッダー設定に使用する CDN プロバイダーを指定します

実行

このキャッシュバスティング設定チェックを実行します：

ステップ 1：プロジェクトのフレームワークを検出する

ファイル構成からフレームワークを特定します：

指標	フレームワーク	設定ファイル
next.config.js または next.config.mjs	Next.js	next.config.*
next.config.ts	Next.js	next.config.ts
vite.config.js または vite.config.ts	Vite	vite.config.*
.next/ ディレクトリ	Next.js（ビルド済み）	検出のみ
dist/ ディレクトリと package.json 内の vite	Vite（ビルド済み）	検出のみ

package.json の依存関係に "next" または "vite" が含まれているか確認します。

両方が検出された場合は、--framework で指定するようユーザーに求めます。どちらも検出されない場合は、未対応と報告して終了します。

ステップ 2：現在のキャッシュバスティング状態を分析する

検出されたフレームワークについて、設定ファイルを読み取り、次を確認します：

Next.js - next.config.js/ts を読み取り、次を確認します：

• 決定論的なビルドのために generateBuildId が設定されている
• CDN 用に assetPrefix が設定されている
• compress: true が有効になっている
• セキュリティのために poweredByHeader: false が設定されている
• generateEtags が設定されている
• headers() 関数でキャッシュヘッダーが設定されている

Vite - vite.config.js/ts を読み取り、次を確認します：

• build.rollupOptions.output.entryFileNames が [hash] を使用している
• build.rollupOptions.output.chunkFileNames が [hash] を使用している
• build.rollupOptions.output.assetFileNames が [hash] を使用している
• SSR／マニフェストベースのルーティング用に build.manifest: true が設定されている
• build.cssCodeSplit が適切に設定されている

ステップ 3：CDN プロバイダーを検出する

プロジェクトファイルから CDN を特定します：

指標	CDN プロバイダー
vercel.json が存在する	Vercel
.vercelignore が存在する	Vercel
ルートまたは public/ に _headers がある	Cloudflare Pages
_redirects が存在する	Cloudflare Pages / Netlify
wrangler.toml が存在する	Cloudflare Workers/Pages
上記のいずれにも該当しない	汎用／なし

ステップ 4：準拠レポートを生成する

書式付きの準拠レポートを出力します：

Cache-Busting Compliance Report
================================
Project: [name]
Framework: [Next.js 14.x | Vite 5.x]
CDN Provider: [Vercel | Cloudflare | None detected]

Framework Configuration:
  Config file             next.config.js              [EXISTS | MISSING]
  Asset hashing           [hash] in filenames         [ENABLED | DISABLED]
  Build manifest          manifest files              [GENERATED | MISSING]
  Deterministic builds    Build ID configured         [PASS | NOT SET]
  Compression             gzip/brotli enabled         [PASS | DISABLED]

Cache Headers:
  Static assets           immutable, 1y               [CONFIGURED | MISSING]
  HTML files              no-cache, must-revalidate   [CONFIGURED | MISSING]
  API routes              varies by route             [CONFIGURED | N/A]
  CDN configuration       vercel.json/_headers        [EXISTS | MISSING]

Build Output (if built):
  Hashed filenames        app.[hash].js               [DETECTED | NOT BUILT]
  Content addressing      Unique hashes per version   [PASS | DUPLICATE]
  Manifest integrity      Valid manifest.json         [PASS | INVALID]

Overall: [X issues found]

Recommendations:
  [List specific fixes needed]

--check-only の場合は、ここで停止します。

ステップ 5：設定を適用する（--fix の場合、またはユーザーが確認した場合）

検出されたフレームワークに基づき、REFERENCE.md のテンプレートを使用して設定ファイルを作成または更新します：

1. Next.js：決定論的なビルド、圧縮、キャッシュヘッダーを使用して next.config.js/ts を更新します
2. Vite：コンテンツハッシュ、マニフェスト、チャンク分割を使用して vite.config.js/ts を更新します

ステップ 6：CDN キャッシュヘッダーを設定する

検出された CDN プロバイダーに基づいて、REFERENCE.md のテンプレートを使用し、キャッシュヘッダーの設定を作成または更新します。

• Vercel：ヘッダールールを含む vercel.json を作成または更新します
• Cloudflare Pages：キャッシュルールを含む public/_headers を作成します
• 汎用：nginx の設定例を提示します

ステップ 7：ビルド検証を追加する

ビルド後にコンテンツのハッシュ化が機能していることを検証する scripts/verify-cache-busting.js を作成します。ビルド検証用のスクリプトを package.json に追加します。REFERENCE.md の検証スクリプトのテンプレートを使用してください。

ステップ 8：CI/CD 検証を設定する

GitHub Actions ワークフローにキャッシュバスティングの検証ステップを追加します。REFERENCE.md の CI ワークフローのテンプレートを使用してください。

ステップ 9：標準の追跡情報を更新する

.project-standards.yaml を更新します。

standards_version: "2025.1"
last_configured: "[timestamp]"
components:
  cache-busting: "2025.1"
  cache-busting-framework: "[nextjs|vite]"
  cache-busting-cdn: "[vercel|cloudflare|none]"
  cache-busting-verified: true

ステップ 10：最終レポートを出力する

適用した変更の概要、キャッシュ戦略の概要、検証に向けた次のステップを出力します。

詳細な設定テンプレートとコード例については、REFERENCE.md を参照してください。

エージェント向けの最適化

コンテキスト	コマンド
コンプライアンスを簡易チェック	/configure:cache-busting --check-only
すべての問題を自動修正	/configure:cache-busting --fix
Next.js プロジェクトのみ	/configure:cache-busting --fix --framework nextjs
Vite プロジェクトのみ	/configure:cache-busting --fix --framework vite
Cloudflare CDN ヘッダー	/configure:cache-busting --fix --cdn cloudflare
Vercel CDN ヘッダー	/configure:cache-busting --fix --cdn vercel

出力

以下を提示します。

1. フレームワークと CDN の設定状況を含むコンプライアンスレポート
2. 実施した変更（--fix の場合）または提案した変更（対話形式の場合）の一覧
3. 検証手順とコマンド
4. CDN キャッシュヘッダーの例
5. デプロイと監視に向けた次のステップ

関連項目

• /configure:all - すべてのコンプライアンスチェックを実行
• /configure:status - コンプライアンスの概要を簡易表示
• /configure:workflows - GitHub Actions ワークフローの標準
• /configure:dockerfile - ビルドキャッシュを使用したコンテナーの設定
• Next.js ドキュメント - https://nextjs.org/docs/pages/api-reference/next-config-js
• Vite ドキュメント - https://vitejs.dev/config/build-options.html
• Web.dev のキャッシュガイド - https://web.dev/http-cache/