Zenn
🗂

【Rails】Herokuへのデプロイ時にでたPrecompiling assets failedを解決する

2022/10/15に公開
Docker
Heroku
Rails
yarn
webpacker
tech

発生したエラー

ある時、個人開発しているRailsアプリをHerokuにデプロイしようとした時のこと。
git push heroku main したところ下記のエラーが発生した。


$ git push heroku main
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
（省略）
remote:          358 | NODE_MODULE(binding, RegisterModule);
remote:              | ^~~~~~~~~~~
remote:        make: *** [binding.target.mk:133: Release/obj.target/binding/src/binding.o] Error 1
remote:        gyp ERR! build error 
remote:        make: Leaving directory '/tmp/build_946b5370/node_modules/node-sass/build'
remote:        gyp ERR! stack Error: `make` failed with exit code: 2
remote:        gyp ERR! stack     at ChildProcess.onExit (/tmp/build_946b5370/node_modules/node-gyp/lib/build.js:262:23)
remote:        gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
remote:        gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
remote:        gyp ERR! System Linux 4.4.0-1104-aws
remote:        gyp ERR! command "/tmp/build_946b5370/bin/node" "/tmp/build_946b5370/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
remote:        gyp ERR! cwd /tmp/build_946b5370/node_modules/node-sass
remote:        gyp ERR! node -v v16.13.1
remote:        gyp ERR! node-gyp -v v3.8.0
remote:        gyp ERR! not ok 
remote:        Build failed with error code: 1
remote: 
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !       Push rejected to { app_name }.
remote: 
To https://git.heroku.com/{ app_name }.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/{ app_name }.git'

調査

Precompiling assets failed、コンパイルが上手くいっていないと言われている。

以下の箇所が怪しいんじゃないかということで、gyp ERR! cwd /tmp/build_946b5370/node_modules/node-sassで検索してみた。

remote:        gyp ERR! cwd /tmp/build_946b5370/node_modules/node-sass
remote:        gyp ERR! node -v v16.13.1
remote:        gyp ERR! node-gyp -v v3.8.0
remote:        gyp ERR! not ok 
remote:        Build failed with error code: 1

すると、以下の記事がヒットして、結果的にこちらを参考に解決することができた。
https://blog.furu07yu.com/entry/yarn-gyp-err

こちらによると、yarn why パッケージ名でエラーの原因のパッケージ（今回はnode-sass）が依存するパッケージを調べて、それをアップグレードすることで解決するらしい。

解決

  1. エラーの原因のパッケージが依存するパッケージを調べる（ローカルでDockerを使っているため、Dockerコマンドです）
$ docker-compose run web yarn why node-sass
yarn why v1.22.19
[1/4] Why do we have the module "node-sass"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "node-sass@4.14.1"
info Reasons this module exists
   - "@rails#webpacker" depends on it
   - Hoisted from "@rails#webpacker#node-sass"
info Disk size without dependencies: "6.45MB"
info Disk size with unique dependencies: "14.88MB"
info Disk size with transitive dependencies: "28.08MB"
info Number of shared dependencies: 81
Done in 5.78s.

@rails#webpackerに依存するnode-sassが原因でコンパイルが失敗していることがわかる

  1. 依存するパッケージのバージョンをアップグレードする

package.jsonを編集

package.json
-    "@rails/webpacker": "4.2.2",
+    "@rails/webpacker": "5.4.3",

GitHubにプッシュしておく

$ git add .
$ git commit -m "upgrade webpacker"
$ git push origin main

yarn install（ローカルにDockerを使用しているので、dockerコマンドを使っています）

$ docker-compose run web yarn install
  1. Herokuにデプロイ
$ git push heroku main

無事にHerokuにデプロイできた！

参考

文中でも引用させていただきましたが、下記の記事を参考にさせていただきました。
ありがとうございます。

https://blog.furu07yu.com/entry/yarn-gyp-err

Discussion