CloudflareにNext.jsアプリケーションをdeploy(SSR)

Cloudflare pages編

https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/get-started/

static siteとしてNext.jsアプリケーションをデプロイしていたが、dynamic routingの扱いなどで不都合が生じたためSSR方式の方にdeploy方式を変更する。


https://developers.cloudflare.com/pages/framework-guides/nextjs/deploy-a-static-nextjs-site/

static build時にはwrangler系の設定は要らなかったので特にconflictすることなく乗り換えできそう。

しばらくは二刀流でdeployして様子見したい。


SSR用のstepを一通り適用して

pnpm run preview

を実行する。Node.jsのruntimeではなくて実際にcloudflare workersが起動するworkers上のruntimeをlocalで再現して実行できるらしい。基本こっちで確認するようにしたほうが良いかも。


⚡️ Build log saved to '.vercel/output/static/_worker.js/nop-build-log.json'
⚡️ Generated '.vercel/output/static/_worker.js/index.js'.
⚡️ Build completed in 0.13s
sh: wrangler: command not found
 ELIFECYCLE  Command failed.

かと思ったらwranglerだけコマンド見つからなかった。別途installすると良さそう。

pnpm add -D wrangler


✨ Compiled Worker successfully
✨ Parsed 1 valid header rule.
╭──────────────────────────────────────────────────────────────────────╮
│ [b] open a browser [d] open devtools [c] clear console [x] to exit │
╰──────────────────────────────────────────────────────────────────────╯
⎔ Starting local server...
[wrangler:info] Ready on http://localhost:8788

この状態で起動すると今度はうまく行った。portはdefaultで8788番で立つのかな。

ただ、Next.jsの--experimental-httpsの機能を使って実現していたhttps化が適用されなくなってはいるので調整が必要そう。


pnpm run deploy

でworkersにdeployを行う。初回コマンド実行時に

- cloudflare上でのworker名。もしなければこの段階で作成し、wranglerファイルに記載した`name`がデフォルト値として採用される。

- Production branch

を設定しながらdeployを行う。pnpm run deployを実行する際にProduction branchに設定したbranchを使用していると、Cloudflare上でpreview buildではなくてproduction buildとしてデプロイされるという感じ。


static site & pagesの構成ではmainブランチにマージするだけでCloudflareのgithub appが自動でdeployを行ってくれていた。これに近い構成を再現することはできないかな。


Cloudflare workers編

ここまで設定して思ったが、上記はCloudflare pagesでの設定だった。

公式ドキュメントにも「We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.」と記載されているように現在はCloudflare Workersのほうが推奨されるらしいのでworkersのほうにもdeployを切り替えてみる。


https://developers.cloudflare.com/workers/framework-guides/web-apps/nextjs/#deploy-an-existing-nextjs-project-on-workers

workers版のNext.js向けのドキュメントはこっち。

https://developers.cloudflare.com/workers/static-assets/migration-guides/migrate-from-pages/

migration guideもあったので一応こっちに則ってやってみても良いかもと思ったが、pagesに初deployした10分後にmigrationもなにもないので素直に初めからやってみる。


https://opennext.js.org/

OpenNextというのはVercel以外のPaaSにNext.jsアプリケーションをデプロイするためのライブラリらしい。AWS, Cloudflare, Netlifyに対応していそう。


https://nextjs.org/docs/app/guides/upgrading/version-15

Next.js自体も14から15にupgradeする必要があったので実行。まだアプリが小さいのでサクサクやっちゃう。

codemodコマンドで対応できちゃうの便利だな。


と思ったらrecoil使っている部分が火を吹いてしまった。React 19対応していないのでここらがやめどきだったぽいな。

ref. TypeError: Cannot destructure property 'ReactCurrentDispatcher' of 'react.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' as it is undefined.


claude codeくんの助けもあってサクサク置き換え完了。pnpm run deployをもう一度走らせが、以下のエラーが発生。道程は長い。

Error: ENOENT: no such file or directory, open './.next/standalone/.next/server/pages-manifest.json'

これはnext.config.mjs中のoutput設定がSSG用のexportになっていたためらしい。standaloneに直す。

const nextConfig = {
output: "standalone",
}

ref. https://nextjs.org/docs/app/api-reference/config/next-config-js/output


ここまでしてworkersとしてデプロイができるようになった。Build設定画面でConnect to Git repositoryも設定すればデプロイも簡略化できる。

https://developers.cloudflare.com/workers/ci-cd/builds/configuration/

Next.jsフレームワークを使用しているため

Build command: pnpm run build

Deploy command: pnpm run deploy

を指定。

Related Articles