【Next.js】Cloudflare にデプロイする [Techblog#1]

技術ブログとしては、初回投稿です。初めましての方は、はじめまして

技術関連の内容を中心に扱っていこうかなと思いますが、試行錯誤とかも含めて書くつもりなので簡潔じゃないかもです

気負わず、結構適当に書いていこうかなあと考えているので、よろしくお願いします

(簡潔さが欲しくなったら別途記事にしようと思います)

最近、ホームページを Nuxt2 から Next.js に移行したんですけど、これまでデプロイを自前PCでやっていました。面倒...

というわけで GitHub Actions でデプロイ自動化に取り組んでみたという内容です 🐈 🐈

...と、前置きが長くなりました

さっそく App router の Next.js プロジェクトを GitHub Actions でビルドし SSG として Cloudflare Pages にデプロイしようと思います

Cloudflare Pages 用のビルド

Cloudflare Pages 用のビルドは以下のようなコマンドでビルドできます

npm を利用していない場合、適宜 yarn dlx や pnpm dlx 等に書き換えてください

npx @cloudflare/next-on-pages@1

Cloudflare Pages へのデプロイ

GitHub Actions 用の cloudflare/wrangler-action という便利なパッケージを利用します

この際、事前に Cloudflare のアカウントとプロジェクトを作成しておきましょう

Cloudflare 側の アカウント ID と API トークン が必要なので、控えておきます

GitHub Actionsでビルド

これらの情報が集まると、以下のように GitHub Actions に組み込むことができます

先ほどの内容を GitHub の secrets に CLOUDFLARE_ACCOUNT_ID と CLOUDFLARE_API_TOKEN として登録しています

name: Deploy
on:  push:    branches:      - main
jobs:  deploy:    name: 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'
      - name: Build        run: npx @cloudflare/next-on-pages@1
      - 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

ビルド時の出力先が .vercel/output/static でない場合は適宜変更しましょう

また、--project-name には Cloudflare Pages で作成したプロジェクト名を指定してください

一例ですけど、適宜参考にしてみてください。これでデプロイまで可能です 🎉