Netlifyに叱られた(久しぶりにNuxt.jsをビルドしたらエラーが出た)というお話

  • 公開日アイコン
Netlifyに叱られた(久しぶりにNuxt.jsをビルドしたらエラーが出た)というお話 メイン画像

Ad Area

先の投稿で約10ヶ月ぶりにブログを更新した際に、Netlifyのビルドエラーが発生した。

Node.jsのバージョンが古かったためのエラー
[warn] You are using an unsupported version of Node.js (v10.24.1). It is recommended to use the latest LTS version (https://nodejs.org/en/about/releases)

サポート切れのNode.js v10.24.1が使われているので最新の推奨版を使うのが望ましいとの警告、そして続々とビルドエラーが発生した。

パッケージとの兼ね合いもあって最新版ではないものの、Node.jsはv14系を使用している…ローカルで。つまり、Netlifyでサポート切れのNode.jsを使っているだけではなく、さらにローカルのNode.jsとのバージョンが合っていないのも問題のようだ。

調べてみたところ、Netlify側のバージョンを上げて解決するという方法が見つかった。

Netlifyの環境変数 NODE_VERSION でNode.jsのバージョンを指定

  • Netlifyの管理画面から Sitesをクリック
  • Sites画面から、対象のサイトを選択してSite Overview画面へ入る
  • Site Settingsをクリック
  • Build & depoyからEnvironmentの項目へ
環境変数を編集

Edit variableボタンをクリックして進む。

環境変数を追加

New variableボタンをクリックすると、環境変数を記述するエリアが追加される。

  • Key: NODE_VERSION
  • Value: (バージョンの数値)

数値は、16.0.1のように詳細に記入しても良いし、メジャーのバージョン数(14や16)でもよい。後者の場合は、メジャーバージョンの最新版がインストールされる。

入力したらSaveボタンで保存する。

ローカルのルートディレクトリに.node-version または .nvmrc ファイルを作成

ルートディレクトリとは、nuxt.config.jsファイルがある階層を指す。そこに.node-version または .nvmrc ファイルを作成する。

Netlify公式のDocsには「.node-version または .nvmrc」とあるが、Nuxt.jsの場合は.node-versionファイルだと「.nvmrcファイルがありません」的なエラーが出るので、.nvmrcファイルにする。

.nvmrcファイルがなかったときのエラー

.nvmrcファイルは以下のコマンドで作成できて、さらにローカルで使用しているNode.jsのバージョンがファイルに自動的に記述されるらしい。

node -v > .nvmrc

が、なぜか作成できなかったので手動で作成、手動で記入することにした。

Node.jsのバージョンの書き方は、vあり(例:v14.16.1)vなし(例:14.16.1)どちらでも可。

.nvmrcファイルをデプロイする。

Node.jsインストール、ビルド成功

Netlify側で.nvmrcファイルが読み込まれ、新しいバージョンのNode.jsがインストールされる。無事ビルドもできた。

参考ページ

Ad Area