AWSの本番環境でアセットファイルのコンパイルエラー

Question

前提・実現したいこと

AWSの本番環境でアセットファイルのコンパイルを実行したい

発生している問題・エラーメッセージ

ターミナル　エラーメッセージ

[ec2-user@ip-172-31-42-166 picsta]$ bundle exec rails assets:precompile RAILS_ENV=production
yarn install v1.22.4
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.06s.
rails aborted!
Uglifier::Error: Unexpected token: name (html). To use ES6 syntax, harmony mode must be enabled with Uglifier.new(:harmony => true).
--
 19354 (function() {
 19355   this.App || (this.App = {});
 19356 
 19357   App.cable = ActionCable.createConsumer();
 19358 
 19359 }).call(this);
 19360 $(function(){
 19361   function buildHTML(comment){
    =>     let html =
 19363       `<div class="PostInfo__yourComments-wrapper">
 19364         <a href="/users/${comment.user_id}"><img src="${comment.image}" class="PostInfo__yourComments--image UserInfoShow-image"></a>
 19365         <a class="PostInfo__yourComments--name UserInfoShow-name", href="/users/${comment.user_id}">${comment.user_name}</a>
 19366         <div class="PostInfo__yourComments--contents">
 19367           ${comment.content}
 19368         </div>
 19369       </div>`
 19370     return html
==
/var/www/picsta/bin/rails:9:in `<top (required)>'
/var/www/picsta/bin/spring:15:in `require'
/var/www/picsta/bin/spring:15:in `<top (required)>'
bin/rails:3:in `load'
bin/rails:3:in `<main>'
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)

[ec2-user@ip-172-31-42-166 picsta]$ tail -f log/production.log
F, [2020-07-20T05:53:00.127073 #32450] FATAL -- : [54eadd09-9f36-4207-8e87-cae6d91be591] ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.):
F, [2020-07-20T05:53:00.127195 #32450] FATAL -- : [54eadd09-9f36-4207-8e87-cae6d91be591]      5:     %title Picsta
[54eadd09-9f36-4207-8e87-cae6d91be591]      6:     = csrf_meta_tags
[54eadd09-9f36-4207-8e87-cae6d91be591]      7:     = csp_meta_tag
[54eadd09-9f36-4207-8e87-cae6d91be591]      8:     = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
[54eadd09-9f36-4207-8e87-cae6d91be591]      9:     = javascript_include_tag 'application'
[54eadd09-9f36-4207-8e87-cae6d91be591]     10:   %body
[54eadd09-9f36-4207-8e87-cae6d91be591]     11:     = render 'layouts/notifications'
F, [2020-07-20T05:53:00.127229 #32450] FATAL -- : [54eadd09-9f36-4207-8e87-cae6d91be591]   
F, [2020-07-20T05:53:00.127253 #32450] FATAL -- : [54eadd09-9f36-4207-8e87-cae6d91be591] app/views/layouts/application.html.haml:8:in `_app_views_layouts_application_html_haml___269755376428411494_39720900'

該当のソースコード

上記のエラーが出ているJSファイルの箇所の部分↓
※ローカル環境ではエラーは出ていません。

$(function(){
  function buildHTML(comment){
    let html =
      `<div class="PostInfo__yourComments-wrapper">
        <a href="/users/${comment.user_id}"><img src="${comment.image}" class="PostInfo__yourComments--image UserInfoShow-image"></a>
        <a class="PostInfo__yourComments--name UserInfoShow-name", href="/users/${comment.user_id}">${comment.user_name}</a>
        <div class="PostInfo__yourComments--contents">
          ${comment.content}
        </div>
      </div>`
    return html
  }
  $('.Form').on('submit', function(e){
    e.preventDefault()
    let formData = new FormData(this);
    let url = $(this).attr('action');

    $.ajax({
      url: url,
      type: "POST",
      dataType: 'json',
      data: formData,
      processData: false,
      contentType: false
    })
    .done(function(data) {
      let html = buildHTML(data);
      $('.PostInfo__yourComments').append(html);
      $('.PostInfo__contents--area').val('');
      $('.PostInfo__yourComments').animate({ scrollTop: $('.PostInfo__yourComments')[0].scrollHeight});
      $('.PostInfo__contents--btn').prop("disabled", false);
    })
    .fail(function() {
      console.log("error");
    })
  });
});

Rails.application.configure do
  # Settings specified here will take precedence over those in config/application.rb.

  # Code is not reloaded between requests.
  config.cache_classes = true

  # Eager load code on boot. This eager loads most of Rails and
  # your application in memory, allowing both threaded web servers
  # and those relying on copy on write to perform better.
  # Rake tasks automatically ignore this option for performance.
  config.eager_load = true

  # Full error reports are disabled and caching is turned on.
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true

  # Ensures that a master key has been made available in either ENV["RAILS_MASTER_KEY"]
  # or in config/master.key. This key is used to decrypt credentials (and other encrypted files).
  # config.require_master_key = true

  # Disable serving static files from the `/public` folder by default since
  # Apache or NGINX already handles this.
  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = Uglifier.new(harmony: true)
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = true

  # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb

  # Enable serving of images, stylesheets, and JavaScripts from an asset server.
  # config.action_controller.asset_host = 'http://assets.example.com'

  # Specifies the header that your server uses for sending files.
  # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
  # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX

  # Store uploaded files on the local file system (see config/storage.yml for options)
  config.active_storage.service = :local

  # Mount Action Cable outside main process or domain
  # config.action_cable.mount_path = nil
  # config.action_cable.url = 'wss://example.com/cable'
  # config.action_cable.allowed_request_origins = [ 'http://example.com', /http://example.*/ ]

  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
  # config.force_ssl = true

  # Use the lowest log level to ensure availability of diagnostic information
  # when problems arise.
  config.log_level = :debug

  # Prepend all log lines with the following tags.
  config.log_tags = [ :request_id ]

  # Use a different cache store in production.
  # config.cache_store = :mem_cache_store

  # Use a real queuing backend for Active Job (and separate queues per environment)
  # config.active_job.queue_adapter     = :resque
  # config.active_job.queue_name_prefix = "picsta_#{Rails.env}"

  config.action_mailer.perform_caching = false

  # Ignore bad email addresses and do not raise email delivery errors.
  # Set this to true and configure the email server for immediate delivery to raise delivery errors.
  # config.action_mailer.raise_delivery_errors = false

  # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
  # the I18n.default_locale when a translation cannot be found).
  config.i18n.fallbacks = true

  # Send deprecation notices to registered listeners.
  config.active_support.deprecation = :notify

  # Use default logging formatter so that PID and timestamp are not suppressed.
  config.log_formatter = ::Logger::Formatter.new

  # Use a different logger for distributed setups.
  # require 'syslog/logger'
  # config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name')

  if ENV["RAILS_LOG_TO_STDOUT"].present?
    logger           = ActiveSupport::Logger.new(STDOUT)
    logger.formatter = config.log_formatter
    config.logger    = ActiveSupport::TaggedLogging.new(logger)
  end

  # Do not dump schema after migrations.
  config.active_record.dump_schema_after_migration = false
end

試したこと

config/environments/production.rb を以下に変更

-　config.assets.js_compressor = :uglifier

+　config.assets.js_compressor = Uglifier.new(harmony: true)

- config.assets.compile = false

+ config.assets.compile = true

Comments

[web_inago]

production.rbを全文見せていただけますか？

[mako19]

@web_inago様
ご返答ありがとうございます。
こちらがproduction.rb全文です。
```
Rails.application.configure do
# Settings specified here will take precedence over those in config/application.rb.

# Code is not reloaded between requests.
config.cache_classes = true

# Eager load code on boot. This eager loads most of Rails and
# your application in memory, allowing both threaded web servers
# and those relying on copy on write to perform better.
# Rake tasks automatically ignore this option for performance.
config.eager_load = true

# Full error reports are disabled and caching is turned on.
config.consider_all_requests_local = false
config.action_controller.perform_caching = true

# Ensures that a master key has been made available in either ENV["RAILS_MASTER_KEY"]
# or in config/master.key. This key is used to decrypt credentials (and other encrypted files).
# config.require_master_key = true

# Disable serving static files from the `/public` folder by default since
# Apache or NGINX already handles this.
config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

# Compress JavaScripts and CSS.
config.assets.js_compressor = Uglifier.new(harmony: true)
# config.assets.css_compressor = :sass

# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = true

# `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb

# Enable serving of images, stylesheets, and JavaScripts from an asset server.
# config.action_controller.asset_host = 'http://assets.example.com'

# Specifies the header that your server uses for sending files.
# config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
# config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX

# Store uploaded files on the local file system (see config/storage.yml for options)
config.active_storage.service = :local

# Mount Action Cable outside main process or domain
# config.action_cable.mount_path = nil
# config.action_cable.url = 'wss://example.com/cable'
# config.action_cable.allowed_request_origins = [ 'http://example.com', /http:\/\/example.*/ ]

# Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
# config.force_ssl = true

# Use the lowest log level to ensure availability of diagnostic information
# when problems arise.
config.log_level = :debug

# Prepend all log lines with the following tags.
config.log_tags = [ :request_id ]

# Use a different cache store in production.
# config.cache_store = :mem_cache_store

# Use a real queuing backend for Active Job (and separate queues per environment)
# config.active_job.queue_adapter = :resque
# config.active_job.queue_name_prefix = "picsta_#{Rails.env}"

config.action_mailer.perform_caching = false

# Ignore bad email addresses and do not raise email delivery errors.
# Set this to true and configure the email server for immediate delivery to raise delivery errors.
# config.action_mailer.raise_delivery_errors = false

# Enable locale fallbacks for I18n (makes lookups for any locale fall back to
# the I18n.default_locale when a translation cannot be found).
config.i18n.fallbacks = true

# Send deprecation notices to registered listeners.
config.active_support.deprecation = :notify

# Use default logging formatter so that PID and timestamp are not suppressed.
config.log_formatter = ::Logger::Formatter.new

# Use a different logger for distributed setups.
# require 'syslog/logger'
# config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name')

if ENV["RAILS_LOG_TO_STDOUT"].present?
logger = ActiveSupport::Logger.new(STDOUT)
logger.formatter = config.log_formatter
config.logger = ActiveSupport::TaggedLogging.new(logger)
end

# Do not dump schema after migrations.
config.active_record.dump_schema_after_migration = false
end

```

[mako19]

@web_inago様
コメントではマークダウンが適用されないため、
質問内容にファイルを追加しました。

[web_inago]

config.assets.js_compressor = Uglifier.new(harmony: true)
と記述した後も、プリコンパイル後に
Uglifier::Error: Unexpected token: name (html). To use ES6 syntax, harmony mode must be enabled with Uglifier.new(:harmony => true).
のログは表示されますか？

[web_inago]

追加で申し訳ありません、本番サーバーのpublic/assets/に移動して、lsコマンドを実行した結果も知りたいです

[mako19]

@web_inago
はい！
こちらが本番環境での結果です！

default-1b461c4e8bc2260b2e69d1f58f71ff6d9417e556d8ad6dd275b60671a67e9695.jpg imageSample-92bac333f3a5662847ecf827ef4abf0c0ce94cd67c38d1f1b070f289bdeec4b3.jpg
font-awesome user-image-ca05756d62695fec3a21528e00ebcc3f053c7255dc35a8d7e3ae1402fb9ff59d.jpg

[mako19]

記述後にプリコンパイルしても、同じ
Uglifier::Error: Unexpected token: name (html). To use ES6 syntax, harmony mode must be enabled with Uglifier.new(:harmony => true).
が表示されています。。

[web_inago]

うーん、
確認なのですが、本番サーバー側にproduction.rbの
config.assets.js_compressor = Uglifier.new(harmony: true)
は反映されていますか？

[mako19]

本番環境にクローンしてあるのでローカルを変更したらコミット＆プッシュしたら本番環境に反映されてるはずなんですが、それを確認する方法がわかっていない状態です、、、

[web_inago]

CD環境があるということですか？
ないのであれば多分反映されていないと思います。
確認方法としては、
production.rbのあるディレクトリまでlsとcdを使って到達して(linuxに疎くて原始的な方法しかわからずすみません)
sudo vi production.rbを実行すればvim上でファイルの中身が見れると思います。

[mako19]

すいません。今確認したところ、反映されてませんでした。。
ローカルを反映されるには、もう一度クローンし直さなくてはいけないでしょうか。。。？

[web_inago]

git pull というコマンドがあるのでそれでできると思います！

[mako19]

無事にできました！！助かりました！
丁寧に教えてくださりありがとうございました！！

Answer 1

config.assets.js_compressor = Uglifier.new(harmony: true)
が本番サーバー側で反映されていないのでサーバー側のリポジトリを更新して、
再度プリコンパイルを実行してみてください

その後、

ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.):

が発生する場合は、
同じくproduction.rbの

config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

を

config.public_file_server.enabled = true

に変更する、もしくはpresent?がtrueになるようにサーバー側で環境変数を設定してください。
こちらも変更後にサーバー側のリポジトリを最新にする必要があります。

Comments

[mako19]

無事にできました！！助かりました！
丁寧に教えてくださりありがとうございました！！