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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Q&A

解決済

2回答

3737閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

0グッド

0クリップ

投稿2018/08/16 17:53

こんにちは、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; } }

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

<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/に保存するようにします。

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

投稿2018/08/19 05:12

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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 01:12

編集2018/08/17 04:51
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/08/17 03:40 編集

ご回答ありがとうございます。 config.force_ssl = trueを外しました。 しかし、ソースコードから直接、画像にアクセスすると404エラーになります。 また、コンパイル後の画像に以下のようにすると画像は表示されます。 「http://http://www.xxx.com/assets/画像名-2ef7cb2170d5d05d783d3e1652d7798619ac22a3b0e020223aad2b64b0645ba6.jpg」 jQueryは全く動きません.... 私の仮説としましては、 上記のような形で画像にアクセスはできるため、画像に関してはHTMLやCSSの書き方が悪いのだと思います。 しかし、jQueryが動かない理由が全く分かりません。 ちなみにStaging環境はHerokuで構築しましたが、Herokuだと画像も正常に表示され、jQueryも問題なく動いております。 知識が少なく、大変申し訳ございませんが、アドバイスなどよろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2018/08/17 04:08

jQueryはCDN読み込みですか? それともnpmで入れたりしましたか?
退会済みユーザー

退会済みユーザー

2018/08/17 04:10

あと↓はどうでしたか? デベロッパーツールのConsoleで画像・JSの読み込みエラーが出ていないか?
退会済みユーザー

退会済みユーザー

2018/08/17 04:45

ご回答ありがとうございます! デベロッパーツールのConsoleで画像・JSの読み込みエラーが出ていないか? →出ております。 jQueryはCDN読み込みですか?それともnpmで入れたりしましたか? →すみません...こちらの件に関しましてはRailsのGemfileに記載しているのみです。bundle installは行いましたが、それ以外は何も行っておりません。 AWSのEC2上でjQueryを動かすには何をすれば良いのでしょうか? よろしくお願い致します。
退会済みユーザー

退会済みユーザー

2018/08/17 04:49

> →出ております。 エラー内容を質問本文に追記して下さい。
退会済みユーザー

退会済みユーザー

2018/08/17 04:51

> AWSのEC2上でjQueryを動かすには何をすれば良いのでしょうか? 追記しました。
退会済みユーザー

退会済みユーザー

2018/08/17 04:52

> すみません...こちらの件に関しましてはRailsのGemfileに記載しているのみです。bundle installは行いましたが、それ以外は何も行っておりません。 本来はこれで充分のはずですが、詳細不明のため急場しのぎの方法を紹介しています。
退会済みユーザー

退会済みユーザー

2018/08/17 05:01

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

退会済みユーザー

2018/08/17 05:08

お願いします。
退会済みユーザー

退会済みユーザー

2018/08/19 05:20

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問