ヘッドレスCMS 制作・構築 特設サイト - シナゲート株式会社

ヘッドレスCMSブログBLOG

GatsbyでCloudflare Pagesを利用する場合はバージョンに要注意

Gatsbyの最新バージョンは5(2023年1月時点)なのですが、Cloudflare Pagesではバージョンを落とす必要があるので、注意が必要です。というのも、Gatsby 5ではNode 18が必須なのですが、Cloudflare PagesではNode 18には対応していない為、環境変数でバージョンを18に変えたとしても、エラーが起きてビルド出来ないからです。Cloudflare PagesのNodeのバージョンの変更方法は、前回の記事をご覧ください。

>> Cloudflare Pagesで「Node」のエラー。デフォルトバージョンは12なので変更必須

Gatsby 5のビルド時のエラー内容

まず、Gatsby 5で構築し、Cloudflare Pagesの初期状態でビルドしようとすると、「error [email protected]: The engine "node" is incompatible with this module. Expected version ">=18.0.0". Got "12.18.0"」というようなエラーが表示されます。これはCloudflare PagesのNodeのバージョンが初期状態で12が使われている為です。

「Nodeのバージョンを18以上にする必要がある」ということなので、環境変数でNodeのバージョンを18に変更して、再度ビルドをすると、今度は「node: /lib/x86_64-linux-gnu/libm.so.6: version `GLIBC_2.27' not found (required by node)」「Failed to install node version '18'」というようなエラーが表示され、ビルドが止まってしまいます。

つまり、Cloudflare PagesではNode 18に対応していない為、公開することが出来ない状態なのです。その為、NetlifyやAmazon CloudFrontなどのホスティングサービスを利用するか、Gatsbyのバージョンを下げてCloudflare Pagesを利用する必要があります。

Gatsbyとプラグインのバージョンを下げる

今回は、Gatsbyのバージョンを4.25.2などに下げて対応しましょう。その場合、プラグイン(ライブラリ)のバージョンも下げる必要があります。また、NodeのバージョンもLTSの16を利用するようにしましょう。

バージョンを下げる際には「npm install [email protected]」というように入力すれば、特定のバージョンをインストールすることが可能です。各プラグインも同様にバージョンを下げてインストールします。各プラグインのバージョンは、npmの公式サイトでバージョンの履歴を確認することができるので、一つ前のバージョンを指定すれば、ほとんどがNode16に対応していると思います。(プラグインによっては、さらに下げる必要があります)

https://www.npmjs.com/package/gatsby

さらに「package.json」の「gatsby」や、各プラグインのバージョンも同様に下げておきます。これで、試しにデプロイをして、正常にビルドが完了するか試してみましょう。

まとめ

Gatsbyのバージョンをダウングレードしてビルドする方法をご紹介しましたが、可能であれば最新のバージョンで構築したいですよね。また、Node 16は2023年9月でサポートが切れてしまう予定なので、早いところCloudflare PagesがNode 18に対応して欲しいところです。

ページトップへ戻る