herokuにデプロイしたrailsアプリにbootstrapが効かない場合の対処

herokuにデプロイしたrailsアプリにbootstrapが効かない場合の対処

こんにちは。
今日はbootstrapでスタイルをつけたrailsアプリケーションを、herokuにデプロイして起動した際、
cssが効いていないという場合にすべき対処についてです。

まず、コンソールで以下のコマンドを実行しましょう。
cloud9で開発している場合も同様です。
「$ rake assets:precompile」

その後、herokuにデプロイします。
cloud9からデプロイする設定が出来ているのであれば、
gitにコミットして、git pushだけでいいです。

これでheroku上でも問題無くアプリケーションにスタイルが適用されているはずです。

「$ rake assets:precompile」というコマンドが何をしているかというと、
railsアプリは、assetsフォルダ内のファイルを最適化(コンパイル)し、
その最適化したファイルを読み込むようになっているようです。

これが開発環境では自動的にされるのですが、
本番環境ではされないのが原因のようです。

なので、本番環境にデプロイする際には、
明示的に最適化をするように指示する必要があるということです。

ついでに、同じくbootstrapでスタイルをつけたrailsアプリをデプロイした時、
スタイルは問題無いけど、
javascriptの処理が効いていない(画像のスライドが動かない、グローバルメニューが開かない等)
という場合の対処です。

まず、以下のキャプチャのように、
デベロッパーツールのコンソールにエラーが出ていないか確認します。

ブラウザがchromeの場合、
デベロッパーツールの起動方法は、以下の通りです。
windows → F12
mac → command + shift + i

もしエラーが出ているようであれば、
必要なjavascriptのファイルが読み込めていないのかもしれません。

railsの[app/assets/javascripts/application.js]
以下の記述がされているか確認してみましょう。

//= require jquery
//= require popper
//= require bootstrap-sprockets

この記述で、bootstrapのjavascriptが動作するのに必要な
ファイルを読み込んでくれます。
もし無いのであれば、コピペで問題無いはずなので、書き足した上で、
herokuにデプロイしてみてください。
※この時、念のため先ほどの「$ rake assets:precompile」を実行してからデプロイしてください。

以下の通り、デベロッパーツールのコンソールからエラーが消えていれば問題無いはずです。

実は以前、このエラーが原因でかなりハマってしまい、
railsのバージョンの問題なのか、bootstrapの問題なのか、herokuの問題なのかと
あれこれ調べまくったことがあったのです。
誰かの役に立てば幸いです。