質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

AWSのEC2でRailsアプリをデプロイするとjQueryが動かない問題

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,858
退会済みユーザー

退会済みユーザー

こんにちは、Railsを独学で勉強している者です。
自作のRailsアプリをAWSのEC2を利用して本番環境にデプロイいたしました。
そこで1つ質問があります。

AWS上で以下のコマンドでプリコンパイルするとCSSは全て正常に表示されるのですが、
app/assets/imagesの中に保存した画像が表示されず、jQueryが全く動きません...(ちなみにローカルの開発環境では、app/assets/imagesの中に保存した画像も表示され、jQueryも正常に動きます。)

bundle exec rake assets:clobber RAILS_ENV=production
bundle exec rake assets:precompile RAILS_ENV=production

nginxやunicornは正常に動いており、サイトは利用できます。

ファイルの中は以下の通りです。

config/environments/production.rb
Rails.application.configure do

  config.cache_classes = true

  config.eager_load = true

  config.force_ssl = 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.css_compressor = :sass

  config.assets.compile = true

  config.assets.digest = true

  host = 'xxx.com'

  config.action_mailer.default_url_options = { host: host }

  config.action_mailer.raise_delivery_errors = true

  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
end
config/initializers/assets.rb

Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( admin_backend.css user_frontend.css admin_backend.js user_frontend.js )
nginxの設定ファイル
upstream unicorn_server {
    server unix:/var/www/projects/christchurches-map/tmp/sockets/.unicorn.sock
    fail_timeout=0;
}

server {
    listen 80;
    client_max_body_size 4G;
    server_name IPアドレス;

    keepalive_timeout 5;

    # Location of our static files
    root /var/www/projects/アプリ名/public;

    location ~ ^/assets/ {
        root /var/www/projects/アプリ名/public;
    }

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;

        if (!-f $request_filename) {
            proxy_pass http://unicorn_server;
            break;
        }
    }

    error_page 500 502 503 504 /500.html;
    location = /500.html {
        root /var/www/projects/christchurches-map/public;
    }
}

是非、アドバイスなどをよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

config.force_ssl = true しているようですが、
assets配下を見る設定がhttps指定になってないのではないかと予測します。

ブラウザはChromeと仮定しますが、

  • force_ssl を外して http://~~ でアクセスすると正常に表示されるか?
  • デベロッパーツールのElementsで画像・JSの読み込みが https://~~ になっていないのではないか?
  • デベロッパーツールのConsoleで画像・JSの読み込みエラーが出ていないか?

を確認してみて下さい。

 追記

AWSのEC2上でjQueryを動かすには何をすれば良いのでしょうか?

ベストな解決策ではないですが、HTMLの<HEAD>タグ内に

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>


を追記すればとりあえずjQueryは動作するのではないかと思います。
↑はjQuery2系の場合の例です。
GemfileでjQueryのバージョンを確認して合わせるようにして下さい。

https://code.jquery.com/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/17 14:01

    ご回答ありがとうございます!
    試してみます!
    上手くいかなければまた記載させて頂きます!

    キャンセル

  • 2018/08/17 14:08

    お願いします。

    キャンセル

  • 2018/08/19 14:20

    アドバイスなどありがとうございました!
    上記に解決方法を記載させて頂きました!
    知識不足で大変申し訳ございませんでした。
    本当に良い勉強になりました!

    キャンセル

+1

解決しました!
アドバイス、ありがとうございました!

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

上記のコードを実装してもjQueryは動きませんでした。しかし、純粋にjQueryのライブラリを導入していてそのライブラリが正しくプリコンパイルできていなかった点が問題でした...

jQueryのライブラリのソースコードのファイルを手動で、/public/assetsにコピーすれば上記のjQueryのスクリプトを実装しなくてもGemファイルのjQueryが動いてくれました!!!

さらに、表示されなかった画像も同じ問題でした。
色々と調べたのですが、プリコンパイルすると画像のファイルの名称が変更されるため、正しくアクセス出来ておりませんでした。

次回からは画像はapp/assets/imagesではなく/public/assets/に保存するようにします。

本当にアドバイスなどありがとうございました!!!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る