HerokuにPushしてcssとjavascriptが反映されていないとき:Rails5
CSS
・本番環境では、アセットパイプラインを通る処理が自動実行されない
→Herokuなどの本番環境でcssやjavascriptが反映されない
・解決策は2つ
→本番環境上でアセットパイプラインを通るようにプリコンパイル処理を実行する
→Herokuにファイルを送付する前に
$rake assets:precompile RAILS_ENV=production
を実行。
or
→本番環境時でアセットパイプラインを自動で通るように設定を変更する
→config/production.rbのファイルの
config.assets.compile = false
をtrueに変更。
Javascript
・Asset PipelineでJavascriptが読み込まれる仕組みは以下
・上記の記事の通りDevelop環境とProduction環境ではCSS/Javascriptが読み込まれる仕組みが違う
→そのため、application.jsの各種ライブラリを読み込む順序が大切
→以下の記事の通りBootstrapはjqueryの後に読み込まれないといけない
・で、筆者がハマったのは、
・Bootstrapは反映されたが、Chartkickが反映されていなかった
・ChromeのコンソールでChrtkickに以下のエラーが発生してた
uncaught referenceerror: chartkick is not defined
・で、その周りばっかり調べてたけど、上記エラーより前に出ていた、以下のエラーがそもそもの原因のようだった
uncaught typeerror: cannot read property 'fn' of undefined
・一番最初の記事の通り、Production環境ではJavascriptで一つエラーが出ると、そのあとのコードが実行されない
・Develop環境ではtypeerrorが出てもChartkickが読み込まれてたが、Prodction環境では、そうはいかない、という感じ