Next.js SSR を Cloudflare Pages で公開する

概要

• Nextを安くデプロイしたい

同時にbuildできないものの、ほとんどの場合で無料枠で十分かもしれない。
月500は、デプロイこけまくったりすると少し心もとないが、それでも相当である。

Next on aws lambdaをやったことがあるが、制限も大きいのでこれは最高である

ここら辺を見るとミドルウェアの挙動が不安定だ等あるので、そこはLambdaと同じかもしれない

今回は既存のNextを修正するのは扱わないがここら辺に書いてある

前提

通常のNextで入れないほうが良いっぽいので、指示に従いながらやっていく

アプリの新規作成

サンプルアプリを作成する

pnpm create cloudflare@latest cloudflare-sample --framework=next

pnpmが入っていない場合はこちら。npmから入れられるのはいいですよね

├ Do you want to deploy your application?
│ yes deploy via `pnpm run deploy`

と言われたので、deployしようとした

そうしたところ、windowsではうまくいかないと出てしまった

実際にエラーとなってしまったので、WSLで実行するのが良いかもしれない

今回はスキップします。

失敗：Pagesでデプロイする

ここ間違えました。
Pagesでないといけないのに、Warkersを選択しています
何度やってもうまくいかないわけです。
APIトークンにPagesの権限がない部分で気が付けばよかった、、、

正しくは次の章で書く感じにします

こんな感じで、プライベートリポジトリも選択可能見たいですね

Pagesでデプロイする

先ほど接続しているので、すでに終わっていますね

Nextを選択してやるだけですね

バージョンエラーになったので、いったん無視して進めます

01:49:02.438	▲  You are using Node.js 18.17.1. For Next.js, Node.js version "^18.18.0 || ^19.8.0 || >= 20.0.0" is required.
01:49:02.446	▲  ELIFECYCLE  Command failed with exit code 1.
01:49:02.479	▲  Error: Command "pnpm run build" exited with 1

再度デプロイする前に、ここら辺の設定をどれかします。
自分は環境変数が何度やってもうまくいきませんでしたorz
代わりに画像のようにしたところ

このようにしっかり入れなおしているのを確認できました。

うまくいかない場合はnvmとかそっちの方が良いかもですね

まとめ

意外に苦労した。

ほとんどは勘違いだったものの、結構疲れたがGiotHub Actionsなども利用せずにデプロイできるのは本当に楽でよい。