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

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

Ad Area

ブラックフライデーセール. 最大 90%OFF

先の投稿で約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