Rails アセット パイプラインを理解する

公開: 2016-07-29

Ruby on Rails は、Ruby で書かれたフルスタックの Web 開発フレームワークです。 Ruby on Rails を使い始めたばかりの開発者にとって、ビューからアクセスできるコントローラーで定義されたインスタンス変数など、多くのことが魔法のように感じられるでしょう。 アセット パイプラインもそのようなものですが、特に本番環境に移行するときに混乱が生じることがあります。 その時点で、単純な Google 検索で解決策が得られますが、完全には感じられません。 この投稿では、Rails アセット パイプラインについての理解を深め、次回は行き詰まりを感じないようにします。

Railsアセットパイプライン

Rails アセット パイプライン

app/assets および vendor/assets フォルダー内に記述されたコードは、Ruby on Rails アプリケーションのほとんどのフロントエンドを構成します。 このフォルダー内に記述された Javascript または CSS は、本番環境のブラウザーに提供される前にコンパイルおよび縮小されます。 これらはすべて、Rails にデフォルトで同梱されているアセット パイプラインによって自動的に処理されます。 このアセット パイプラインは、sprockets-rails gem によって実装されます。 また、別の言語またはプリプロセッサでアセットを記述し、ブラウザが理解できる CSS および Javascript にコンパイルすることもできます。

作成時の Ruby on Rails アプリケーションには、application.js と application.css の 2 つのマニフェスト ファイルが与えられます。 これら 2 つのファイルには、デフォルトで、必須と見なされる意味のあるコードが数行含まれています。 これらのファイルの内容を見て、それらが何のためにあるのかを考えてみましょう。

マニフェスト ファイル

/*
* これは application.css にコンパイルされるマニフェスト ファイルで、すべてのファイルが含まれます。
* 以下に記載されています。
*
* このディレクトリ内のすべての CSS および SCSS ファイル、lib/assets/stylesheets、vendor/assets/stylesheets、
* またはプラグインのベンダー/アセット/スタイルシートがある場合は、相対パスを使用してここで参照できます。
*
* アプリケーション全体のスタイルをこのファイルに自由に追加でき、それらはファイルの上部に表示されます。
* コンパイルされたファイルですが、一般的にはスタイル スコープごとに新しいファイルを作成する方が適切です。
*= require_self
*= require_tree .
*/

これはデフォルトの CSS マニフェスト ファイルで、前述のすべてのファイルが 1 つの application.css ファイルに含まれています。 ここでの require キーワードは、ruby の require キーワードと同じように機能します。 呼び出し元のファイル内でファイルにアクセスできるようにします。 require キーワードは、最初に app/assets/ フォルダーで言及されたファイルを探します。そこで見つからない場合は、 vendor/assets/ フォルダーを探します。

「require_self」と「require_tree」。

「require_self」は、そのファイルが呼び出された場所のすべてのコンテンツをロードします。この場合は、application.css が言及されている行にロードされます。 「require_tree .」 言及されている行に参照されている同じフォルダー内のすべてのコンテンツをロードします。 サブフォルダーのすべてのファイルを含める必要がある場合は、「require_tree ./folder_name/」を使用します。 これは、プレーンな CSS を使用する場合に役立ちます。 しかし、SASS/SCSS を使用したい場合、色などにグローバル変数を使用したい場合は、`require` ではなく SCSS メソッド `@import` を使用して CSS ファイルをインポートする必要があります。

アセット パス

app/assets フォルダーと vendor/assets フォルダーに大きな違いはありません。 慣例により、作成するカスタム CSS および Javascript ファイルには app/assets フォルダーを使用し、サードパーティ プラグインの CSS および Javascript にはユーザー vendor/assets フォルダーを使用することをお勧めします。

アセットが検索される順序は次のとおりです。

/アプリ/資産/画像

/app/assets/javascripts

/アプリ/アセット/スタイルシート

/ベンダー/資産/画像

/assets/javascripts

/assets/スタイルシート

/[ジェムに含まれるアセット]

アセットのプリコンパイル

すべてのファイルをコンパイルして縮小するには、rake assets:precompile を実行する必要があります。 このコマンドは、application.css に記載されているファイルを見つける rake タスクを開始します。SCSS/SASS で記述されている場合は、CSS にコンパイルされ、application.css ファイルの一部として追加されます。 この application.css ファイルは、Rails ビュー ヘルパーである stylesheet link タグを使用して各ページにリンクされています。 application.js でも同じことが起こります。

デフォルトでは、application.css と application.js のみがマニフェスト ファイルであるため、プリコンパイルされます。 しかし、1 つ以上のファイルをさまざまなレイアウトのマニフェスト ファイルとして使用したい場合があります。 その場合、これらのファイルを config/initializers/asset.rb のプリコンパイル配列に追加する必要があります。

Rails.application.config.assets.precompile += ['dashboard.js', 'dashboard.css']

ここでは、application.css および application.js ファイルとともに、dashboard.css および dashboard.js ファイルがマニフェストと見なされます。 したがって、プリコンパイル中に、これらのファイルもプリコンパイルされます。 プリコンパイル後、これらの新しく生成されたファイルは public/assets フォルダーに配置されます。

アプリケーション-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css

アプリケーション-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js

アプリケーション-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css.gz

アプリケーション-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js.gz

ダッシュボード-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

ダッシュボード-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

public/assets フォルダー

これは、Rails アプリケーションでアセットを見つけることができる 3 番目のフォルダーですが、静的アセットであり、まったく変更されない限り、ここにアセットを直接追加することはお勧めしません。 また、rails url ヘルパーを使用して、このフォルダーの下に配置されたファイルを参照することもできません。 通常、アセットは本番環境でのみプリコンパイルされます。 アセットをローカルでプリコンパイルしたい場合は、rake assets:precompile RAILS_ENV=production in local を実行します。

ダッシュボード-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

ダッシュボード-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

上記のファイル名を見ると、ランダムな 64 文字が付加されています。 このプロセスはフィンガープリンティングと呼ばれ、ファイル名全体がファイルの内容に依存するようになります。 この手法は、アセットのキャッシュに非常に役立ちます。 ファイルの内容が同じままであれば、ファイルの名前も同じままなので、キャッシュすることができます。 コンテンツが変更されると、名前が変更され、キャッシュも変更されます。

Sass アセット URL ヘルパー

app/assets フォルダーにいくつかのフォント、画像を配置し、CSS、SCSS ファイルからそれらにアクセスしようとすると、開発時に問題なく動作します。 しかし、ほとんどの場合、リソースが見つからない /assets/bg-image.jpg と言って本番環境で中断します。 これは、特に含まれているフォント パッケージで発生します。 これは、background-image にこのようなものを指定したためです。

背景画像: url('/images/header_background.jpg');

本番環境では、/images/header_background.jpg から画像を取得しようとします。 ただし、パブリック ディレクトリにファイルを配置しない限り、「header_background.jpg」という名前のパブリック フォルダーにはファイルが存在しません。 通常は app/assets または vendor/assets に配置します。 したがって、プリコンパイル中にコンパイルされ、すべての no js/CSS アセットにフィンガープリントが追加されます。 したがって、すべての画像ファイル、フォント ファイルの名前にフィンガープリントが含まれ、これは機能しません。

会社のロゴ-ad045423017cb12f23b6c2ccb746518586f0cb77080d7cb38b1800af6a4bpng

上記のように、ファイルがコンパイルされ、public フォルダーに追加されます。 CSS でこれを参照するには、Rails が提供するアセット パス ヘルパーを使用する必要があります。 「url('/images/header_backgroung.png')」の代わりに「image-url('header_background.png')」を使用します。 プリコンパイル後、これは次のように追加されます。

背景画像: url('/images/header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png');

この投稿が、Rails アセット パイプラインについて理解するのに役立つことを願っています。 アセット パイプラインについて理解を深めることで、フロントエンド関連のコードをより整理して保守しやすくすることができます。 アセット パイプラインについてさらに詳しく知りたい場合は、こちらの公式ガイドへのリンクをご覧ください。

感情分析に適したデータがあるかどうかを確認するには、次の記事にご期待ください。

Web からデータを取得する予定はありますか? 私たちは助けるためにここにいます。 お客様の要件をお知らせください。