RailsアプリのJavaScriptがAWS(EC2)の本番環境にて動作しない

Question

世界一丁寧なAWS解説。EC2を利用して、RailsアプリをAWSにあげるまで - Qiita
を参考に、アプリをサーバーにアップロードしました。

ページ遷移やログイン・ログアウト機能など、大体の機能は動作することは確認できたのですが、JavaScript(jQuery)で実装した機能が動作しません。（開発環境では正しく動作しました）

なお、jQueryはgem "jquery-rails"を bundle install して導入しました。

この問題の解決方法をご教示いただけないでしょうか。

行ったこと

Chromeにおけるデベロッパーツールのconsoleで検証しても、全く反応がなく特にエラーは表示されません。
以下ログも確認したところ、当然かも知れませんが特にエラーはありませんでした。

• production.log
• unicorn.log
• nginx.error.log

Googleで
『Rails AWS JavaScript 動作しない 』
などでも検索してみましたが、どの記事も自分の状況とは当てはまらないようで問題の解決には至りませんでした。

ソースコード

production.rb

Rails.application.configure do
  config.cache_classes = true
  config.eager_load = true
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true
  config.public_file_server.enabled = true
  config.assets.js_compressor = :uglifier
  config.assets.compile = false
  config.active_storage.service = :local
  config.log_level = :debug
  config.log_tags = [ :request_id ]
  config.action_mailer.perform_caching = false
  config.i18n.fallbacks = true
  config.active_support.deprecation = :notify
  config.log_formatter = ::Logger::Formatter.new

  if ENV["RAILS_LOG_TO_STDOUT"].present?
    logger           = ActiveSupport::Logger.new(STDOUT)
    logger.formatter = config.log_formatter
    config.logger    = ActiveSupport::TaggedLogging.new(logger)
  end
  config.active_record.dump_schema_after_migration = false
  config.action_mailer.default_url_options = { host: "http://XX.XX.XX.XX" }
  config.action_mailer.raise_delivery_errors = true
  config.action_mailer.delivery_method = :smtp
  config.action_mailer.smtp_settings = {
    :address => "smtp.gmail.com",
    :port => 587,
    :user_name => ENV["GMAIL_ADDRESS"],
    :password => ENV["GMAIL_PASSWORD"],
    :authentication => :plain,
    :enable_starttls_auto => true
  }
end

application.js

//= require jquery
//= require popper
//= require bootstrap-sprockets
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

動作させたいjsファイルとビューファイル

[動作]

• フォームに検索ワードを入力し「検索する」ボタンを押すと、ぐるなびAPIを叩いて非同期で検索結果一覧が表示される。
• ラジオボタンをチェックして「登録する」を押すと、選択した店情報をRailsのコントローラへ渡す

$(document).on('turbolinks:load', function() {
  var rest =null;
  var cancelFlag = 0;
  $('#search').on("click",function(e) {
    e.preventDefault();
    const requestUrl = 'https://api.gnavi.co.jp/RestSearchAPI/v3/';
    const APIkey = $('#apikey').val();
    const name = $('#name').val();
    console.log(name);

    $.ajax({
      type:"GET",
      url:requestUrl,
      data:{
        keyid: APIkey,
        name: name
      }
    }).done(function(data) {
      if (data != null){
        if(cancelFlag == 0){
          cancelFlag = 1;
          rest = data.rest
          rest.forEach(function(e){
            $('#rest_lists').append(`<li id="rest_list"><input type="radio" name="rest_name">${e.name}</li>`)
          })
        }
      }
    }).fail(function() {
      if(cancelFlag == 0){
        cancelFlag = 1;
        $('.result').append(`<li>検索結果は0件でした</li>`);
      }
    });
  });

  $('#submit').on("click",function(e) {
    const checked_index = $("input:radio").toArray().findIndex(e => e.checked);
    $.ajax({
      type: "POST",
      url:  "/restaurants/create",
      data:{
        name: rest[checked_index].name,
        address: rest[checked_index].address,
        res_id: rest[checked_index].id,
        tell: rest[checked_index].tel
      }
    }).done(function(data) {
    }).fail(function() {
      alert('エラーが発生しました。詳細は[e-mail]へお問い合わせください。');
    });
  });
  $('#name').on("keyup",function(e) {
    $('#rest_lists').empty();
    $('.result').empty();
    cancelFlag = 0;
  });
});

<div class="result"></div>
<input type="hidden" value="<%= ENV["GURUNAVI_API_KEY"] %>" id="apikey">
<input type="text" name="namae" id="name">
<input type="submit" value="検索する" id="search">
<ul id="rest_lists">
</ul>
<button type="button" name="button" id="submit">登録する</button>

unicorn.conf.rb

$worker  = 2
$timeout = 30
$app_dir = "/var/www/rails/my_app"
$listen  = File.expand_path 'tmp/sockets/.unicorn.sock', $app_dir
$pid     = File.expand_path 'tmp/pids/unicorn.pid', $app_dir
$std_log = File.expand_path 'log/unicorn.log', $app_dir

worker_processes  $worker
working_directory $app_dir
stderr_path $std_log
stdout_path $std_log
timeout $timeout

 listen  $listen
pid $pid


preload_app true

before_fork do |server, worker|
  defined?(ActiveRecord::Base) and ActiveRecord::Base.connection.disconnect!
  old_pid = "#{server.config[:pid]}.oldbin"
  if old_pid != server.pid
    begin
      Process.kill "QUIT", File.read(old_pid).to_i
    rescue Errno::ENOENT, Errno::ESRCH
    end
  end
end

after_fork do |server, worker|
  defined?(ActiveRecord::Base) and ActiveRecord::Base.establish_connection
end

nginx confファイル

# log directory
error_log  /var/www/rails/my_app/log/nginx.error.log;
access_log /var/www/rails/my_app/log/nginx.access.log;
# max body size
client_max_body_size 2G;
upstream app_server {
  #for UNIX domain socket setups
  server unix:/var/www/rails/my_app/tmp/sockets/.unicorn.sock fail_timeout=0;
}
server {
  listen 80;
  server_name 18.177.212.209;
  # nginx so increasing this is generally safe...
  keepalive_timeout 5;
  # path for static files

  root /var/www/rails/my_app/public;
  # page cache loading
  try_files $uri/index.html $uri.html $uri @app;
  location @app {
    # HTTP headers
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://app_server;
  }
  # Rails error pages
  error_page 500 502 503 504 /500.html;
  location = /500.html {
    root /var/www/rails/my_app/public;
  }
}

必要であれば、他のコードも追記します。

#環境
Ruby:2.5.3
Rails:5.2.4
アプリケーションサーバー：unicorn v5.5.4
webサーバー：nginx/1.16.1

Answer 1

rails assets:precompile は実行しましたか？

Comments

[yoangelo]

ご回答ありがとうございます。
$ rails assets:precompile
すると、動作するようになりました！
プリコンパイルについては以前に
$ bundle exec rake assets:precompile RAILS_ENV=production
というコマンドで実行していたのですが、これでは不足していたようですね…。
ありがとうございました????‍♀️