【Next.js】cloudflare/wrangler-action を使ってデプロイする [Techblog#39]

GitHub Actions で Next.js のプロジェクトをビルドし Cloudflare Pages にデプロイする際、これまでは cloudflare/pages-action が利用できましたが、2024年10月にリポジトリがアーカイブに指定されました

今回は wrangler CLI コマンドを直接利用した wrangler-action に移行してみようと思います

ではでは、実際に移行していきます

例えば、こんな感じのプロジェクトがあったとします

これまでは、デプロイ時に以下のように設定していたかなと思います

- name: Deploy  id: cloudflare_pages_deploy  uses: cloudflare/pages-action@v1  with:    apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}    accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}    projectName: project    directory: .vercel/output/static    gitHubToken: ${{ secrets.GITHUB_TOKEN }}

コマンドを使った方法になるので、これを移行すると以下のようになります

- name: Deploy  id: cloudflare_pages_deploy  uses: cloudflare/wrangler-action@v3  with:    apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}    accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}    command: pages deploy .vercel/output/static --project-name project

まず secrets.GITHUB_TOKEN は不要になりました

また「プロジェクト名」や「ビルド出力先」の指定方法は、コマンドの引数として渡すようになりました

GitHub Actions 上でファイルを編集し、変更差分が出た場合に警告が出る場合があります

その場合は --commit-dirty=true を付けると良さそうです (公式ドキュメントから見つけられず)

    command: pages deploy .vercel/output/static --project-name project --commit-dirty=true

また、出力内容も少し変わっており URL を取得する場合には deployment-url に変わっていました

- steps.cloudflare_pages_deploy.outputs.url+ steps.cloudflare_pages_deploy.outputs.deployment-url

以上で、移行ができました 🎉