【Heroku】Rails + Vueのアプリがデプロイできなかった時の解決法

ローカル環境ではforemanを使用して、rails sとwebpack-dev-serverで開発しておりました。

そのままHerokuにデプロイしたところ、デプロイに失敗しました。
その際の解決方法です。

０、バージョン

ruby：2.6.5
webpacker：5.2.1

１、結論

下記コマンドを打ってbuildpackを追加した後にデプロイをすると成功しました。
※「sushi」はアプリ名です。

heroku buildpacks:add -a sushi --index 1 heroku/nodejs
heroku buildpacks:add -a sushi --index 2 heroku/ruby

２、buildpacksとは？

そもそも「buildpacks」について調べると、こちらに下記の記載ありました。

Buildpacks are responsible for transforming deployed code into a slug, which can then be executed on a dyno.

意訳：ビルドバック(Buildpacks)はデプロイされたコードをスラッグ(slug)に変換する責任があります。スラッグはダイノ(dyno)で実行可能です。

ソースコードをDyno上で動く実行ファイル(slug)に変換(ビルド)する仕組みのようです。名前の通りでした。

今回のケースではRuby と Vueを動かすためのnode.js、２つのビルドバックを設定する必要がありました。

Heroku公式にも記事がありました。