【Rails】asset_syncでWebpackerのビルドファイルをS3に同期する手順

Ruby

こんにちは。Enjoy IT Life管理人の仁科(@nishina555)です。

前回、【Rails】asset_syncを利用してCloudFront + S3からアセットファイルを配信するasset_syncの利用方法について紹介しました。

【Rails】asset_syncを利用してCloudFront + S3からアセットファイルを配信する

2020年7月13日

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:compileassets: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)のフォローもよろしくお願いします!

Rubyのオススメ参考書