herokuビルドでアプリがcrashしてしまった時の解決例

どうもaono1234と申します。記事がいいなと思ったらtwitterのフォローもお待ちしております‼
https://twitter.com/takeshi_program

herokuにデプロイした際にビルドは成功したのですが、WEBページを開くと下記の画面になってしまいました。
1週間ほど嵌ったので備忘録として記載します。🤢
参考にしてください。

起点 「Application error」

ビルドが正常に終了したのに、WEBページに「Application error」画面が表示され、「heroku logs --tail」でログを確認してね！とあるのでターミナルで確認する。
以下のログが表示されていた。

heroku logs --tail

2022-09-12T03:32:48.194301+00:00 heroku[web.1]: Starting process with command `npm start`
2022-09-12T03:32:49.916104+00:00 app[web.1]: npm ERR! Missing script: "start"
2022-09-12T03:32:49.916170+00:00 app[web.1]: npm ERR!
2022-09-12T03:32:49.916312+00:00 app[web.1]: npm ERR! Did you mean one of these?
2022-09-12T03:32:49.916354+00:00 app[web.1]: npm ERR!     npm star # Mark your favorite packages
2022-09-12T03:32:49.916482+00:00 app[web.1]: npm ERR!     npm stars # View packages marked as favorites
2022-09-12T03:32:49.916530+00:00 app[web.1]: npm ERR!
2022-09-12T03:32:49.916575+00:00 app[web.1]: npm ERR! To see a list of scripts, run:
2022-09-12T03:32:49.916690+00:00 app[web.1]: npm ERR!   npm run
2022-09-12T03:32:49.918037+00:00 app[web.1]: 
2022-09-12T03:32:49.918188+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2022-09-12T03:32:49.918252+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2022-09-12T03_32_49_844Z-debug-0.log
2022-09-12T03:32:50.026780+00:00 heroku[web.1]: Process exited with status 1
2022-09-12T03:32:50.327030+00:00 heroku[web.1]: State changed from starting to crashed

npm　エラーが発生しており、色々と検索して実施してみたが上手く行かない…万事休すか？🤪

しかし、新しいheroku インスタンス（heroku create）でデプロイしたら正常にできる時もあった！なぜ！？😲
その差分を比較検証し、原因を深堀りしてみました。

結論

herokuのビルドバックの実行順序が適切でなかったことが原因だった。

詳細

私のアプリではheroku/rubyとheroku/node.jsという2つのビルドパックをインストールしてビルドしています。
「Application error」が表示される時は

1. heroku/ruby
2. heroku/node.js
   という順番の時に発生しておりました。

ビルドバックはherokuのGUIのsettingsで確認できます)

ビルドパックの順番を以下の順番に変えました。（ドラッグアンドドロップで順番を変えられる）

hrokuのGUIでビルドパックの順番を変えることでビルドの順番も変わるようです。(git push heroku masterコマンドで実行されるビルド)

ビルドパックの順番を変える前のビルドログ

-----> Building on the Heroku-20 stack
-----> Using buildpacks:
       1. heroku/ruby
       2. heroku/nodejs
-----> Ruby app detected
-----> Installing bundler 2.3.10

ビルドパックの順番を変えた後のビルドログ

-----> Building on the Heroku-20 stack
remote: -----> Using buildpacks:
remote:        1. heroku/nodejs
remote:        2. heroku/ruby
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment

注意

heroku create して「最初のビルド実行」時点でビルドパックの順序が適切でない場合、
順序変更して「2回目のビルド実行」をしても
heroku内部でゴミデータが生成される？ようでうまくWEBページを開きません。

なので、ビルドパックの順序が適切でない場合は新しくheroku　createをして適切なビルドパック順序にしてトライしてみて下さい。

今後の展開

「ビルドの順序が変わるとどこで不具合が発生するのか」というミクロな視点での分析ができていないため、もっとビルドに関して勉強する必要がある。