エンジニアとしての市場価値を測りませんか?PR

企業からあなたに合ったオリジナルのスカウトを受け取って、市場価値を測りましょう

9
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[デプロイ]アセットパイプラインとはなんぞや???[本番環境]

Last updated at Posted at 2018-06-26

はじめに

ある時、僕はアプリを作って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に書かれている

production.rb
config.assets.compile = false

というものを

production.rb
  config.assets.compile = true

に変更します(falseをtrueに変更します)

以上で、CSSやJavaScriptを反映させることができます。

まとめ

アセットパイプラインを使う理由は・・・・
・CSSファイル,imageファイル、javascriptsファイルを一つのファイルにまとめて、webブラウザでちゃんと読み込めるようにすること。
・一つのファイルにまとめることで、処理を高速にして、webブラウザでページの表示を素早くさせるということ。

というわけで・・・

お読みいただきありがとうございました。
次はハッシュ値について時間があるとき書けたらなぁと考えております。

間違い等ございましたら、ご指摘いただけると嬉しいです!

9
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Comments

No comments

Let's comment your feelings that are more than good

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

9
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?