Day13 Herokuデプロイエラー



#Herokuデプロイエラー
今回は今までのエラーなどと違い、エラーを検索しても直接ヒントになるような他の方の記録はみつけることができなかった。
それもあって3日もかかってしまったがなんとか解決することができた。

##問題
Precompile時にどうやら空のファイルがあるらしく、Precompileできないとエラーが出てしまう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/2d46a940-666f-81bd-1a64-351bfced7470.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/8417491b-1462-1023-6228-35671e400417.png)
##やったこと
**1 config.assets.initialize_on_precompile = falseをapplication.rbに追加**　
→効果なし
https://codenote.net/heroku/1050.html

**2 app/javascript/packs/application.jsを手動で作成**
→効果なし
https://tutorialmore.com/questions-453939.htm
https://stackoverflow.com/questions/56170975/invalid-configuration-object-when-starting-webpack-dev-server

**3 bin/rails assets:precompile , RAILS_ENV=development bin/rails assets:precompile, RAILS_ENV=production bin/rails assets:precompile 手動でプリコンパイルを確認**
→問題なくできてしまう
→一度プリコンパイル時に生成されるファイルを全て破棄してからもう一度手動で行うと、Herokuデプロイ時と同じエラーが出たので、やはりプリコンパイルができないのが問題であるとわかった。
削除：bundle exec rake assets:clobber RAILS_ENV=production
https://qiita.com/fuku_tech/items/b21e49ff49cb19f04838

**4 エラー箇所周辺の空のファイルを削除（プリコンパイルで生成されるファイル）**
rails-ujs-ee9daaed45f772bfdf4f30848e196b0eb2fe3afa414b27a5702ceff1f7106c7a 2.js
rails-ujs-ee9daaed45f772bfdf4f30848e196b0eb2fe3afa414b27a5702ceff1f7106c7a 3.js
rails-ujs-ee9daaed45f772bfdf4f30848e196b0eb2fe3afa414b27a5702ceff1f7106c7a 4.js
rails-ujs-ee9daaed45f772bfdf4f30848e196b0eb2fe3afa414b27a5702ceff1f7106c7a.js
rails-ujs-ee9daaed45f772bfdf4f30848e196b0eb2fe3afa414b27a5702ceff1f7106c7a.js.gz
のうち、2.3.4が何もないファイルだったため削除

**5 プリコンパイル対象になっているが、中身が何もないファイル郡（CSS等）を削除**
→効果なし

**6 プリコンパイルした結果のファイルで重複があった背景画像のファイルを削除**
→効果なし

**7　プリコンパイル対象の切り分け**
開発にあたって追加したgem関連のものが悪さをしているのじゃないかと思い、ほぼ全ての追加gemを本番環境から除外
→効果なし

**8 まっさらな状態のsampleをherokuにデプロイし比較（RailsやWebpack等の条件は同じ）**

成功するSampleAppのPrecompileされたファイル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/48d5d779-7156-bbc5-56cf-3eef88765315.png)
同じ種類まで削ったが、失敗するHealthAppのファイル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/9f53e8c9-1c5c-c6e7-c976-57d5c81e1d0e.png)
→コンパイル対象も同じにしたがプリコンパイルは失敗した。

##調べたこと
**SproketsとWebpacker**
Railsでは、CSSやJSを一つのファイルにまとめて（コンパイルして）それを参照することで処理を簡素にしている仕組み、アセットパイプラインがあるが、それをしているのはSproketsというものがしてくれている。
また最近では、同じような機能でWebpackerというものもある。
**-Sprokets**
対象：assets配下
出力場所：/public
読み込み方：![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/eef6dc5f-643a-9296-db56-cd0f97e8aab5.png)

**-Webpacker**
対象：app/javascript配下※application.jsはpacks配下
出力場所：public/packs
読み込み方：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/762470a4-7efe-8e9b-01f0-f4ca605accaf.png)

Webpackerのコンパイルを手動で行うには、rails webpacker:compile または bin/webpackで行うことができる。後述するが、これをしてもherokuと同じエラーが出た。つまりWebpackerがコンパイルする時にエラーがでているというのは間違いない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/02d2ee14-53fb-d546-0b9e-080558deaef4.png)
参照[webpacker-の仕組み](https://qiita.com/tatsurou313/items/645cbf0a3af4c673b5df#webpacker-%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF)
https://engineering.mobalab.net/2018/05/05/manage-assets-in-rails-using-webpacker/
##分析
Webpackerのコンパイル時になんらかの問題があることは間違いなくて、そう考えるとWebpacker自体が問題を抱えている、あるいは、対象のファイルがおかしいのどちらか、あるいはどちらもである。
また、同じWebpackerの条件でまっさらな状態のsampleを作成し、herokuにデプロイができることから前者は考えにくく、対象のファイルがおかしいということがわかった。

##比較
sampleと問題のものを比較すると、application.jsの配置が明らかに違うということがわかった。
実はグラフのchartkick導入の際、その時はsproketsとwebpackerというものがあるということすら知らず、後者の方法でインストールしたもののうまくグラフを適用させることができずに、いろいろと試行錯誤した結果、無意識にsprocketsの方法でchartkickを使用していた。
この無意識による試行錯誤のせいで、application.jsのあるjavascriptsディレクトリは、app配下からassets配下に移動され、それによりapp配下のjavascriptディレクトリは消滅していた。

##結論
結論から書くと、上述したapp配下のjavascriptディレクトリが消滅したことにより、webpackerが参照するはずのapp/javascript配下のファイルがなくなり、あのような「何もないので参照できません」というエラーが出ていた。
**Before（app配下にJavascriptディレクトリがない）＊＊
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/568ada5f-ddf1-6e90-1d87-0d923a98a28f.png)
**After(app配下にJavascriptファイルを作成）**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/2a88dfa1-868e-d026-1c8e-4eb5970263f5.png)
Javascriptディレクトリ（application.jsあり）を正しく配置することで、エラーがなくなりデプロイができた。

※実際には過去のまだ問題が起きる前のコミットを現在のものにマージして解決した。直った時は理由も全くわからなかったが、あとから分析した結果、マージしたことでWebpackerが参照できるJavascriptディレクトリが復活し、直ったということだった。
##Herokuデプロイエラーまとめ
なにもわからないまま大切なJavascriptディレクトリを消したことで、それを必要とするWebpackerがコンパイルできなくなり、またそのコンパイルを行うHerokuデプロイの際にエラーがでることでデプロイができなくなっていた。
目先のことを解決すること（グラフ）しか考えられていなかったが、もっと俯瞰的にみないと今回のようなことになってしまう。特に自動生成されたファイルやディレクトリの移動・削除はとても慎重に行わなければならないと実感した。
あとRails Tutorialにあったように本番環境へのデプロイはしっかりと最初からやっておくべきでした。


#例外処理
存在しないページ等にアクセスされた際に、Before_Actionではさばききれないものがあったりする。例えばルーティングエラーなど。
その時に存在しないページという旨を表示するような処理が必要だと思っていたが、基本的にRailsがすべてやってくれるらしい。
config/environmentsにあるファイルの
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/710487b9-861b-efd0-1f6b-c6f397756c54.png)
がtrueであればError画面が表示され、falseであれば「存在しないページ」といった風に変えることができる。本番環境のそれはすでにFalseであった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/764ad192-0bca-0fe7-0fdb-a024077cf5bf.png)
https://qiita.com/dach1_ken/items/6bbdfdd56ef84e3b2233

#これから
**1/27（月）-2/2（日）**
機能の追加・修正
>
・説明ページの追加
・本番環境画像アップロード先の変更、Validation実装
・交流を促進できるような機能の実装
Like Likedでいいねをした人と、してくれた人の表示蘭を作る。
ユーザ一覧機能に、いいね順ソートや、他の期になるユーザを見つけやすくする仕組みを作る。
・BMI確認や目標体重設定機能
・現存コードのドライ化等の修正

**2/3(月）-**
テストコードの学習・実装