こんにちは。Enjoy IT Life管理人の仁科(@nishina555)です。
前回、【Rails】asset_syncを利用してCloudFront + S3からアセットファイルを配信するでasset_syncの利用方法について紹介しました。
asset_syncを導入するとassets:precompile
実行後にアセットファイルの同期処理が走ります。
その結果、プロジェクトに存在するアセットファイルが外部リソースに配置されます。
しかし、『assets:precompile』後に行われる同期対象のファイルはSprocketsのビルド出力先(public/assets/)のみで、Webpackerのビルド出力先(public/packs/)は対象外です。
Rails 6からWebpackerは標準のアセットツールとしてデフォルトでインストールされるようになったので、asset_syncを利用する際はWebpackerにも対応しておくほうが好ましいです。
そこで今回はasset_syncでWebpackerのビルドファイルも外部リソースへ配置する方法を紹介します。
なお、今回の検証で利用するgemのバージョンはrails 6.0.3.2、asset_sync 2.12.1、webpacker 4.2.2となっています。
asset_syncの設定ファイルを変更する
asset_sync『Webpacker (> 2.0) support』の手順に従い、設定を編集します。
Webpackerのビルド出力先のディレクトリもファイル同期対象に含めるようイニシャライザを編集します。
config/initializers/asset_sync.rb
AssetSync.configure do |config|
config.fog_provider = 'AWS'
config.aws_access_key_id = 'xxx' # IAMユーザのアクセスキー
config.aws_secret_access_key = 'xxx' # IAMユーザのシークレットキー
config.aws_session_token = ENV['AWS_SESSION_TOKEN'] if ENV.key?('AWS_SESSION_TOKEN')
config.fog_directory = 'rails-app-production-assets' # S3バケット名
config.fog_region = 'ap-northeast-1' # S3バケットのリージョン
+ config.run_on_precompile = false
+ config.add_local_file_paths do
+ public_root = Rails.root.join("public")
+ Dir.chdir(public_root) do
+ packs_dir = Webpacker.config.public_output_path.relative_path_from(public_root)
+ Dir[File.join(packs_dir, '/**/**')]
+ end
+ end
end
Webpackerのビルドコマンドwebpacker:compile
はassets:precompile
をトリガに起動します。しかしファイルの同期処理はwebpacker:compile
が実行される前に行われます。
そこでWebpackerによるビルドが完了した後にアセットファイルの同期処理が実行されるようにするため、rakeファイルを新規作成します。
lib/tasks/asset_sync.rake
if defined?(AssetSync)
Rake::Task['webpacker:compile'].enhance do
Rake::Task["assets:sync"].invoke
end
end
設定完了後、assets:precompile
を再度実行するとS3にpacks
ディレクトリも同期されていることがわかります。
$ bundle exec rails assets:precompile RAILS_ENV=production
まとめ
以上でasset_syncのWebpacker対応手順の紹介を終わります。
この記事がいいなと思いましたらTwitter(@nishina555)のフォローもよろしくお願いします!