Cloud9でHerokuにデプロイする手順と起こったエラー

Ruby on Rails Tutorial第1章を進めていた際にエラーが発生。

環境

開発環境は、
・Cloud9
・Ubuntu Server 18.04 LTS
・Ruby -v 2.6.3
・Rails -v 6.0.3

今回起こったエラー

Rails Tutorial 2周目をしながらオリジナルアプリを開発するというタイミングでのエラーです。

・$ rails serverに失敗したときのエラーコード。

$ rails s
.
.
.
Webpacker configuration file not found /home/ubuntu/environment/first_app/config/webpacker.yml. Please run rails webpacker:install Error: No such file or directory @ rb_sysopen - /home/ubuntu/environment/first_app/config/webpacker.yml (RuntimeError)

・Herokuへのpushに失敗した時のエラーコード

$ git push heroku master
.
.
.
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 sleepy-depths-86751.
remote: 
To https://git.heroku.com/sleepy-depths-86751.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/sleepy-depths-86751.git'

今回起こったエラーはおそらく、WebPackerをインストールしていなかったことが原因。
RailsTutorial 1種目の時には、このエラーに引っかかった覚えはないのですが...。
このエラーの解決にとても参考になった記事はこちら↓

Rails6 開発時につまづきそうな webpacker, yarn 関係のエラーと解決方法

操作手順

Cloud9上で新規アプリ作成します。
操作手順は、Ruby on Rails Tutorialから引用しました。

Ruby on Rails Tutorial / 第1章

アプリ新規作成

・ターミナルで以下の順に実行
※ここでyarnのインストールを忘れたのが、上記のエラーの原因なのか？

$ echo "gem: --no-document" >> ~/.gemrc
$ gem install rails -v 6.0.3
$ source <(curl -sL https://cdn.learnenough.com/yarn_install)
$ yarn install --check-files
$ rails _6.0.3_ new sample_app

・webpackerをインストール

$ rails webpacker:install 

...
Done in 7.00s.
Webpacker successfully installed 🎉 🍰

（RailsTutorial 1周目の時は、ここは入力しなくても問題ありませんでした。）
初学者としての推測なのですが、yarnをインストールしないまま$rails newしてしまったために、webpackerが一緒に作成されなかったのでしょうか？　

ファイルを編集

・Gemfileをいじる

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

gem 'rails',      '6.0.3'
gem 'puma',       '4.3.6'
gem 'sass-rails', '5.1.0'
gem 'webpacker',  '4.0.7'
gem 'turbolinks', '5.2.0'
gem 'jbuilder',   '2.9.1'
gem 'bootsnap',   '1.4.5', require: false

group :development, :test do
  gem 'sqlite3', '1.4.1'
  gem 'byebug',  '11.0.1', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  gem 'web-console',           '4.0.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.1.0'
  gem 'spring-watcher-listen', '2.0.1'
end

group :test do
  gem 'capybara',           '3.28.0'
  gem 'selenium-webdriver', '3.142.4'
  gem 'webdrivers',         '4.1.2'
end

group :production do
  gem 'pg', '1.1.4'
end

# Windows ではタイムゾーン情報用の tzinfo-data gem を含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

・ローカルWebサーバーへの接続を許可する

config/environments/development.rb

Rails.application.configure do
  .
  .
  .
  # Cloud9 への接続を許可する
  config.hosts.clear
end

GitHubにpush

$ git config --global credential.helper "cache --timeout=86400"
$ git init
$ git add -A
$ git commit -m "Comment"

#GitHubサイトで新規リポジトリ作成

$ git remote add origin https://github.com/<あなたのGitHubアカウント名>/sample_app.git
$ git push -u origin master

Herokuにデプロイする

$ source <(curl -sL https://cdn.learnenough.com/heroku_install)
$ heroku login --interactive
$ heroku create
$ git push heroku master

これで正常に動作しました。

学んだこと

学んだことは以下の通り。

• エラーコードをしっかりと読み解いていく努力

エラーコードに書かれている内容は以下の通り。

• どこがエラーになったのか
• なぜエラーになったのか
• エラーの解消方法

普通に当たり前のことですが、初学段階で陥りやすいことかもです。