はじめに
ある時、僕はアプリを作ってAWSでデプロイをしました。
デプロイ自体はできて本番環境でちゃんと動いてくれたんですよね。わーいですよね。
が、しかしですね、CSSがあたらかったんですよね。むちゃ困りますよね。
そして、原因としては、アセットパイプラインでした。アセットパイプラインが上手くできておらず、そのためcssが無くて崩れて表示されていたんですよね。
そのときに、
「アセットパイプラインとはなんぞや？？？」
と思ったので、調べてわかったことをまとめてみました。
対象とする人
・デプロイした時、cssが当たらないんですけど・・・・な人
この記事の流れ
・一言でいうと・・・
・前提として・・・・
・詳しく書くと・・・
・まとめ
一言でいうと・・・
「CSSファイル,imageファイル、javascriptsファイルを一つのファイルにまとめること」
です！！！！
では、詳しく書いていきますね〜。
前提として・・・・
詳しく書く前に、
まず、前提として、インターネット上の情報は、Webブラウザを介して見ることがほとんどですよね。
そのWebブラウザ上に画面が表示されるのは、
”WebブラウザがHTMLとCSS、JavaScriptを認識してくれる”
からなんですよね。
当たり前やん！と思われたかもしれませんが、このことを頭に置いて、記事を読み進めていってもらえたらと思います。
詳しく書くと・・・
何かアプリケーションを作成する時、
開発環境においてはjsファイルや、cssファイル、imageファイルは別のディレクトリに入っていますよね。
例 ①cssファイル➡︎app/assets/stylesheets/hogehoge.css
②jsファイル➡︎app/assets/javascripts/abc.js
どうして分かれているかというと、
「開発環境で開発をするときに、一つのディレクトリの中に色々なファイルが全て入っていたら開発がしにくいから」
です。
例えばcssファイルとjsファイルが同じディレクトリの中にあると、なんのファイルがどこにあるかが分かりづらく、あのファイルどこだっけ？どのディレクトリにあるんだっけ？みたいなことになりかねません。
そのため、開発環境ではjsファイルや、cssファイル、imageファイルは別のディレクトリに分かれています。
そして、開発環境では、その分かれているファイルをちゃんと読み込んでくれるので、cssが崩れたりすることはありません。
ですが！
本番環境では、その分かれているファイルを読み込むことができません。
そのため、「アセットパイプライン」という仕組みが用いられるようになりました。
流れとしては、
アプリケーションを開発！
⬇︎
本番にデプロイ
⬇️
cssファイル、jsファイル、imageファイルを本番環境にも適応させてwebブラウザで見れるようにしなくちゃ。
でも、webブラウザには複数のファイルを読み込む力が無いよー
⬇️
どうしよう・・・・。
⬇️
そうや！複数のファイルを読み込むんじゃなくて、結合して一つにしたらええんやわ！そうしたら、ちゃんとwebブラウザも読み込んでくれる！
⬇️
結合して一つのファイルにするには・・・・
⬇️
アセットパイプラインを使えばええんや！
こんな流れです。
さらに、アセットパイプラインを使えば、一つにファイルがまとめられるため、その分処理が高速になります。
そして、そのアセットパイプラインを使うために、
本番環境上で「プリコンパイル処理」というのをします。
本番環境上で、
rails assets:precompile
をします。
最後に、本番環境上でアセットパイプラインを自動で通るように設定を変更すればCSSファイル等が崩れずに表示されます。
production.rbに書かれている
config.assets.compile = false
というものを
config.assets.compile = true
に変更します(falseをtrueに変更します)
以上で、CSSやJavaScriptを反映させることができます。
まとめ
アセットパイプラインを使う理由は・・・・
・CSSファイル,imageファイル、javascriptsファイルを一つのファイルにまとめて、webブラウザでちゃんと読み込めるようにすること。
・一つのファイルにまとめることで、処理を高速にして、webブラウザでページの表示を素早くさせるということ。
というわけで・・・
お読みいただきありがとうございました。
次はハッシュ値について時間があるとき書けたらなぁと考えております。
間違い等ございましたら、ご指摘いただけると嬉しいです！