Netlifyで「Run `npm rebuild node-sass` to download the binding for your current environment.」が出る

4404 ワード
Vue.js nuxt.js Netlify Vue.js テキストリンク

Netlifyでデプロイした際にエラーが発生して一瞬だけ困ったのでメモ。

発生したこと

タイトルに書きましたが、nodeのバージョンアップをしたことでデプロイ時に「Run npm rebuild node-sass to download the binding for your current environment.」が発生しました。
ローカルでも発生していたので、npm rebuild node-sassを実行すれば問題が解消するのは解っていましたが、Netlifyでどうやって実行すれば？と頭を悩ませました。

エラーから抜粋
1:55:41 PM: ────────────────────────────────────────────────────────────────
1:55:41 PM:   1. Build command from Netlify app                             
1:55:41 PM: ────────────────────────────────────────────────────────────────
1:55:41 PM: ​
1:55:41 PM: $ npm run generate
1:55:41 PM: > [email protected] generate
1:55:41 PM: > nuxt generate
1:55:43 PM: [warn] `router.scrollBehavior` property is deprecated in favor of using `~/app/router.scrollBehavior.js` file, learn more: https://nuxtjs.org/api/configuration-router#scrollbehavior
1:55:43 PM: [info] [@nuxt/content] Parsed 6 files in 0,6 seconds
1:56:10 PM: [fatal] Nuxt build error
1:56:10 PM:   ERROR in ./layouts/default.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/default.vue?vue&type=style&index=0&lang=scss&)
1:56:10 PM:   Module Error (from ./node_modules/sass-loader/dist/cjs.js):
1:56:10 PM:   Missing binding node_modules/node-sass/vendor/linux-x64-88/binding.node
1:56:10 PM:   Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 15.x
1:56:10 PM:   Found bindings for the following environments:
1:56:10 PM:   - Linux 64-bit with Node.js 14.x
1:56:10 PM:   This usually happens because your environment has changed since running `npm install`.
1:56:10 PM:   Run `npm rebuild node-sass` to download the binding for your current environment.

解決方法

結論を先に書くと以下の対応で解決しました。
Netlifyの [deploy] -> [build & deploy] -> [Build settings] で build command を以下のように変更します。

npm rebuild node-sass && npm run generate

なお、デプロイが正常終了したことを確認したら、もうnpm rebuild node-sassは不要なので元に戻しました。

netlify cliでローカルからデプロイ

上記の方法を見つける前に以下のことも行ったのでついでに書いておきます。
参考サイトは以下になります。

参考サイトにも記載されている通り、ローカルからデプロイする場合は以下の順番で実行します。

1.生成
npm run generate

2.デプロイ（draftがデプロイされて確認できます）
netlify deploy

3.本番デプロイ
netlify deploy --prod