Cloudflare Workers で静的ブログを配信する構成メモ

このサイトの配信構成を、GameStudioへの統合に合わせて整理しました。Astroで静的HTMLを生成し、デモだけReact islandsとして動かします。公開の初回接続と実URLは管理画面で設定します。

静的出力をそのまま配信する

astro.config.mjs は output: 'static'、出力先は dist です。静的サイトのためCloudflareアダプタは使いません。セッション用KV、画像サービス、生成設定へのリダイレクトにも依存しません。

wrangler.jsonc の配信設定は次の形です。Worker名は利用するCloudflare環境に合わせます。

{
  "name": "susanlab",
  "compatibility_date": "2026-08-10",
  "assets": {
    "directory": "./dist",
    "not_found_handling": "404-page"
  }
}

Workerのエントリーポイントや nodejs_compat は現在の静的構成には必要ありません。問い合わせフォームは送信前からデモと明示し、実際の送信先は持たせていません。

公開の入口を一本化する

ソースは独立した非公開GitHubリポジトリで管理します。Cloudflare Workers Buildsにはproduction branchを main、Rootを /、Buildを npm run build、Deployを npx wrangler deploy として登録します。

GitHub Actionsは型検査とビルドの確認に使います。公開はWorkers Buildsで行います。push成功と公開成功は別なので、push後にCloudflare側のビルド・公開結果を確認します。

ローカルで確かめる

npm ci で依存を揃え、npm run dev で編集し、npm run build と npm run preview で本番成果物を確認します。npm run deploy:check はWranglerのdry-runで、公開操作はしません。

日英記事の一覧・言語切替、404、RSS、下書き除外を確認します。実公開URLは設定を共用し、canonical・OGP・RSSへ反映します。

モデル・モーション・音声などの成果物はサイト内に置き、依存素材とクレジットを揃えます。共通コードもソースのスナップショットとして同梱します。これでサイト単独のcloneからビルドでき、クラウド環境でスタジオ内の相対パスを探す必要がなくなります。

各ファイルは25MiB以下に抑え、配置前と公開前に確認します。大きい素材は圧縮・変換・分割を検討します。

参考: Workers Builds設定、Workers Static Assets、AstroのCloudflare連携。