GitHub ActionsでSvelteKitをCloudflare Workersに自動デプロイした話

GitHub Actionsを使うと、mainブランチへのプッシュで自動的にCloudflare Workersへデプロイできます。手動での wrangler deploy が不要になります。

セットアップ

1. Cloudflare API トークンを作成

dash.cloudflare.com → マイプロフィール → API トークン → トークンを作成

テンプレートから 「Cloudflare Workers を編集する」 を選択して作成します。

2. GitHub に Secrets を登録

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

CloudflareアカウントIDはダッシュボードのURLから確認できます：

https://dash.cloudflare.com/d34eba2a8fd897338cff696ab7dd2f9d/...
                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                              アカウントID

または npx wrangler whoami でも確認できます。

3. ワークフローファイルを作成

.github/workflows/deploy.yml を新規作成：

name: Deploy to Cloudflare Workers

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

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

deploy.yml の詳細解説

トリガー

on:
  push:
    branches:
      - main   # mainへのプッシュで自動実行
  workflow_dispatch:  # GitHubのUIから手動実行も可能

ジョブ・実行環境

jobs:
  deploy:
    runs-on: ubuntu-latest  # GitHubが提供するUbuntu仮想環境で実行

各ステップ

npm install ではなく npm ci を使うのは、CI環境での再現性を高めるためです。

環境変数の仕組み

env:
  CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
  CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

${{ secrets.変数名 }} でGitHub Secretsに登録した値を参照します。この値はステップの実行環境の環境変数としてセットされます。

wranglerが自動で認証する仕組み

wranglerは実行時に CLOUDFLARE_API_TOKEN と CLOUDFLARE_ACCOUNT_ID という名前の環境変数を自動で探して認証に使います。

// wrangler内部のイメージ
const token = process.env.CLOUDFLARE_API_TOKEN;
const accountId = process.env.CLOUDFLARE_ACCOUNT_ID;

これらは自分で決める名前ではなく、wranglerが仕様として定めた名前です。別の名前にすると認証されません。

ローカルとCI/CDの認証方法の違い

CI/CD環境ではブラウザを開けないため、環境変数でトークンを渡す方式が使われます。

手動デプロイ

workflow_dispatch を追加すると、GitHub ActionsのUIから 「Run workflow」 ボタンで手動実行できます。コードの変更なしに再デプロイしたい場合に便利です。

注意点

wrangler.jsonc に定義したバインディング（QueueやKVなど）は、デプロイ先のCloudflareアカウントに実際に存在している必要があります。ローカルのみで作成した場合はデプロイ時にエラーになります。

まとめ

• .github/workflows/deploy.yml を作成してmainへのプッシュで自動デプロイできる
• CLOUDFLARE_API_TOKEN / CLOUDFLARE_ACCOUNT_ID はGitHub Secretsに登録する
• これらの環境変数名はwranglerの仕様で決まっており、自分では変更できない
• ビルド時のプリレンダリングもCloudflare認証が必要なためBuildステップにも環境変数が必要