GitHub ActionsでCloudflare Pagesにデプロイする方法まとめ

1. Cloudflare Account IDの取得

Account IDの場所

• Cloudflareダッシュボード: https://dash.cloudflare.com/
• 場所1: Account Homeページでアカウント名横のメニューボタン → 「Copy account ID」
• 場所2: Overviewページ下部の**「API」セクション** → 「Account ID」 → 「Click to copy」
• 場所3: Workers & Pages → **「Account details」**セクション
• 形式: 32文字の英数字（例: 1234567890abcdef1234567890abcdef）

2. Cloudflare API Tokenの作成

推奨するAPIトークン設定

Token name: GitHub Actions Pages Deploy

Permissions:
- Account - Cloudflare Pages:Edit
- Account - Account:Read
- Zone - Zone:Read (オプション)

Account Resources:
- Include - All accounts

Zone Resources:  
- Include - All zones (オプション)

既存のトークンから選択する場合

• 「CLOUDFLARE_API_TOKEN」: 多くの権限を持つ包括的なトークン ✅
• 「Cloudflare Workers を編集する」: Pages権限不足 ❌
• 「Workers Builds - 2025-04-30 23:00」: 有効期限あり ❌
• 「Global API Key」: セキュリティ上非推奨 ❌

3. Cloudflare Pagesプロジェクトの作成

1. Cloudflareダッシュボード → Workers & Pages
2. 「Create application」 → 「Pages」
3. プロジェクト名: new-com-system（ワークフローファイルと一致させる）
4. 「Create project」

4. GitHubのSecrets設定

GitHubリポジトリ → Settings → Secrets and variables → Actions

Name: CLOUDFLARE_API_TOKEN
Value: (コピーしたAPIトークン値)

Name: CLOUDFLARE_ACCOUNT_ID  
Value: (コピーしたAccount ID)

5. GitHub Actionsワークフローファイル

完全なワークフロー例

name: Deploy to Cloudflare Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    needs: build-and-test  # 前のジョブの完了を待つ
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main' && github.event_name == 'push'
    
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Use Node.js 20.x
        uses: actions/setup-node@v4
        with:
          node-version: 20.x
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build project
        run: npm run build

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy dist --project-name=new-com-system --commit-dirty=true

ワークフローの詳細説明

• needs: build-and-test: 前のジョブが成功してから実行
• if: github.ref == 'refs/heads/main': mainブランチのみ
• npm ci: package-lock.jsonに基づくクリーンインストール
• npm run build: プロジェクトをビルドしてdistフォルダに出力
• --commit-dirty=true: git未コミット変更の警告を抑制
• --project-name=new-com-system: Cloudflare Pagesのプロジェクト名

6. 主なエラーと解決法

「Project not found」エラー

• 原因: Cloudflare Pagesにプロジェクトが存在しない
• 解決: 事前にCloudflareでプロジェクトを作成

「Authentication error [code: 10000]」

• 原因: APIトークンの権限不足
• 解決: Cloudflare Pages:Edit権限を追加

「uncommitted changes」警告

• 原因: git作業ディレクトリに未コミット変更
• 解決: --commit-dirty=trueオプションを追加

7. 実行フロー

1. mainブランチにpush
2. GitHub Actionsが自動実行
3. 依存関係インストール → ビルド → デプロイ
4. Cloudflare PagesでWebサイト公開

8. セキュリティのポイント

• APIトークン: 必要最小限の権限のみ設定
• GitHub Secrets: 機密情報は必ずSecretsに保存
• Account ID: 公開されても問題ないが、念のためSecretsに保存
• Global API Key: 使用しない（全権限を持つため危険）

この設定により、mainブランチへのpushで自動的にCloudflare Pagesにデプロイされる**継続的デプロイメント（CD）**が完成します！