こんにちは。
今日は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の問題なのかと
あれこれ調べまくったことがあったのです。
誰かの役に立てば幸いです。