Zenn
🚚

GitHub ActionsでCloudflare WorkersへデプロイするときのプレビューURL生成【Pages→Workers移行】

に公開
GitHub Actions
Cloudflare Workers
Cloudflare Pages
tech

TL;DR

previewがoffになっていないWranglerプロジェクトなら、wrangler versions uploadでバージョンを発行し、そのURLをPRにコメントするGitHub Actionsを書けばOK。

はじめに

Cloudflareでは最近、フロントエンドもCloudflare Workers（以下、Workers）を使うべきである、という風潮があります。同社のフロントエンドデプロイ用サービスであるCloudflare Pages（以下、Pages）の管理画面でも「新しいプロジェクトにはWorkersを推奨します」と表示されるほどです。

実際、Workersに移行したことで、Edge Runtimeでやれ！案件が著しく減ったため、設定コストはともかく学習コストは大幅に下がったと認識しています。

そして、これを機にGitHub Actionsでのビルドに移行しました。APIクライアントなどの自動生成コードを、権限周りをあまり苦労せずに取得・生成できるためです。ただ、ビルドもユーザー側（GitHub）で持つようにした結果、プルリクが立った際に自動でプレビューURLを貼ってくれる機能などは当然使えないため、それをActionsでいい感じに再現することを試みます。

手順概要

  1. wrangler versions でプレビュー用バージョンを作成
  2. wrangler.json の preview 設定を確認
  3. Zero Trust Accessでプレビュー URL を非公開化
  4. GitHub Actionsでビルド＆デプロイし、URLをPRにコメント

1. wrangler versions を使う

Preview URL発行には wrangler versions を使用します。

2. Wrangler / Cloudflareの設定

2-1. wrangler.json の preview がoffになっていないか確認

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "hogehoge-frontend",
  "main": ".open-next/worker.js",
  "compatibility_date": "2025-03-01",
  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
  "assets": {
    "binding": "ASSETS",
    "directory": ".open-next/assets"
  },
  "observability": { "enabled": true }
}

初期状態だと何も書かれていないのであまり気にしなくてもいいのですが、 preview キーをoffにするとURLが出力されないので注意しましょう。

2-2. プレビューURLを外部公開しないようにする

  1. WorkersのURL（例: appname.username.workers.dev）を確認
  2. *-appname-preview.username.workers.dev を対象にAccessポリシーを作成
  3. Allowルールに自分のメールアドレス／ドメイン／GitHub組織などを設定

サブドメインに*-hogehoge-preview.と、ドメインに（黒塗り）.workers.devと入力されている。
ポリシーのアクションがAllow、Email ending inにメールで使っている独自ドメイン名、メールアドレスに個人用のgmailのアドレスが入っている。

3. GitHub Actionsの設定例

name: Deploy Preview
on: pull_request

permissions:
  pull-requests: write # コメント投稿

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

      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 10
          run_install: false

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm

      - run: pnpm install
      - run: ENV=development pnpm run build-opennextjs

      - name: Deploy Preview to Cloudflare
        id: deploy-preview
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} # CFのAPIトークン
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} # CFのアカウントID
          workingDirectory: ".open-next"
          command: >
            versions upload
            --message "Deployed by GitHub Actions: branch ${{ github.ref_name }}"
            --tag pr-${{ github.ref_name }}

      - name: Comment Preview URL
        uses: actions/github-script@v7
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `🚀 プレビュー環境にデプロイされました！

              Preview URL: ${{ steps.deploy-preview.outputs.deployment-url }}
              `
            })

まとめ

これでPRを開くだけでステージング環境を確認でき、レビューが格段に楽になります。使ってみてください。

Discussion