☁️

Github ActionsをつかってCloudflare Workersのステージング環境にデプロイする

2024/02/12に公開

GitHub Actions

Cloudflare Workers

tech

概要

develop ブランチにpushされたらステージング環境にデプロイする

wrangler.tomlにステージング用の設定を追加

wrangler.toml に [env.{environment_name}] を追加することで、環境ごとの設定を書くことができます。

以下はR2バケットをステージング用に分ける設定の例です。
name には -{environment_name} が自動的につくので example-project-staging になります。

wrangler.toml

name = "example-project"

workers_dev = true
main = "./build/index.js"
# https://developers.cloudflare.com/workers/platform/compatibility-dates
compatibility_date = "2023-04-20"

[[r2_buckets]]
binding = "BUCKET"
bucket_name = "example-project-bucket"

[site]
  bucket = "./public"

[build]
  command = "npm run build"

# staging
[[env.staging.r2_buckets]]
binding = "BUCKET"
bucket_name = "example-project-bucket-staging"

環境を指定するには --env フラグを使用します。

npx wrangler deploy --env staging

Github Actionsワークフローの設定

Cloudflare Workersへのデプロイは次のアクションを使用します。
CloudflareのAPIトークンとアカウントIDが必要になるので事前に取得しGithubのRepository secretsに設定しておきます。

.github/workflows/deploy.yml

name: Deploy

on:
  push:
    branches:
      - main
      - develop
  workflow_dispatch:

concurrency:
  group: ${{ github.workflow }}-${{ github.ref_name }}
  cancel-in-progress: true

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Deploy
    environment:
      name: ${{ github.ref_name == 'main' && 'production' || 'staging' }}
    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20.11
          cache: "npm"
      - run: npm install
      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          secrets: |
            SECRET1
            SECRET2
          environment: ${{ github.ref_name != 'main' && 'staging' || '' }}
        env:
          SECRET1: ${{ secrets.SECRET1 }}
          SECRET2: ${{ secrets.SECRET2 }}

要点

ブランチ名（ github.ref_name ）でデプロイする環境を分岐しています。
wrangler.toml に設定した環境を指定するには cloudflare/wrangler-action の environment で指定します。
環境ごとにGithubのEnvironment secretsを設定する場合は jobs.<job_id>.environment で指定します。
ブラウザでGihubのActionsからワークフローを選択し、ブランチを指定して実行することで任意の環境へ手動でデプロイできます。（Githubのsecretの変更だけを反映したい場合等）

概要

wrangler.tomlにステージング用の設定を追加

Github Actionsワークフローの設定

要点

Discussion