トップイメージ

RailsでWebpacker+vue.js使ってて本番環境でプリコンパイル失敗しまくる😢

皆様こんにちは。 今日も今日とてRubyで業務システムを構築していた筆者です。

このサイトもそうですが、筆者はRuby on Railsを使ってウェブアプリケーションをデプロイする時に、よくHerokuを使わせてもらいます。

今回も例に漏れず、Railsとvue.jsを使ったウェブアプリを公開しようとしたのですが、表題の通り、

git push heroku master

後のプリコンパイルに失敗しまくり、全然うまくデプロイできませんでしたので、その症状と解決方法を記録します😄

エラーの内容

git push heroku master
(省略)
remote:  !     Precompiling assets failed.

原因

問題の切り分けのため、次のように対応してみました。

実行したこと 結果 備考
1 rake assets:precompile プリコンパイル成功⭐️ ローカルでプリコンパイル
2 bundle exec rake assets:precompile RAILS_ENV=production 失敗😢 本番環境とrailsに伝えてプリコンパイル

ん〜。ローカルではうまくいってるなぁ? 今までvue.jsを使わなかった頃は、普通に本番環境でプリコンパイルできてたのにな?   アセットパイプラインのプリコンパイルがうまくいってないようだ。   vueを入れるためにwebpackerは入れたけど・・・

あっ・・・(察し)

解決方法

試しにwebpackerを使ってコンパイルしてみます。

rails webpacker:compile

結果:コンパイル成功🌟   これだ〜 webpacker入れてvueとか導入してるのに、コンパイルで全然使ってへんかった〜(無知)😳   ということで、git push heroku masterしますが、筆者の設定が悪く、webpackerによるプリコンパイルがHeokuでは行われず、アセットパイプラインでコンパイルしようとして、エラーが生じていました。

ほんならローカルでコンパイルして、本番に上げてやるわい(固い決意)

そこでHeroku公式を眺めたところ、

Compile phase As a final task in the compilation phase, the assets:precompile Rake task is executed if you have a assets:precompile Rake task defined, and don’t have a public/assets/manifest-*.json file. This will compile all assets and put them in your public directory. If the rake detection or the asset compilation task fails, the deploy will fail as well. For more information refer to Rails Asset Pipeline on Heroku Cedar.

どうやらpublic/assets/

配下にmanifest-(ホニャララ).jsonというファイルがあれば、Heroku側でrake assets:precompileされないとのこと。

ということで、

1.public/assetsに中身が空のmanifest-no-compile.jsonというファイルを配置 2.ローカル環境でrails webpacker:compileを実施 3./public配下にコンパイルされたファイルが配置されていくので、git add .からのgit commit -m 'ローカルでコンパイル' 4.git push heroku master

でうまくherokuの本番環境へデプロイすることができました😚