Cloudflare Pages × GitHub 自動デプロイ設定ガイド

概要

Cloudflare PagesとGitHubリポジトリを連携することで、GitHubにプッシュするだけで自動的にビルド・デプロイが実行されます。

主な機能

• 自動デプロイ: mainブランチへのプッシュで自動デプロイ
• プレビューデプロイ: プルリクエストごとにプレビューURL生成
• ビルドステータス: GitHubにビルド状況を通知
• 無料プラン: 基本的な機能は無料で利用可能

設定手順

1. Cloudflare Pagesへアクセス

1. Cloudflare Dashboardにログイン
2. 左側メニューから Workers & Pages を選択
3. Create application をクリック
4. Pages タブを選択
5. Connect to Git をクリック

2. GitHubリポジトリの接続

1. GitHub を選択（初回のみ認証が必要）
2. Cloudflare Pagesアプリケーションに権限を付与
   • すべてのリポジトリ、または特定のリポジトリを選択
3. 接続したいリポジトリを選択
4. Begin setup をクリック

3. ビルド設定の構成

プロジェクトの設定画面で以下を設定：

基本設定

• Project name: プロジェクト名（URL: <project-name>.pages.dev）
• Production branch: 本番デプロイのブランチ（通常は main または master）

ビルド設定

フレームワークに応じて設定（例: Nuxt.js の場合）:

Framework preset: Nuxt.js
Build command: pnpm run build
Build output directory: .output/public

環境変数

必要に応じて環境変数を追加:

• Variable name: 変数名
• Value: 値

4. デプロイの開始

Save and Deploy をクリックすると、初回ビルドが開始されます。

自動デプロイの動作

自動デプロイフロー

graph TB
    subgraph "開発者の操作"
        A1[コード変更]
        A2[git commit]
        A3[git push]
    end

    subgraph "GitHub"
        B1[mainブランチ]
        B2[featureブランチ]
        B3[Pull Request]
    end

    subgraph "Cloudflare Pages"
        C1[Webhook受信]
        C2[ビルド実行]
        C3[Production Deploy]
        C4[Preview Deploy]
    end

    A1 --> A2
    A2 --> A3
    A3 -->|push to main| B1
    A3 -->|push to feature| B2
    B2 --> B3

    B1 --> C1
    B3 --> C1
    C1 --> C2
    C2 -->|main branch| C3
    C2 -->|PR branch| C4

    C3 -->|URL| D1[https://project-name.pages.dev]
    C4 -->|URL| D2[https://commit-hash.project-name.pages.dev]

    style C3 fill:#4CAF50
    style C4 fill:#2196F3

Production デプロイ

• トリガー: Production ブランチ（main/master）へのプッシュ
• デプロイ先: https://<project-name>.pages.dev
• 動作: 自動的にビルド・デプロイが実行される

Preview デプロイ

• トリガー: プルリクエストの作成・更新
• デプロイ先: https://<commit-hash>.<project-name>.pages.dev
• 動作: PRごとに独自のプレビューURLが生成される

詳細設定

ブランチコントロール

プロジェクトの Settings > Builds & deployments で設定:

Preview デプロイの制御

1. Branch deployments: すべてのブランチ or 特定のブランチのみ
2. Enable preview deployments: プレビューデプロイの有効/無効
3. Branch patterns: デプロイ対象ブランチのパターン指定

ビルドキャッシュ

• Enable build cache: ビルド時間短縮のためのキャッシュ有効化

カスタムドメインの設定

1. プロジェクトの Custom domains タブ
2. Set up a custom domain をクリック
3. ドメイン名を入力
4. DNSレコードを設定（自動 or 手動）

デプロイフック（Webhook）

外部トリガーでデプロイを実行したい場合:

1. Settings > Builds & deployments
2. Deploy hooks セクション
3. Create deploy hook をクリック
4. フック名とブランチを指定
5. 生成されたURLにPOSTリクエストを送信

curl -X POST https://api.cloudflare.com/client/v4/pages/webhooks/deploy_hooks/<hook-id>

GitHub Actions による高度な制御

より細かい制御が必要な場合は、GitHub Actions + Wrangler を使用:

name: Deploy to Cloudflare Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: pnpm install
      - run: pnpm build
      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          command: pages deploy .output/public --project-name=<project-name>

トラブルシューティング

ビルドが失敗する

1. ローカルでビルド確認: pnpm build が成功するか確認
2. Node.js バージョン: 環境変数 NODE_VERSION で指定
3. ビルドログ確認: Cloudflare Dashboard でログを確認

自動デプロイが動作しない

1. GitHub連携確認: Settings > Integrations で接続状態を確認
2. ブランチ設定確認: Production ブランチ名が正しいか確認
3. 権限確認: GitHubアプリの権限が適切か確認

デプロイは成功するがサイトが表示されない

1. 出力ディレクトリ確認: Build output directory が正しいか確認
2. ファイル構成確認: index.html が出力されているか確認
3. ルーティング設定: SPA の場合 _redirects ファイルが必要

参考リンク

• Cloudflare Pages Documentation
• Git Integration
• Build Configuration
• Custom Domains

注意事項

• Git連携を有効にすると、後から Direct Upload に切り替えることはできません
• 無料プランでは月間500ビルド、帯域幅無制限
• ビルド時間は最大20分まで（無料プラン）