Next.jsサイトをCloudflare Pagesに移行したらデプロイエラーに悩まされた件【解決策も】
かなりやらかしました……
こんにちは、たぬきっつぁんです。
GoogleドメインからCloudflareにドメイン移管するのに合わせて、ポートフォリオサイト（Next.js製）のホスティングサービスもVercelからCloudflare Pagesに変更しようとしたところ、2日ほど移行に手こずってサイトをダウンさせてしまいました。（ほとんどアクセスがないサイトだからまだ良かったけど…）
今回はCloudflare Pagesへのホスティングで失敗したときに確認するべきポイントと、カスタムドメインの設定方法、ホスティングサービスの移行でやってはいけないこと（非常に初歩的）を解説します。
Cloudflare Pages のデプロイに失敗するときに確認するポイント
デプロイに失敗するときは、以下の3点を試してみてください。
私はこれらの解決策を見つけるまで16回もデプロイ失敗履歴を残してしまいました…
環境変数で NODE_VERSION を設定する
ネット上で多く上がっている解決方法が環境変数の NODE_VERSION を設定するというものです。
ローカル環境でビルドするときに使用しているNode.jsのバージョンと同じものを設定しましょう。
プロダクションとプレビュー両方に設定します。私のサイトでは16.15.0を使用していました。
ビルドコマンドを npm にする
Cloudflare Pagesで最初にビルド設定をする際に、フレームワークプリセットでNext.jsを選択すると npm ではなく npx が適用されます。
この状態でビルドすると minimatch エラーが出る場合があります。その場合は npm に変更してもう一度ビルドしてください。
ネットで検索しても以下のStack Overflowくらいしか情報がありませんでした。
ビルドシステムのバージョンを1にする
現在Cloudflare Pagesではビルドシステムの構成を2つ選ぶことができます。
デフォルトではバージョン「2」になっています。私のサイトではバージョン2だとエラーが出てビルドに失敗してしまいました。
バージョン2は2023年5月にリリースされたばかりなので、それ以前に作られたサイトは対応していない可能性があります。
ビルドに失敗する場合はバージョンを「1」に変更しましょう。
私のサイトではこれら3つの設定を変更したらビルドに成功しました。
Cloudflare Pages でカスタムドメインを設定する方法
Cloudflare Pages サイトの設定から、カスタムドメインを開くとかんたんに設定することができます。
サブドメイン（wwwなど）なしのドメインを登録する場合、wwwにアクセスされたときにリダイレクトされるように設定しましょう。
例えるならば、www.tanukizzan.com にアクセスすると tanukizzan.com にリダイレクトされるようにする設定です。
まずはCloudflare Pagesにwwwつきのドメインとサブドメインなしのドメインを設定します。
このままだとリダイレクトされないので、今度はホームからドメインの設定を開いて、「ルール」を開きます。
ページルールでwwwからURLを転送する設定を行います。
画像のように設定したら、リダイレクトされるようになるはずです。
ホスティングサービスの移行でやってはいけないこと
ここからは余談になりますが、今回のホスティングサービスの移行で失敗したポイントをまとめておきます。
先に移行前のサイトを削除する
最初はCloudflare Pagesでデプロイ成功してから削除しようと思っていました。
ただ思いの外にデプロイに手こずってしまい、もしかしたら移行前のVercelにサイトが残っているのが原因だと思い、削除してしまいました。そのせいで2日もサイトをダウンさせてしまう結果に…
基本的に移行前のサイトがデプロイに影響することは無いはずなので、あせらず移行先のサイトがデプロイに成功するまでそのままにしておきましょう。
ローカルで動作するか確認しない
移行する前にローカル環境で今のバージョンや動作を確認しておけばもう少し早く問題に気づくことができたかもしれません。
PCの買い替えなどでローカル環境の設定をしていない方は、ホスティングサービスの移行前に環境構築を行いましょう。
まとめ
Cloudflare Pagesに移行するときにデプロイエラーでハマったら、以下のポイントを確認してみてください。
- 環境変数で NODE_VERSION を設定する
- ビルドコマンドを npm にする
- ビルドシステムのバージョンを1にする
この記事がCloudflare Pagesを使いはじめる方のお役に立てたら幸いです。
またGoogleドメインからCloudflareに移管するに至った理由と、ドメイン移管時に手こずった点はそれぞれ以下の記事で解説しています。
GoogleドメインからCloudflareへ移管した話：メリットと注意点を解説 | MONORAWG (tanukizzan.com)
Cloudflareへドメイン移管後にサイトが表示されないときの対処方法【Blogger/GitHub Pages】 | MONORAWG (tanukizzan.com)
