GitHub ActionsでCloudflare自動デプロイを設定する

このガイドは、GitHub Actions の仕組みと、Cloudflare への自動デプロイに必要な設定をまとめたもの。具体的なワークフロー YAML は各ハンズオンを参照。

1. GitHub Actions とは

1-1. push したら自動でデプロイされる仕組み

GitHub Actions は、GitHub が提供する自動化ツール。リポジトリへの push などをトリガーに、あらかじめ定義した処理を自動で実行できる。

Cloudflare へのデプロイに使う場合、流れはこうなる。

開発者
  └─ git push
       └─ GitHub が push を検知
            └─ GitHub Actions が起動
                 ├─ D1 マイグレーション（DB あきの場合）
                 └─ Cloudflare Pages へデプロイ

手動デプロイ（npx wrangler pages deploy）と比べたメリットは、push するだけで済むこと。デプロイし忘れがなくなり、ローカル環境の状態に依存しない。

1-2. ワークフローファイルとは

GitHub Actions の処理内容は、リポジトリ内の .github/workflows/ フォルダに YAML ファイルとして記述する。

my-project/
  └─ .github/
       └─ workflows/
            └─ deploy.yml   ← ワークフローファイル

ワークフローファイルの基本構造：

on:           # いつ実行するか（トリガー）
  push:
    branches: [main]

jobs:         # 何をするか（ジョブ）
  deploy:
    runs-on: ubuntu-latest
    steps:    # ジョブの中の個別手順

      - uses: actions/checkout@v4   # リポジトリをチェックアウト
      - uses: cloudflare/wrangler-action@v3  # Cloudflare へデプロイ

各キーの意味は参考程度に。覚えなくてよい。

1-3. ワークフローファイルはどうやって作るか

ワークフローファイルは Claude Code に相談しながらゼロから作ることもできる。「GitHub Actions で Cloudflare Pages にデプロイするワークフローを作って」と伝えれば、構成に合わせたものを生成してくれる。

ただし、動作確認済みのテンプレートがあるならそちらを使う方が確実。ゼロから作ると細かいオプションの抜け漏れでハマることがある。

このハンズオンシリーズでは、実働実績のあるテンプレートを各ハンズオンに掲載している。まずはそれをそのまま使い、慣れてきたら Claude Code と相談しながらカスタマイズしていくとよいだろう。

2. 事前準備（初回のみ）

GitHub Actions が Cloudflare を操作するには、認証情報を GitHub に登録しておく必要がある。この設定はリポジトリごとに一度だけ行う。

先に登録先の画面を開いておいて、値を取得したらその場で貼り付けていく流れで進める。

2-1. GitHub Secrets の登録画面を開く

GitHub のサイトで行う

GitHub リポジトリ → Settings → Secrets and variables → Actions → New repository secret を開く。

登録するのは以下の2つ。次節以降で値を取得しながら順番に登録していく。

2-2. Cloudflare Account ID を確認して登録する

Cloudflare のサイトで確認し、GitHub に登録する

Cloudflare ダッシュボード → Compute → Workers & Pages を開く。右カラムに表示される Account ID をコピーして、GitHub のサイトで CLOUDFLARE_ACCOUNT_ID として登録する。

2-3. Cloudflare API トークンを作成して登録する

Cloudflare のサイトで作成し、GitHub に登録する

右上 👤 アイコン → Profile → API Tokens → Create Token → Create Custom Token をクリック。

以下の権限を設定する。

Account Resources はデフォルトの All accounts のままにしない。自分のアカウントだけに絞ることで、不要なスコープを与えずに済む。

D1を使うケースの設定例

Continue to summary → Create Token をクリック。表示されたトークン文字列をコピーして（トークンは一度しか表示されない）、GitHub のサイトで CLOUDFLARE_API_TOKEN として登録する。

3. 個別ハンズオンとの関係

このガイドは概念と共通設定の説明にとどめている。具体的なワークフロー YAML（どのステップを何の順番で実行するか）は、各ハンズオンを参照。

4. 開発の流れ

設定が整うと、以下のサイクルで開発が進む。

1. Claude Code にコードを書いてもらう
2. ローカルで動作確認する（任意）
3. GitHub に push
4. GitHub Actions が自動でデプロイ
5. 本番環境（https://アプリ名.pages.dev など）で動作確認
6. 修正があればまた Claude Code に依頼 → push

5. 備忘録

• wranglerVersion: "4" を各ステップに明示しないと古いバージョン（3.90.0 等）にフォールバックすることがある
• compatibility_date は UTC 基準のため、JST の今日の日付は未来日になる場合がある — 前日以前の日付を指定する
• Cloudflare Pages の Git 連携（ダッシュボードから GitHub リポジトリを直接連携する機能）は使わない — Deploy command が自動設定されてエラーになる
• API トークンは作成時に一度しか表示されない — 紛失した場合は新しく作り直してSecrets を更新する

2026-05-08　タツヲ (yto)