Cloudflare Pages Git統合からGitHub Actions Direct Uploadへの移行記録

概要

Cloudflare PagesのGit統合を設定したが、デプロイ後「Hello world」しか表示されない問題が発生。最終的にGitHub ActionsによるDirect Upload方式に変更することで解決を試みている。

発生した問題

症状

Git統合でビルドは成功（131ルートがプリレンダリング）
しかしサイトにアクセスすると「Hello world」しか表示されない
Cloudflareダッシュボードに「コードを編集する」ボタンが表示される

原因

Cloudflare Pages と Workers の統合: 2025年にPagesがWorkersに完全統合された
デフォルトWorkerスクリプト: Git統合で作成したプロジェクトがWorkerとして認識され、デフォルトの「Hello world」スクリプトが実行されている
静的ファイル未配信: ビルドで生成されたdistフォルダの静的ファイルが配信されていない
wrangler.toml無視: Git統合ではwrangler.tomlの設定が反映されない

確認した内容

ビルドログ: 正常終了、145ファイル処理、131ルートプリレンダリング
distフォルダ: 正常に生成されている
Workerスクリプト: ダッシュボードで確認すると return new Response("Hello world") が実行されている

試した解決策（失敗）

1. nitro preset変更

// nuxt.config.ts
nitro: {
  preset: "cloudflare-pages-static"  // cloudflare-pages から変更
}

→ 効果なし

2. wrangler.toml の assets セクション追加

[assets]
directory = "./dist"
html_handling = "auto-trailing-slash"
not_found_handling = "single-page-application"

→ Git統合では無視される

3. _worker.js ファイル追加

// public/_worker.js
export default {
  async fetch(request, env) {
    return env.ASSETS.fetch(request);
  },
};

→ wrangler pages deploy時にエラー、Git統合では効果なし

4. ビルドキャッシュクリア

→ 効果なし

最終的な解決策: GitHub Actions + Direct Upload

Cloudflare Git統合の代わりに、GitHub ActionsからDirect Uploadする方式に変更。

構成

Git push → GitHub Actions → wrangler pages deploy (Direct Upload)

作成したファイル

`.github/workflows/deploy.yml`

name: Deploy to Cloudflare Pages

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'

      - name: Setup pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 10

      - name: Install dependencies
        run: pnpm install
        working-directory: apps/web

      - name: Generate static site
        run: pnpm generate
        working-directory: apps/web

      - name: Deploy to Cloudflare Pages
        run: npx wrangler pages deploy dist --project-name=mdx-playground
        working-directory: apps/web
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

`apps/web/wrangler.toml`

name = "mdx-playground"
compatibility_date = "2025-10-03"
pages_build_output_dir = "./dist"

完了した作業（2025-12-08）

1. GitHub Secrets の設定 ✅

以下のSecretsをGitHubリポジトリに追加済み:

Secret名	状態
`CLOUDFLARE_API_TOKEN`	設定済み
`CLOUDFLARE_ACCOUNT_ID`	設定済み

2. deploy.yml の修正 ✅

プロジェクト自動作成ステップを追加:

- name: Create Cloudflare Pages project (if not exists)
  run: npx wrangler pages project create mdx-playground --production-branch=master || true

3. Cloudflareプロジェクトの整理 ✅

Git統合プロジェクトは削除済み
GitHub Actionsでの初回デプロイ時に新しいプロジェクトが自動作成される

4. デプロイ成功 ✅

GitHub Actions でビルド & デプロイが正常に動作
https://mdx-playground.pages.dev でサイトが表示される

削除したファイル

apps/web/public/_worker.js - Pages Direct Uploadでは不要

参考リンク

教訓

Cloudflare Pages と Workers の統合後、Git統合の挙動が変わった
- 以前は静的ファイルが自動配信されていた
- 現在はWorkerスクリプトが優先される場合がある
wrangler.tomlはGit統合で必ずしも反映されない
- Direct Upload（wrangler pages deploy）では反映される
「コードを編集する」ボタンが出たら要注意
- Workerとして認識されている証拠
- 静的サイトとして扱われていない
GitHub Actions + Direct Uploadは確実
- wrangler pages deployは従来通り動作する
- Git pushで自動デプロイという体験は維持できる