React SPA を Cloudflare Pages へ GitHub Actions で自動デプロイする設定方法。

ワークフローファイル

.github/workflows/deploy.yml:

name: Deploy to Cloudflare Pages

on:
  push:
    branches: [main]
    paths:
      - 'react-spa-cloudflare/**'
  workflow_dispatch:

defaults:
  run:
    working-directory: react-spa-cloudflare

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write

    steps:
      - uses: actions/checkout@v4

      - name: Use Node.js 22
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'
          cache-dependency-path: react-spa-cloudflare/package-lock.json

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: $
          accountId: $
          command: pages deploy dist --project-name=react-spa-cloudflare
          workingDirectory: react-spa-cloudflare

必要な Secrets

GitHub Repository → Settings → Secrets → Actions で設定:

Secret 取得方法
CLOUDFLARE_ACCOUNT_ID Cloudflare ダッシュボード右サイドバー
CLOUDFLARE_API_TOKEN Profile → API Tokens → Create Token

API Token の権限

「Create Custom Token」で以下を設定:

  • Permissions: Account → Cloudflare Pages → Edit
  • Account Resources: 対象アカウントを選択

初回セットアップ (Makefile)

pages-login:
	npx wrangler login

pages-create:
	npx wrangler pages project create react-spa-cloudflare --production-branch=main

deploy:
	npm run build
	npx wrangler pages deploy dist --project-name=react-spa-cloudflare

make pages-login   # Cloudflare にログイン
make pages-create  # Pages プロジェクト作成
make deploy        # 初回デプロイ

wrangler.toml

Pages 用の設定ファイル。[build] セクションは使用不可。

name = "react-spa-cloudflare"
compatibility_date = "2024-01-01"
pages_build_output_dir = "dist"

カスタムドメイン

デプロイ後、Cloudflare ダッシュボードで設定:

  1. Workers & Pages → プロジェクト選択
  2. Custom domains → Set up a custom domain
  3. サブドメイン入力 → Activate domain

DNS が Cloudflare にある場合、CNAME は自動追加される。

トラブルシューティング

Authentication error [code: 10000]

API Token の権限不足。Cloudflare Pages:Edit 権限があるか確認。

Configuration file does not support “build”

wrangler.toml から [build] セクションを削除。Pages CLI では非サポート。