kt-tech.blog

画像

【設定・環境構築】GitHub Actions で Cloudflare Workers への CI/CD パイプラインを構築する

Share
💡
GitHub Actions で Cloudflare Workers への自動デプロイと手動デプロイを構築する方法を解説します。workflow_dispatch の制約や concurrency 設定など、実際にハマったポイントも共有します。

はじめに

Cloudflare Workers へのデプロイを手動で行うのは手間がかかります。GitHub Actions で以下を実現します。

  • develop ブランチへの push で dev 環境に自動デプロイ

  • Actions UI から任意のブランチを選んで手動デプロイ

この記事でわかること

  • GitHub Actions ワークフローの完全な定義例

  • workflow_dispatch(手動トリガー)の重要な制約

  • concurrency によるデプロイ競合防止

  • GitHub Secrets の設定方法

対象読者

  • Cloudflare Workers への CI/CD を構築したい方

  • GitHub Actions の workflow_dispatch の挙動を理解したい方

前提条件

  • GitHub リポジトリ

  • Cloudflare アカウント + API Token

  • wrangler での手動デプロイが成功している状態

1. ワークフロー定義

# .github/workflows/deploy.yml
name: Deploy to Cloudflare Workers

on:
  push:
    branches:
      - develop
  workflow_dispatch: # 手動トリガー

jobs:
  deploy:
    name: Build & Deploy (dev)
    runs-on: ubuntu-latest
    timeout-minutes: 15
    concurrency:
      group: deploy-dev
      cancel-in-progress: true
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup bun
        uses: oven-sh/setup-bun@v2

      - name: Install dependencies
        run: bun install --frozen-lockfile

      - name: Generate Prisma Client
        run: bunx prisma generate

      - name: Build (OpenNext for Cloudflare)
        run: npx opennextjs-cloudflare build

      - name: Deploy to Cloudflare Workers
        run: npx wrangler deploy
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

2. GitHub Secrets の設定

GitHub CLI で設定できます。

gh secret set CLOUDFLARE_API_TOKEN --body "your-api-token"
gh secret set CLOUDFLARE_ACCOUNT_ID --body "your-account-id"
💡
Cloudflare API Token は Workers 用の権限 が必要です。Account Settings → API Tokens から「Edit Cloudflare Workers」テンプレートで作成しましょう。

3. concurrency 設定

concurrency ブロックが重要です。

concurrency:
  group: deploy-dev
  cancel-in-progress: true
  • group: deploy-dev → 同じグループのジョブは同時実行されない

  • cancel-in-progress: true → 新しい push があれば実行中のデプロイをキャンセル

4. workflow_dispatch の重要な制約

⚠️
workflow_dispatch トリガーは デフォルトブランチ(通常 main)にワークフローファイルが存在しないと、Actions UI に手動実行ボタンが表示されません。

つまり、develop ブランチにのみワークフローがある状態では、UI から手動実行できません。まず main にワークフローファイルをマージする必要があります。

マージ後は UI から任意のブランチを選択してデプロイできるようになります。

5. ビルドステップのポイント

  • bun install --frozen-lockfile → CI 環境での再現性を確保

  • bunx prisma generate → ビルド前に必須(Prisma Client の生成)

  • timeout-minutes: 15 → ハングアップ防止

まとめ

  • develop push で自動デプロイ、workflow_dispatch で手動デプロイ

  • concurrency でデプロイ競合を防止

  • workflow_dispatch は main にワークフローがないと UI に表示されない

  • Secrets は gh secret set で簡単に設定可能