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 するだけで済むこと。デプロイし忘れがなくなり、ローカル環境の状態に依存しない。

直接デプロイとGitHub Actionsでの自動デプロイ

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 へデプロイ

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

キー	役割
on	トリガー条件（push、PR など）
jobs	実行するジョブの定義
steps	ジョブ内の手順（上から順に実行）
uses	外部アクションの利用
run	シェルコマンドの直接実行

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つ。次節以降で値を取得しながら順番に登録していく。

Name	Value
CLOUDFLARE_ACCOUNT_ID	次節で確認する
CLOUDFLARE_API_TOKEN	2-3 で作成する

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

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

Cloudflare ダッシュボード → Compute → Workers & Pages を開く。右カラムに表示される Account ID をコピー。

Account ID (Cloudflare)

GitHub のサイトで CLOUDFLARE_ACCOUNT_ID として登録する。

CLOUDFLARE_ACCOUNT_IDの登録 (GitHub)

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

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

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

以下の権限を設定する。

項目	設定値
Token name	任意（例：kerokero）
Permissions - Account	Cloudflare Pages — Edit
Permissions - Account	D1 — Edit（D1 を使う場合）
Permissions - User	User Details — Read
Account Resources	Include — 自分のアカウントのみ

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

D1を使うケースの設定例 (Cloudflare)

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

CLOUDFLARE_API_TOKENの登録 (GitHub)

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

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

ハンズオン	内容
Claude CodeでWebアプリを作ってGitHub ActionsでCloudflareに公開する	静的サイトのデプロイ
Claude Codeでデータ共有型Webアプリを作ってCloudflareで公開する	D1 マイグレーション＋Pages デプロイ

4. 開発の流れ

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

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

備忘録

• wranglerVersion: "4" を各ステップに明示しないと古いバージョン（3.90.0 等）にフォールバックすることがある
• compatibility_date は UTC 基準のため、JST の今日の日付は未来日になる場合がある — 前日以前の日付を指定する
• このガイドのハンズオンでは Cloudflare Pages の Git連携は使わず、GitHub Actions から wrangler pages deploy する — ダッシュボードからリポジトリを連携すると、Pages / Workers の選択や自動検出された build 設定によって、想定外のコマンド・出力先で失敗することがあるため
• API トークンは作成時に一度しか表示されない — 紛失した場合は新しく作り直してSecrets を更新する
• Cloudflare は長期的に Pages の機能を Workers へ統合する方針を示しているが、2026年時点では強制移行の期限は発表されておらず、Pages は引き続き利用できる