開発環境
Ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-darwin15]
Rails 4.2.10
Heroku
起こった問題
Ruby on Railsで作成したアプリケーションを、Herokuでデプロイしました。その際、development環境では正しく表示されていたビューが、Herokuデプロイ後のproduction環境では以下のように崩れてしまいます。アセットパイプラインでの処理に問題があるようです。
スクリーンショット
development環境では正しく表示されていたビューが
production環境では崩れている
わかりにくいですが、サービスロゴが表示されない、フォントカラーやボーダーカラーが指定したものと異なる。などなど
原因
Herokuではアセットパイプラインに関して必ず設定が必要です。以下に手順を記載します。
1. config/application.rbに下記コードを追記
config.assets.initialize_on_precompile = false
2. ターミナルにて下記コマンド実行
$ heroku run bundle exec rake assets:precompile RAILS_ENV=production -a [appname]
説明
heroku run [コマンド] -a [appname]
Herokuサーバーにてコマンドを実行するために必要なコマンド。Herokuに登録されているアプリ名をオプションで指定する必要あり。
bundle exec rake assets:precompile RAILS_ENV=production
アセットのプリコンパイルを手動で実行するためのコマンド。production環境を指定し実行している。
※以下に[Herokuドキュメント](https://devcenter.heroku.com/articles/rails-asset-pipeline)の抜粋を記載します。
>
Troubleshooting
Failures in the assets:precompile task
In Rails 3.x, you can prevent initializing your application and connecting to the database by ensuring that the following line is in your config/application.rb:
```config.assets.initialize_on_precompile = false```
Do not forget to commit to git after changing this setting.
Before you can compile your assets on Heroku, you’ll need to be able to compile them locally, run this command to debug your assets:
```$ RAILS_ENV=production bundle exec rake assets:precompile```
This should complete with no errors. Do NOT check in the assets into git after running this command.
## 参考
[RailsGuidesアセットパイプライン](https://railsguides.jp/asset_pipeline.html)
[Rails Asset Pipeline on Heroku](https://devcenter.heroku.com/articles/rails-asset-pipeline)
[RubyStudioアセットパイプライン](http://ruby.studio-kingdom.com/rails/guides/asset_pipeline)
[Rails4 asset pipeline関連設定まとめ(Heroku対応込)](https://qiita.com/tomomomo1217/items/fa8dfa094cc4c0e4e350)
[Rails初学者がつまずきやすい「アセットパイプライン」](https://www.transnet.ne.jp/2016/02/28/rails%E5%88%9D%E5%AD%A6%E8%80%85%E3%81%8C%E3%81%A4%E3%81%BE%E3%81%9A%E3%81%8Dcolnr%E3%80%8C%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%83%91%E3%82%A4%E3%83%97%E3%83%A9%E3%82%A4%E3%83%B3/)
# 最後に
どなたかの助けになれば幸いです。間違っている点、アドバイスなどあればコメントいただければと思います。