1. 概要
自作Railsアプリのプログラム部分の開発が大体終わったので、Docker環境上でproductionできちんと動くかどうか検証したところ、一部のデザインの表示が崩れたり、グラフが表示されない、ツールチップが動作しない等の不具合が生じた。
解決まで結構時間がかかってしまったので、備忘として記録する。
2. 前提
Railsバージョン：7.1.4
3. 試したこと
ChatGPTに聞いたら色々解決策を提示してくれたので、まずは以下のことを試してみた。
rails asset:precompile
Productionモードでは、アセットが事前にプリコンパイルされていないと正しく読み込めないとのことなので、Dockerコンテナ作成後に以下のコマンドを実施
docker-compose run web rails assets:precompile
→特に表示は変わらずデザインが崩れたままだった。
実行後に
File to import not found or unreadable: microtip.min. (SassC::SyntaxError)
というエラーを吐いていたので、microtip.minが正しいフォルダに格納されていないのかもと思い、確認したものの、assets/stylesheets配下に格納されているため、格納パスには問題なさそう。。。
production.rbの見直し
production環境では、アセットパイプラインでプリコンパイルされたファイルが public/assets に配置される。Railsサーバーが適切なURLでアセットを提供していない可能性があるため、以下のコードをproduction.rbに追加。
# 以下追加
config.assets.compile = false
config.assets.digest = true
config.assets.debug = false
config.public_file_server.enabled = true
→特に表示は変わらずデザインが崩れたままだった。
4. さらに試したこと
rails asset:precompileに失敗していることについてもう一度考える
rails asset:precompileについてはよく理解しない状態で実行していたが、以下の記事を見ると、asset:precompileを実行することによりapp/assets配下のファイルがpublic/assets配下にプリコンパイルされるという動きをとるらしい。
production環境ではpublic/assets内のファイルを読み取る。
public/assets内のファイルを参照して不足しているものがあるかどうか確認したところ、ちょうど本番環境上で不具合が生じている、microtip.min.cssに対応するファイルがないことを確認。
rails asset:precompileが正常に動作していればmicrotip.min.cssに対応するファイルもpublic/assets内に存在しているはず。
→rails asset:precompileのエラーを解決してしまえばデザインの崩れも治るはずだと考えた
（一部デザインを除き正常に表示されているのは、ローカルで開発している過程でrails asset:precompileを実行したことがあり、その時に大半のファイルがpublic/assetsにコンパイルされたため。
事実、正常に表示されていないのはツールチップ等の開発の後半に導入したデザイン）
rails asset:precompile実行時のエラーを解決する。
File to import not found or unreadable: microtip.min. (SassC::SyntaxError)
rails asset:precompile実行時の上記エラーを見ると、microtip.min.cssのインポートに失敗している。
先述の通りmicrotip.min.cssはassets/stylesheetsフォルダ内に格納されているため、格納パスには問題ない。
application.css内では以下のようにしてmicrotip.min.cssのインポートを実施していたが、
@import 'app/assets/stylesheets/microtip.min.css';
以下のようにフルパス指定に変えてみたところ、rails asset:precompileは正常に動作し、無事microtip.min.css等を含めてプリコンパイルすることに成功。
@import 'app/assets/stylesheets/microtip.min.css';
5. 結果
docker-compose upコマンドでRailsアプリを立ち上げて再度アプリの動作を確認したところ、崩れていたデザインが全て正常に表示されました！
6. まとめ
rails asset:precompileの意味を初めからきちんと理解しようとしていればもっと早く解決できたので、コマンドの意味をきちんと理解した上で実行することの大切さを実感しました。。。