Cloudflare Pages に GitHub action からデプロイする

wrangler-action を使う
https://github.com/cloudflare/wrangler-action

page-actin は deprecated になっている
https://github.com/cloudflare/pages-action

まずはデプロイするPagesを作成する。
コマンドで作成する記事が多いがCloudflareのダッシュボードから作れそう。

1. ダッシュボードからPagesを作る
2. レポジトリ連携かファイルアップロードかを聞かれるのでファイルアップロード方式を選択
   

ファイルアップロード方式を選ぶとファイルアップロード画面に遷移するが無視して戻ると、何もデプロイされない空のPagesができる。
これにCIからデプロイしていく。

ここからは wrangler-action のテンプレートをそのまま使うだけでいけた。
GitHub のシークレットにAPI_TOKENとACCOUNT_TOKENを入れてpushすればCIが走ってPagesにデプロイされます。

on: [push]

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - uses: actions/checkout@v4
      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy dist --project-name=cf-deploy-ci

project-name は Pages の名前です。

PagesのAPI TOKEN はテンプレートになかったのでCustom Tokenを選択して Pages の Edit 権限を設定せいて取得。

1点問題がおきた。
PR作成時は preview, marge時は production にデプロイして欲しいかったが、常にpreviewにデプロイされてしまっていた。

どうやら Pages に production-branch なるものが設定されておりデフォルトがmainになっている。
この状態だと master へのマージがpreviewになってしまう。

production-branch の設定は pages の作成時にしか設定できず、ダッシュボードからも変更不可っぽいので既存のpagesを削除して再度CLIから作成した。

npx wrangler pages project create project-name --production-branch master

production-branch を master に設定することで期待する動作になった。

https://github.com/cloudflare/workers-sdk/issues/1852