🌟

Github ActionsでCloudflare WorkersのCIを回してデプロイする

に公開
actions
Cloudflare Workers
tech

はじめに

mainブランチにpushしたらCloudflare Workersに自動デプロイする備忘録

これを目指す

手順

1. APIを取得

  1. 「API Tokens」セクションに移動

  2. 「トークンを作成する」をクリックして、新しいAPIトークンを作成

  3. 「Cloudflare Workers を編集する」テンプレートを選択

  4. 「アカウントリリース」と「ゾーンリリース」を設定する

    • アカウントリリース: どのアカウントに権限を与えるか
    • ゾーンリリース: どのドメインに権限を与えるか

  5. 作成したトークンは再表示されないので控える

2. CloudflareアカウントIDを控える

3. Actionsの設定

  1. レポジトリ>Settings>Secrets and variables>Actionsに移動

  2. シークレット値を追加

    • CLOUDFLARE_API_TOKEN: APIトークン
    • CLOUDFLARE_ACCOUNT_ID: アカウントID

workflowsの設定

  1. deploy.ymlを作成
mkdir -p .github/workflows
touch .github/workflows/deploy.yml
  1. deploy.ymlに以下を記述
deploy.yml
name: Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - uses: actions/checkout@v4

      - name: Set up Bun
        uses: oven-sh/setup-bun@v1
        with:
          bun-version: "latest"

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

      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

モノレポの場合、matrixを使って各プロジェクトごとにCIを回すこともできる

deploy.yml
name: Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    name: Deploy ${{ matrix.project }}
    runs-on: ubuntu-latest
    strategy:
      matrix:
        project: [backend, frontend]
        include:
          - project: backend
            workdir: packages/backend
          - project: frontend
            workdir: packages/frontend
    steps:
      - uses: actions/checkout@v4

      - name: Set up Bun
        uses: oven-sh/setup-bun@v1
        with:
          bun-version: "latest"

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

      - name: Restore Next.js cache
        if: matrix.project == 'frontend'
        uses: actions/cache@v4
        with:
          path: ${{ github.workspace }}/${{ matrix.workdir }}/.next/cache
          key: ${{ runner.os }}-next-cache-${{ matrix.project }}-${{ hashFiles('bun.lock') }}
          restore-keys: |
            ${{ runner.os }}-next-cache-${{ matrix.project }}-
            ${{ runner.os }}-next-cache-

      - name: Deploy backend with Wrangler
        if: matrix.project == 'backend'
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: deploy --minify
          workingDirectory: ${{ matrix.workdir }}

      - name: Build frontend bundle with OpenNext
        if: matrix.project == 'frontend'
        working-directory: ${{ matrix.workdir }}
        env:
          NEXT_TELEMETRY_DISABLED: "1"
        run: bun run cf:build

      - name: Deploy frontend with OpenNext CLI
        if: matrix.project == 'frontend'
        working-directory: ${{ matrix.workdir }}
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          NEXT_TELEMETRY_DISABLED: "1"
        run: bun run deploy

      - name: Show recent Cloudflare deployments
        if: matrix.project == 'frontend'
        working-directory: ${{ matrix.workdir }}
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        run: npx wrangler deployments list --config wrangler.jsonc

参考

Cloudflare Workers プロジェクト作成から GitHub Actions 自動デプロイまで最速でやる

GitHubで編集を提案

Discussion