HerokuにDeployしたらCSS/JSが反映されない件
Railsチュートリアルの2周目も大分ペースは落ちたものの、13章まで進みチュートリアル卒業を目前にしていたところで予期せぬバグが発生しました。13章を終え、HerokuへDeployをしたら中途半端な形でCSS/JSが反映されてしまったのです。13章で更新したCSSやJSが反映されず、恐らく12章までのCSSは反映されている様な状態でした。（下記の画像のようなイメージ）
Development環境では問題なく表示されているのに何故なのか！？この問題が発生し、気になって眠れない質の私は次の日が仕事にも関わらず気づけば深夜の2時。睡眠時間と仕事のパフォーマンスが比例する体質なので、流石に限界を迎え寝ることにしました。翌日は仕事も忙しく開発の勉強には手を付けられずで放置。そして本日、土曜を迎えゆっくり冷静に解決をしようと思い、バグの回収に取り掛かりました。
改めて冷静に考えた時に、なんとなくアセットパイプラインの設定に問題があるんだろうなぁ、という予測がついたので色々調べて実行した結果、なんとものの15分程度で解決できてしまったのです。っと、前段が長くなりましたが開発初心者の皆さんも同じ壁にぶつかる可能性もありますので、私が行った解決法を共有いたします。
アセットのプリコンパイル
先程記載した通り、Development環境では問題なくCSSやJSが反映されており、HerokuへDeployする際に何かしらの問題が発生していると踏んだので色々調べてみると、$ rails assets:precompileが重要であることがわかりました。
詳しい理解はこれからにしようとは思っているのですが、大まかにはDeployする際に事前にアセットファイルをプリコンパイルを行わないとProduction環境にアセットを反映させることができず、結果最後にプリコンパイルした段階のアセットが反映されてしまうようです。このあたりが今回のバグの原因だろうと思いました。
そのため、再度下記のプリコンパイルのコマンドを入力してみることに。
$ rails assets:precompile
これができたら、再度Deployをすることで無事、期待通りの表示をさせることができました。
今回の学び
問題が発生すると焦って躍起になって早く解決をしなければ、という状態に陥ることが多いです。まさしく今回の私がその通りで、結果深夜2時までやっても解決ができず、翌日の仕事にも響く、という結果になってしまいました。これは個人的には最大の反省ポイントです。
一方で時間を置いて冷静になった後にこういった問題に取り掛かることで、大したリソースを割くことなく解決ができることも学びました。イレギュラーなケースが発生したときこそどこまで冷静でいられるか、これは今後エンジニアになるにおいてとても重要なマインドであることを実感することができたので、今回のバグとの戦いは自分にとってもとてもいい経験となりました。
