Nitroプリセット変更

変更内容

nuxt.config.tsのNitroプリセットを変更:

// Before
nitro: {
  preset: "cloudflare-pages-static",
}

// After
nitro: {
  preset: "cloudflare-pages",
}

変更理由

日本語作文クイズの結果をシェアする際に、動的にOGP画像を生成する必要があった。

例: /api/og/japanese-quiz?category=particles&correct=8&total=10

完全に静的なサイトを生成するcloudflare-pages-staticでは、サーバーサイドAPIルートが動作しない。 cloudflare-pagesに変更することで、静的プリレンダリングを維持しつつAPIルートをCloudflare Functionsとして動作させることができる。

2つのプリセットの違い

項目	cloudflare-pages-static	cloudflare-pages
静的ページ	✅ プリレンダリング	✅ プリレンダリング
サーバーAPIルート	❌ 不可	✅ Cloudflare Functions
ビルド成果物	HTMLファイルのみ	HTML + _worker.js
ユースケース	完全静的サイト	静的 + 動的API

なぜ静的ページに影響がないのか

nuxt.config.tsにはprerender設定が含まれている:

nitro: {
  preset: "cloudflare-pages",
  prerender: {
    crawlLinks: true,  // リンクを辿って自動的にページを静的生成
    routes: ['/blog', '/']  // 明示的にプリレンダリングするルート
  }
}

この設定により:

crawlLinks: true - ビルド時にサイト内のリンクを辿り、発見したページを全て静的HTMLとして生成
routes: ['/blog', '/'] - 起点となるルートを明示的に指定

cloudflare-pagesプリセットは、この静的ファイル群に加えてCloudflare Functionsを生成する。静的ページの生成ロジック自体は-staticの有無に関係なく、prerender設定によって制御される。

影響範囲

影響なし

既存のコンテンツページ（/2025-xx-xx/...）
ブログ一覧ページ
コーディング規約ビューア
静的アセット（画像、フォント等）

新たに可能になること

サーバーサイドAPIルート（server/api/）
動的OGP画像生成
その他のサーバーサイド処理

ビルドコマンドの変更

GitHub Actionsのデプロイワークフローも変更が必要:

# Before
- name: Generate static site
  run: pnpm generate

# After
- name: Build application
  run: pnpm build

generate vs buildの違い:

コマンド	動作
`nuxt generate`	完全静的サイト生成（サーバールート無視）
`nuxt build`	フルビルド（サーバールート含む）

cloudflare-pagesプリセットでサーバーAPIを使うにはbuildコマンドが必要。

nuxt-og-image の設定変更

nuxt-og-imageモジュールもCloudflare Workers向けに設定変更が必要:

ogImage: {
  runtimeCacheStorage: false,
  compatibility: {
    runtime: {
      // Cloudflare Workers向け: WASMベースのレンダラーを使用
      chromium: false,
      satori: 'wasm',
      resvg: 'wasm'
    },
    prerender: {
      // ビルド時はNode.jsを使用
      satori: 'node',
      resvg: 'node'
    }
  }
}

理由:

Cloudflare WorkersはNode.jsネイティブモジュールをサポートしない
WASMベースのレンダラーを使うことでエッジ環境でも動作可能
プリレンダリング時はNode.js環境なので高速なネイティブを使用