Rails 엔진에서 Sprockets와 Propshaft를 모두 지원하는 방법

Sprockets와 Propshaft 지원 전략

Rails 엔진에서 Sprockets와 Propshaft를 동시에 지원하기 위한 핵심은 engine.rb 파일 내에서 각 시스템에 맞는 자산 구성 설정을 하는 것입니다.

1. 자산 번들링 및 준비

• 번들링 도구 사용: 튜토리얼에서는 cssbundling-rails와 jsbundling-rails Gem을 사용하여 자산을 번들링합니다.
• 빌드 디렉토리: yarn build 및 yarn build:css 실행 후 컴파일된 CSS 및 JS 파일은 app/assets/builds 디렉토리에 저장됩니다. 이 디렉토리에 있는 모든 파일은 Rails 자산 파이프라인에 자동으로 노출됩니다.
• 개발자 경험(DX) 고려: application.css, application.js, 이미지, 폰트, SVG 등은 builds 디렉토리 외부에 두어 개발 편의성을 높입니다.

2. Rails 앱에 자산 노출 (Engine에서)

2.1. CSS 및 JS 파일 노출

• app/assets/builds 디렉토리의 번들링된 CSS 및 JS 파일은 Sprockets와 Propshaft 모두에 자동으로 노출됩니다.

2.2. 이미지 및 SVG 파일 노출

• engine.rb 파일 내 initializer 콜백을 사용하여 이미지 및 SVG 디렉토리를 등록합니다.
• 코드 예시: ruby module Confsmith class Engine < ::Rails::Engine initializer "confsmith.assets" do |app| if app.config.respond_to?(:assets) app.config.assets.paths << Engine.root.join("app", "assets", "images").to_s app.config.assets.paths << Engine.root.join("app", "assets", "svgs").to_s end end end end
• image_tag 'confsmith/logo.png'와 같이 사용 시, app/assets/images/confsmith 경로의 이미지가 양쪽 파이프라인에서 모두 작동합니다.

2.3. CSS 내 자산(URL) 노출

• Propshaft: app.config.assets.paths 설정을 통해 url('confsmith/logo.png')와 같은 CSS URL을 자동으로 찾아 처리합니다. 엔진 이름 접두사 사용을 권장합니다.
• Sprockets: 명시적인 설정이 필요합니다.
  • app.config.assets.precompile 배열 사용:
    • 개별 파일 추가: app.config.assets.precompile += %w[ confsmith/logo.png ]
    • 프로그래밍 방식: 특정 디렉토리 내 모든 파일을 상대 경로로 precompile 배열에 추가하는 스크립트 활용.
    • 주의: Sprockets는 confsmith/logo.png와 같은 상대 경로를 요구합니다.
  • manifest.js 파일 사용:
    • app/assets/config 디렉토리에 confsmith_manifest.js 파일을 생성하고 //= link_tree ../builds, //= link_tree ../images, //= link_tree ../svgs와 같이 디렉토리를 링크합니다.
    • engine.rb에서 app.config.assets.precompile += %w[confsmith_manifest.js]를 통해 manifest.js 파일을 Sprockets가 사전 컴파일하도록 지시합니다.

3. 모범 사례 및 권장 사항

• 엔진 이름으로 디렉토리 네임스페이스 지정: app/assets/builds/ENGINE_NAME, app/assets/images/ENGINE_NAME, app/assets/svgs/ENGINE_NAME와 같이 엔진 이름을 접두사로 사용하여 파일 충돌을 방지하고 명확성을 높입니다.