Rails 자산 파이프라인 이해하기

Ruby on Rails는 Ruby로 작성된 전체 스택 웹 개발 프레임워크입니다. Ruby on 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와 함께 제공됩니다. 기본적으로 이 두 파일에는 필수로 간주되는 몇 줄의 의미 있는 코드가 포함되어 있습니다. 해당 파일의 내용을 살펴보고 파일의 용도를 알아보겠습니다.

매니페스트 파일

/*
* 이것은 모든 파일을 포함하는 application.css로 컴파일될 매니페스트 파일입니다.
* 아래에 나열되어 있습니다.
*
* 이 디렉토리 내의 모든 CSS 및 SCSS 파일, lib/assets/stylesheets, vendor/assets/stylesheets,
* 또는 플러그인의 공급업체/자산/스타일시트가 있는 경우 상대 경로를 사용하여 여기에서 참조할 수 있습니다.
*
* 이 파일에 응용 프로그램 전체 스타일을 자유롭게 추가할 수 있으며 해당 스타일은
* 컴파일된 파일이지만 일반적으로 스타일 범위별로 새 파일을 만드는 것이 좋습니다.
*= require_self
*= require_tree .
*/

이것은 언급된 모든 파일을 단일 application.css 파일에 포함하는 기본 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`가 아닌 `@import` 메소드를 사용하여 CSS 파일을 가져와야 합니다.

자산 경로

앱/자산과 공급업체/자산 폴더 간에는 큰 차이가 없습니다. 관례상 우리가 생성한 사용자 정의 CSS 및 Javascript 파일에는 app/assets 폴더를 사용하고 타사 플러그인의 CSS 및 Javascript에는 사용자 공급업체/자산 폴더를 사용하는 것이 좋습니다.

자산을 검색하는 순서는 다음과 같습니다.

/앱/자산/이미지

/앱/자산/자바스크립트

/앱/자산/스타일시트

/공급업체/자산/이미지

/자산/자바스크립트

/assets/스타일시트

/[젬에 포함된 자산]

자산 사전 컴파일

모든 파일을 컴파일하고 축소하려면 rake assets:precompile을 실행해야 합니다. 이 명령은 application.css에 언급된 파일을 찾는 rake 작업을 시작합니다. SCSS/SASS로 작성된 경우 CSS로 컴파일된 다음 application.css 파일의 일부로 추가됩니다. 이 application.css 파일은 rails view helper인 stylesheet link 태그를 사용하여 각 페이지에 링크되어 있습니다. application.js에서도 마찬가지입니다.

기본적으로 application.css 및 application.js만 매니페스트 파일이므로 미리 컴파일됩니다. 그러나 하나 이상의 파일을 다른 레이아웃에 대한 매니페스트 파일로 사용하고 싶을 수 있습니다. 이 경우 이러한 파일은 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

application-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js

응용 프로그램-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css.gz

application-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js.gz

대시보드-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

대시보드-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

공개/자산 폴더

이것은 Rails 애플리케이션에서 자산을 찾을 수 있는 세 번째 폴더이지만 여기에 자산을 직접 추가하는 것은 정적 자산이고 전혀 변경되지 않는 한 권장되지 않습니다. 또한 레일스 URL 도우미를 사용하여 이 폴더 아래에 있는 파일을 참조할 수 없습니다. 자산은 일반적으로 프로덕션 환경에서만 미리 컴파일됩니다. 로컬에서 자산을 사전 컴파일하려면 로컬에서 rake assets:precompile RAILS_ENV=production을 실행하십시오.

대시보드-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

대시보드-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

위의 파일명을 보면 64개의 임의의 문자가 붙어있습니다. 이 프로세스를 지문이라고 하며 전체 파일 이름이 파일 내용에 따라 달라집니다. 이 기술은 자산을 캐싱하는 데 정말 유용합니다. 파일 내용이 동일하게 유지되면 파일 이름도 동일하게 유지되므로 캐시될 수 있습니다. 내용이 변경되면 이름도 변경되고 캐시도 변경됩니다.

Sass 자산 URL 도우미

앱/자산 폴더에 글꼴, 이미지를 넣은 다음 CSS, SCSS 파일에서 액세스하려고 할 때마다 개발에서 제대로 작동합니다. 그러나 대부분의 경우 리소스를 찾을 수 없다고 말하는 프로덕션 중단 /assets/bg-image.jpg입니다. 이것은 특히 우리가 포함하는 글꼴 패키지에서 발생합니다. 이것은 background-image에 대해 이와 같은 것을 제공했을 것이기 때문입니다.

배경 이미지: url('/images/header_background.jpg');

프로덕션에서는 /images/header_background.jpg에서 이미지를 가져오려고 합니다. 그러나 파일을 공개 디렉토리에 배치하지 않는 한 'header_background.jpg'라는 공용 폴더에 파일이 존재하지 않습니다. 일반적으로 앱/자산 또는 공급업체/자산에 배치합니다. 따라서 사전 컴파일 중에 컴파일되고 js/CSS가 없는 모든 자산에 지문이 추가됩니다. 따라서 모든 이미지 파일, 글꼴 파일에는 이름에 지문이 포함되어 작동하지 않습니다.

header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png company_logo-ad045423017cb12f23b6c2858460

파일은 위와 같이 공용 폴더에 컴파일 및 추가됩니다. 따라서 CSS에서 이를 참조하려면 레일에서 제공하는 자산 경로 도우미를 사용해야 합니다. 'url('/images/header_backgroung.png')' 대신 'image-url('header_background.png')'을 사용하세요. 사전 컴파일 후 다음과 같이 추가됩니다.

배경 이미지: url('/images/header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png');

이 게시물이 Rails 자산 파이프라인을 이해하는 데 도움이 되었기를 바랍니다. 자산 파이프라인에 대한 더 나은 이해는 프런트 엔드 관련 코드를 보다 체계적이고 유지 관리하기 쉽게 유지하는 데 도움이 됩니다. 자산 파이프라인에 대해 더 자세히 알아보려면 공식 가이드 링크를 참조하세요.

감정 분석에 적합한 데이터가 있는지 알아보려면 다음 기사를 계속 지켜봐 주세요.

웹에서 데이터를 수집할 계획입니까? 도와드리겠습니다. 귀하의 요구 사항에 대해 알려주십시오 .