##初めに
rails でアプリを作成し、herokuでデプロイしようとした時にハマったエラーです。
herokuのドキュメント通りに以下を実行しました。
brew install heroku/brew/heroku
heroku login
heroku create
git push heroku main　→　エラー発生

##開発環境
macOS Big Sur
Ruby 2.6.6
rails 6.1.2
heroku 7.47.12
node v14.15.4

##状況①
git push heroku mainを実行すると
以下のエラーが発生

terminal.

remote:  !     Could not detect rake tasks
remote:  !     ensure you can run `$ bundle exec rake -P` against your app
remote:  !     and using the production group of your Gemfile.
remote:  !     /tmp/build_a32ae899/vendor/ruby-2.6.6/lib/ruby/2.6.0/rubygems/dependency.rb:311:in `to_specs': Could not find 'spring' (= 2.1.1) among 117 total gem(s) (Gem::MissingSpecError)
remote:  !     Checked in 'GEM_PATH=/tmp/build_a32ae899/vendor/bundle/ruby/2.6.0', execute `gem env` for more information
remote:  !     from /tmp/build_a32ae899/vendor/ruby-2.6.6/lib/ruby/2.6.0/rubygems/dependency.rb:323:in `to_spec'
remote:  !     from /tmp/build_a32ae899/vendor/ruby-2.6.6/lib/ruby/2.6.0/rubygems/core_ext/kernel_gem.rb:65:in `gem'
remote:  !     from /tmp/build_a32ae899/bin/spring:15:in `<top (required)>'
remote:  !     from /tmp/build_a32ae899/bin/rake:4:in `load'
remote:  !     from /tmp/build_a32ae899/bin/rake:4:in `<main>'

spring GemがなくてGem::MissingSpecErrorが検出されてしまっていることが判明。
（たくさんの記事があるbundler関連のエラーではなかった。）
以下の記事を参考に修正を試みる。
https://teratail.com/questions/314173
https://github.com/rails/rails/issues/40911
https://yumishin.com/spring-spec-error/

ざっくり記事をまとめると
rails6.0では起動していたがrails6.1だとこのようなエラーが発生してしまうらしい。
なので、そもそもspring gemを使わないようにすることで対策をとったという内容です。

###実施したこと

Gemfile.

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 4.1.0'
  # Display performance information such as SQL time and flame graphs for each request in your browser.
  # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
  gem 'listen', '~> 3.3'
  gem 'rack-mini-profiler', '~> 2.0'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'rubocop', require: false
  # gem 'spring'                   ←　コメントアウトにしました。
  # gem 'spring-commands-rspec'　　 ← コメントアウトにしました。
end

再度、git push heroku main を実行

すると、、、

##状況②

terminal.

remote:  !     Could not detect rake tasks
remote:  !     ensure you can run `$ bundle exec rake -P` against your app
remote:  !     and using the production group of your Gemfile.
remote:  !     /tmp/build_38add2cc/config/boot.rb:6:in `require': cannot load such file -- bootsnap/setup (LoadError)
remote:  !     from /tmp/build_38add2cc/config/boot.rb:6:in `<top (required)>'
remote:  !     from /tmp/build_38add2cc/bin/rake:5:in `require_relative'
remote:  !     from /tmp/build_38add2cc/bin/rake:5:in `<main>'

うん、、エラー内容が変わったから、一歩前進。
今度はbootsnap/setup なんてfileはロード出来ないよ、と言ってますね。

（bootsnapとは、https://qiita.com/Daniel_Nakano/items/aadeaa7ae4e227b73878）

以下の記事を参考に修正
https://qiita.com/cyborg__ninja/items/d15b50500f4ffb069feb

###実施したこと

Gemfile.

# gem 'bootsnap', '>= 1.4.4', require: false ←　コメントアウトしました

config/boot.rb

# require 'bootsnap/setup' ←　コメントアウトしました

再度、git push heroku mainを実行

すると、、、

##状況③

terminal.

remote:  !     Could not detect rake tasks
remote:  !     ensure you can run `$ bundle exec rake -P` against your app
remote:  !     and using the production group of your Gemfile.
remote:  !     /tmp/build_0750ee34/bin/rake:6:in `require': cannot load such file -- rake (LoadError)
remote:  !     from /tmp/build_0750ee34/bin/rake:6:in `<main>'

ここでまた、違うエラーと遭遇。
、、、つまり一歩前進。
次はrakeファイルのエラー問題みたいだな。
どうやら、よくある、bundlerのバージョンの違いで発生しているエラー。

git push heroku mainでは

remote: -----> Installing dependencies using bundler 2.1.4

と表示されているのに対し、bundler -v を実行すると

Bundler version 2.2.9

と表示されることから、ローカル環境とherokuの環境に差異があることが判明

ローカル環境のbundlerバージョンを2.1.4にする。
以下を実行

% rm Gemfile.lock 
% gem install bundler -v 2.1.4
% bundle _2.1.4_ install --without production

再度、git push heroku main　を実行

すると、、、

##状況④

terminal.

remote:        error Couldn't find a package.json file in "/tmp/build_86c41e8f"
remote:        
remote: 
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed

が発生。エラー内容が段々シンプルになってきてる。
１行目のerror Couldn't find a package.json file in "/tmp/build_86c41e8f"が問題のよう。

% npm init

このコマンドを実行し、いくつか質問されるので全てreturnで対応。
すると、package.jsonファイルが作成される。

ここで、git push heroku main
を実行。

すると、、、

##状況⑤

terminal.

remote:        error Command "webpack" not found.
remote:        
remote: 
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed

webpackがないとのことなので

rails webpacker:install

を実行後、
git push heroku main

すると、、、

##状況⑥

terminal.

remote:        ModuleNotFoundError: Module not found: Error: Can't resolve 'turbolinks' in '/tmp/build_51759ff8/app/javascript/packs'
remote:            at /tmp/build_51759ff8/node_modules/webpack/lib/Compilation.js:925:10
remote:            at /tmp/build_51759ff8/node_modules/webpack/lib/NormalModuleFactory.js:401:22
remote:            at /tmp/build_51759ff8/node_modules/webpack/lib/NormalModuleFactory.js:130:21
remote:            at /tmp/build_51759ff8/node_modules/webpack/lib/NormalModuleFactory.js:224:22
remote:            at /tmp/build_51759ff8/node_modules/neo-async/async.js:2830:7
(以下省略)

Can't resolve 'turbolinks' とのことなので以下の記事を参考にする。
https://stackoverflow.com/questions/59344632/cannot-find-module-rails-ujs-rails-6-webpack-app

yarn add rails-ujs turbolinks
npm install rails-ujs turbolinks

を実行。
再度、git push heroku main

##状況⑦

remote:        ModuleNotFoundError: Module not found: Error: Can't resolve '@rails/ujs' in '/tmp/build_01a89792/app/javascript/packs'
remote:            at /tmp/build_01a89792/node_modules/webpack/lib/Compilation.js:925:10
remote:            at /tmp/build_01a89792/node_modules/webpack/lib/NormalModuleFactory.js:401:22
(以下省略)

先ほどとほとんど変わらない。けど、よく見て見るとCan't resolve以下が@rails/ujsに変化しました。
再度、先ほどと同じ記事を参考にして

yarn autoclean --init

で.yarncleanを作成。
.yarncleanファイルにある、

# asset directories
docs
doc
website
images
assets

これらを削除。
再度、
git push heroku mainコマンドを実行
、、、変化なし。

yarn add @rails/ujs

を実行後、再度git push heroku main

##状況⑧

remote:        ModuleNotFoundError: Module not found: Error: Can't resolve '@rails/activestorage' in '/tmp/build_5a5ba780/app/javascript/packs'
remote:            at /tmp/build_5a5ba780/node_modules/webpack/lib/Compilation.js:925:10
remote:            at /tmp/build_5a5ba780/node_modules/webpack/lib/NormalModuleFactory.js:401:22
remote:   
(以下省略)

先ほど同様に

yarn add @rails/activestorage

そして、git push heroku main

ついに、エラー解消！！！
デプロイ完了！！！

herokuで取得したurlにアクセスしてみると、、、

##状況⑨

We're sorry, but something went wrong.
If you are the application owner check the logs for more information.

ついに、ここまで辿り着きましたね。自分の成長ぶりに脱帽です。
（と言って自分を慰める）

heroku logs -t

のコマンドを入力し、エラー箇所を調査。

すると、

terminal.

2021-02-16T10:19:10.359353+00:00 app[web.1]: [f82b25ed-22c7-4829-8491-8dfa334ea748] Completed 500 Internal Server Error in 48ms (ActiveRecord: 15.4ms | Allocations: 3563)
2021-02-16T10:19:10.360340+00:00 app[web.1]: [f82b25ed-22c7-4829-8491-8dfa334ea748]
2021-02-16T10:19:10.360342+00:00 app[web.1]: [f82b25ed-22c7-4829-8491-8dfa334ea748] ActionView::Template::Error (Webpacker can't find application.css in /app/public/packs/manifest.json. Possible causes:

エラー発見。ここを修正していく。
以下を参照して解決を試みる。
https://github.com/rails/webpacker/issues/2071

###実施したこと
/app/view/layouts/application.html.erbファイルに移動

application.html.erb


<%# <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
#↑コメントアウトしました

ようやく、web上でアプリ開けました！！！

##参考文献
yarnとは
https://e-words.jp/w/Yarn.html#:~:text=Yarn%E3%81%A8%E3%81%AF%E3%80%81%E4%B8%BB%E3%81%AB,%E4%BD%B5%E7%94%A8%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%80%82

検索の仕方
↓大変参考になりました！
https://qiita.com/y_tom/items/1b54d4e1a9a5f3fab402#%E4%BD%93%E7%B3%BB%E7%9A%84%E3%81%AB%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B%E3%81%AA%E3%82%89%E5%85%AC%E5%BC%8F%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%A8speaker-deck%E3%82%92%E4%BD%B5%E7%94%A8%E3%81%99%E3%82%8B