Netlify にて Gatsby build がエラーになった件の対応

Netlify にて Gatsby build がエラーになってしまい、デプロイに失敗する現象が発生しました。
調査して対応したところ解決できたので、その時の対応をメモしておきます。

結論を先に言うと

Netlify のビルド時に使われている Node のバージョンが古かったため発生していました。 gatsby-cli をプロジェクトの package.json に追加したタイミングで表出した様子です。

Netlify のビルド設定で Node のバージョンを指定することで解決できました。

現象

gatsby-cli の global インストールを止めるため、プロジェクトごとでインストールを行うようにしました。 そのことで gatsby-cli が package.json に追加されました。

そのあとリポジトリへプッシュを行い Netlify によるビルドを行いましたが、エラーが発生して失敗していました。

ローカル環境では gatsby build は正常に動作しており、public ディレクトリ以下にソースコードも生成できています。

エラー内容

Netlify のコンソールにてビルド時のログを確認したところ、以下の内容が出力されていました。 gatsby build にてエラーが発生しています。

11:21:06 AM: $ gatsby build
11:21:07 AM: /opt/build/repo/node_modules/gatsby-cli/lib/init-starter.js:104
11:21:07 AM:   } catch {
11:21:07 AM:           ^
11:21:07 AM: SyntaxError: Unexpected token {
11:21:07 AM:     at createScript (vm.js:80:10)
11:21:07 AM:     at Object.runInThisContext (vm.js:139:10)
11:21:07 AM:     at Module._compile (module.js:617:28)
11:21:07 AM:     at Object.Module._extensions..js (module.js:664:10)
11:21:07 AM:     at Module.load (module.js:566:32)
11:21:07 AM:     at tryModuleLoad (module.js:506:12)
11:21:07 AM:     at Function.Module._load (module.js:498:3)
11:21:07 AM:     at Module.require (module.js:597:17)
11:21:07 AM:     at require (internal/module.js:11:18)
11:21:07 AM:     at Object.<anonymous> (/opt/build/repo/node_modules/gatsby-cli/lib/create-cli.js:28:20)
11:21:07 AM: ​
11:21:07 AM: ┌─────────────────────────────┐
11:21:07 AM: │   "build.command" failed    │
11:21:07 AM: └─────────────────────────────┘
11:21:07 AM: ​
11:21:07 AM:   Error message
11:21:07 AM:   Command failed with exit code 7: gatsby build
11:21:07 AM: ​
11:21:07 AM:   Error location
11:21:07 AM:   In Build command from Netlify app:
11:21:07 AM:   gatsby build

SyntaxError が出ています。 Node のバージョンが怪しいと思いましたので log 上で確認しました。

Now using node v8.17.0 (npm v6.13.4)

v8.17.0 ということで、だいぶ古いものを使っていました。 ローカル環境ではv14.12.0 となっていましたので、ここが原因の様子です。

対応内容

Netlify のビルド時に利用する Node のバージョンを設定します。

ドキュメントを確認したところ、以下 2つの方法があります。

https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript

1. コンソールのEnvironment variables にて NODE_VERSION を設定する
2. .nvmrc をプロジェクトのベースディレクトリに設置する

今回は「コンソールのEnvironment variables にて NODE_VERSION を設定する」のやり方で対応しました。

Netlify にて Site settings の項目へ移動します。 Build & deploy の画面を開き、Environment variablesの項目に以下の設定ペアを追加します。 実際のバージョンについてはローカルのものと合わせておくのが良いです。

• Key NODE_VERSION
• Value v14.12.0

上記対応後に再度ビルド・デプロイを行いました。
log 上でのnodeのバージョンは以下になりました。無事にビルドが成功しデプロイも行われたことを確認できました。

Now using node v14.12.0 (npm v6.14.8)

ついでにビルド環境の設定の更新

ついでですが、Build image selection という項目もあったので設定しておきました。 まだ設定値はBeta版のようですが、対応してみました。

変更前は以下の設定でした。

Ubuntu Trusty 14.04
Legacy build image for older sites

default で以下に設定されるようですが、前から動いているプロジェクトでは上記の設定になっているようです。 以下のものに変更しておきました。

Ubuntu Xenial 16.04 (default)
Current default build image for all new site

変更を行ったところ、build log がとてもわかりやすくなりました。 特に問題なくビルドもできているので概ね良さそうです。

終わりに

エラーが発生してしまいましたが、log から原因を突き止めて対応しました。 npm や nvm 周りではよく起きる現象なので、都度バージョンの確認などあたりをつけられるようにしておきたいです。