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

GitHub Actions の仕組みと、Cloudflare への自動デプロイに必要な共通設定をまとめたもの

具体的なワークフロー YAML は各ハンズオンを参照

このスライドで扱うこと

• GitHub Actions の仕組みとワークフローファイル
• 事前準備（初回のみ）: Account ID 確認・API トークン作成・GitHub Secrets 登録
• 個別ハンズオンとの関係（静的サイト / D1 データ共有型）
• 設定後の開発サイクル
• ハマりどころメモ

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

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

開発者
  └─ 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   ← ワークフローファイル

push を検知すると、このファイルに書かれた手順を自動実行する

1-2. ワークフローファイルの基本構造

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

jobs:         # 何をするか（ジョブ）
  deploy:
    runs-on: ubuntu-latest
    steps:    # ジョブの中の個別手順
      - uses: actions/checkout@v4           # リポジトリをチェックアウト
      - uses: cloudflare/wrangler-action@v3 # Cloudflare へデプロイ

1-2. 各キーの意味（参考）

覚えなくてよい。テンプレートを使えば手で書くことはほとんどない

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

• Claude Code に相談しながらゼロから作ることもできる
  • 「GitHub Actions で Cloudflare Pages にデプロイするワークフローを作って」で生成してくれる
• ただし、動作確認済みのテンプレートがあるならそちらを使う方が確実
  • ゼロから作ると細かいオプションの抜け漏れでハマることがある

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

流れ

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

1. GitHub Secrets の登録画面を開く
2. Cloudflare Account ID を取得して登録
3. Cloudflare API トークンを作成して登録

登録するのはこの2つ：

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

GitHub のサイトで行う

GitHub リポジトリ → Settings → Secrets and variables → Actions → New repository secret

ここに CLOUDFLARE_ACCOUNT_ID と CLOUDFLARE_API_TOKEN を順に登録していく

2-2. Cloudflare Account ID を確認

Cloudflare のサイトで確認

Cloudflare ダッシュボード → Compute → Workers & Pages

右カラムに表示される Account ID をコピー

2-2. GitHub に Account ID を登録

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

2-3. Cloudflare API トークンを作成

Cloudflare のサイトで作成

右上 アイコン → Profile → API Tokens → Create Token → Create Custom Token

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

2-3. API トークン設定の例

D1 を使うケースの設定例

2-3. API トークンを GitHub に登録

Continue to summary → Create Token

表示されたトークン文字列をコピー（トークンは一度しか表示されない）

GitHub のサイトで CLOUDFLARE_API_TOKEN として登録

ワークフロー YAML は各ハンズオンに

具体的なワークフロー YAML（どのステップを何の順番で実行するか）は、各ハンズオンを参照

設定が整ったあとのサイクル

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

ハマりどころ（1/2）

• wranglerVersion: "4" を各ステップに明示しないと古いバージョン（3.90.0 等）にフォールバックすることがある
• compatibility_date は UTC 基準のため、JST の今日の日付は未来日になる場合がある — 前日以前の日付を指定する

ハマりどころ（2/2）

• このガイドのハンズオンでは Cloudflare Pages の Git 連携は使わず、GitHub Actions から wrangler pages deploy する
  • ダッシュボードからリポジトリを連携すると、Pages / Workers の選択や自動検出された build 設定によって、想定外のコマンド・出力先で失敗することがあるため
• API トークンは作成時に一度しか表示されない — 紛失した場合は新しく作り直して Secrets を更新する
• Cloudflare は長期的に Pages の機能を Workers へ統合する方針を示しているが、2026年時点では強制移行の期限は発表されておらず、Pages は引き続き利用できる

ありがとうございました

タツヲ (@yto)

vibecodingnotes.com