お仕事サイトの公開にCloudflare Pagesを利用しています。
Node.jsのバージョンをv16.18.0からv18.16.0にアップデートしてからデプロイに失敗してしまう原因が、やっと解決できたのでメモしておこうと思います。

こんなに限定的な投稿を必要とする人が存在するのか怪しいですが…
私のようなよちよちフロントエンドエンジニア（仮）同志の方へ届きますように。

目次（読みたいところへジャンプ！）

Cloudflare Pagesのデプロイが失敗する原因

Cloudflare PagesとGitHubを連携してお仕事用のサイトを運営しています。

今までNode.jsのバージョンが16だったのですが、ローカルで18にアップデートしてから、Cloudflare側でデプロイが失敗するようになってしまったのです。

ソースコードをほとんど変更していないため、Node.jsと使用中のパッケージをまとめてアップデートしたことが原因です。

Cloudflare Pagesのビルドログをチェックしてみたら、おかしな点に気づいたのです。

あれ？Cloudflare側では、Node.jsのバージョンがv16.13.0のままになっていると！

よく見てみたらPHPもv5.6で古いですね・・・今は影響ないからいいような気がしますが。

Cloudflare Pagesの管理画面からNode.jsのバージョンを変更する方法

Cloudflare Pagesで対応しているNode.jsのバージョンはCloudflareのドキュメントで確認することができます。2023/6/6現在だと、v18.16.0まで対応しています。

＞＞＞Language support and tools｜Cloudflare Docs

Cloudflareの管理画面からNode.jsのバージョンを変更するには、「Workers & Pages」メニュー＞「設定」タブで行います。

設定タブを開くと左のメニューから「環境変数」を選びます。

すでに「NODE_VERSION」という環境変数が追加されているなら、右上の「変数を編集する」ボタンから、値を変更したいNode.jsのバージョンに書き換えましょう。

「NODE_VERSION」環境変数が未登録なら、新しく追加して値に使用するバージョンを設定したら完了です。これで、次のデプロイ時から環境変数で指定したバージョンのNode.jsがインストールされるようになりました。

設定ファイルでNode.jsのバージョンを指定する方法

Language support and tools｜Cloudflare Docsでも説明されている通り、「.nvmrc」「.node-version」ファイルから使用するNode.jsのバージョンを指定することができます。

.nvmrcファイルの設定例

18.16.0

.nvmrcファイルに使用したいバージョンを書き込みます。最新の安定バージョンを指定するなら lts/* も使用できますし、常に最新バージョンを使用したいなら node と設定しておきます。

Node.jsのバージョン管理にnvmを使用しているなら、バージョン管理一元化ができるので安心ですね。

Gitの対象ファイルにしてGitHubに上がっていれば、Cloudflare側も参照してくれます。

＞＞＞nvm Read Me

.node-versionファイルの設定例

18.16.0

.node-versionファイルの中身も.nvmrcファイルと同様です。使用バージョンを指定します。
Node.jsのバージョン管理にnodenvを使用しているなら、.node-versionファイルでローカルとサーバーのNode.jsバージョン指定ができます。

そもそも、Node.jsのバージョン管理に「nvm」や「nodenv」を使用していたら、これらのバージョン管理ファイルが自動生成されるので、今回の私のようなトラブルが発生しなかったのかも。

私が利用しているNode.jsバージョン管理は「Volta」です。「Volta」は使用バージョンを設定ファイルではなくpackage.jsonファイルに書き込むので、Cloudflareのバージョンを自動でアップデートしてくれなかったようです。

ただ、「Volta」だとpackage.jsonファイルでチーム間のNode.jsバージョンを統一できるというメリットもあります。他のパッケージはpackage-lock.jsonファイルで統一できているけれど、大元のNode.jsのバージョンはバラバラだったりしません？