Q&A
まず、docker-compose.ymlを貼ったほうがいいと思います。
【Rails6+Docker+AWS（EC2,RDS,VPC）+Puma+Nginx】で本番環境にデプロイしたのですが、
CSSと画像が読み込まれません。
$ docker-compose run app bundle exec rails assets:precompile RAILS_ENV=production
上記は実行しました。
また下記記事に書いてあることや、pumaの再起動など色々と試しましたが、どれも結果は変わりませんでした。
https://qiita.com/at-946/items/b7d467bf25c40fcfca44
https://qiita.com/mochizukikotaro/items/355201f90ee819bf1878
https://teratail.com/questions/231518
発生している問題・エラーメッセージ
net::ERR_ABORTED 404 (Not Found)
404 (Not Found)
試したこと
試したこと①
[ec2-user@ip-10-0-2-234 アプリ名]$ docker-compose run app bundle exec find app/assets/ -type f -exec touch {} \; [ec2-user@ip-10-0-2-234 アプリ名]$ docker-compose run app bundle exec rails assets:clobber RAILS_ENV=production をしたあとで、 [ec2-user@ip-10-0-2-234 アプリ名]$ docker-compose run app bundle exec rails assets:precompile RAILS_ENV=production の実行。
試したこと②
production.rbの設定修正
(修正前)config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
(修正後)config.public_file_server.enabled = true
試したこと③
nginx.confの設定変更
(修正前)sendfile on;
(修正後)sendfile off;
試したこと④
assets:precompile実行後、コンテナの中身を確認。
するとローカル環境で管理していた画像ファイルやCSSが、正常にpublic配下に格納されていました。
【画像ファイルの確認】
$ docker-compose exec app bash でコンテナ内を覗いてみる。
root@7bde1a234794:/var/www/アプリ名/public/packs/media/images
上記の中にちゃんと画像ファイルが格納されておりました。
【SCSSの確認】
$ docker-compose exec app bash でコンテナ内を覗いてみる。
root@7bde1a234794:/var/www/アプリ名/public/assets
上記の中にcssファイルが格納されておりました。
気になったこと
ローカル環境だとscssファイルだったのが、assets:precompile実行後にはcssファイルに切り替わっていました。
エラーに関係しているのでしょうか？？
試したこと⑤
本番環境であるEC2環境下にyarnとnode_modulesをインストールしていなかったことに後から気づき、
インストールしたあと、試したこと①に記載した内容を再度実行
試したこと⑥
一度docker-compose downをしたあとで、イメージを作り直しコンテナを立ち上げ直した。
試したこと⑦
キャッシュを削除
ファイル構成
rails6のためwebpackerにより管理していまして、
javascriptとSCSSのローカルでのファイル構成は下記の通りです。
# ローカル環境でのjavascriptとSCSSのファイル構成 app/javascript/images/logo.png app/javascript/packs/application.js app/javascript/stylesheets/application.scss
環境
Rails 6.1.4 Ruby 3.0.0 rbenv 1.1.2 puma 5.3.2 Nginx 1.19.10 MySQL 5.7 Amazon Linux2 AMI Github
追記
$ docker-compose run app bundle exec rails assets:precompile RAILS_ENV=production
上記実行の結果はこちらです。
[ec2-user@ip-10-0-2-234 アプリ名]$ docker-compose run app bundle exec rails assets:precompile RAILS_ENV=production Creating network "アプリ名_default" with the default driver yarn install v1.22.5 [1/4] Resolving packages... success Already up-to-date. Done in 0.91s. I, [2021-07-19T14:31:52.318242 #1] INFO -- : Writing /var/www/アプリ名/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js I, [2021-07-19T14:31:52.318986 #1] INFO -- : Writing /var/www/アプリ名/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js.gz I, [2021-07-19T14:31:52.319451 #1] INFO -- : Writing /var/www/アプリ名/public/assets/application-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css I, [2021-07-19T14:31:52.320366 #1] INFO -- : Writing /var/www/アプリ名/public/assets/application-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css.gz I, [2021-07-19T14:31:52.320794 #1] INFO -- : Writing /var/www/アプリ名/public/assets/inquiry-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css I, [2021-07-19T14:31:52.321203 #1] INFO -- : Writing /var/www/アプリ名/public/assets/inquiry-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css.gz Compiling... Compiled all packs in /var/www/アプリ名/public/packs DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. WARNING: 75 repetitive deprecation warnings omitted. Hash: 3174971661e2025a3966 Version: webpack 4.46.0 Time: 19141ms Built at: 07/19/2021 2:32:14 PM Asset Size Chunks Chunk Names css/application-ab380ca8.css 500 KiB 0 [emitted] [immutable] [big] application css/application-ab380ca8.css.br 45.4 KiB [emitted] css/application-ab380ca8.css.gz 59.7 KiB [emitted] js/application-eb3d27609911ccb97804.js 1.44 MiB 0 [emitted] [immutable] [big] application js/application-eb3d27609911ccb97804.js.LICENSE.txt 1.9 KiB [emitted] js/application-eb3d27609911ccb97804.js.br 421 KiB [emitted] [big] js/application-eb3d27609911ccb97804.js.gz 521 KiB [emitted] [big] js/application-eb3d27609911ccb97804.js.map 2.55 MiB 0 [emitted] [dev] application js/application-eb3d27609911ccb97804.js.map.br 633 KiB [emitted] [big] js/application-eb3d27609911ccb97804.js.map.gz 801 KiB [emitted] [big] manifest.json 1.15 KiB [emitted] manifest.json.br 357 bytes [emitted] manifest.json.gz 420 bytes [emitted] media/images/haikei2-fdccd5a9818591770d37f9ea066dca2d.jpg 303 KiB [emitted] [big] media/images/logo-5cea09c33174e593e3035e44c30ab207.png 12.3 KiB [emitted] media/images/map-c720af287cec6da110cee7488771bfcd.png 799 KiB [emitted] [big] media/images/map.index-059b208860fe7bb3fa1129d1ac328a69.png 456 KiB [emitted] [big] media/images/post.show-cf557d5bd5c5823e89b9427013c266cd.png 422 KiB [emitted] [big] media/images/programming-81fcef8481ff9060ba2295a1582a3ec1.jpg 176 KiB [emitted] media/images/user-b7eb3153b0adb70287b66b7ae9d7c8be.png 31.6 KiB [emitted] Entrypoint application [big] = css/application-ab380ca8.css js/application-eb3d27609911ccb97804.js js/application-eb3d27609911ccb97804.js.map [0] (webpack)/buildin/global.js 905 bytes {0} [built] [2] (webpack)/buildin/module.js 552 bytes {0} [built] [6] ./app/javascript/images/haikei2.jpg 103 bytes {0} [optional] [built] [7] ./app/javascript/images/logo.png 100 bytes {0} [optional] [built] ・ ・ ・ ・ ・ [15] ./app/javascript/packs/application.js 776 bytes {0} [built] [16] ./app/javascript/channels/index.js 205 bytes {0} [built] [17] ./app/javascript/channels sync _channel.js$ 160 bytes {0} [built] [22] ./app/javascript/stylesheets/application.scss 39 bytes {0} [built] [24] ./app/javascript/images sync ^./.*$ 380 bytes {0} [built] + 12 hidden modules WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: media/images/haikei2-fdccd5a9818591770d37f9ea066dca2d.jpg (303 KiB) media/images/map-c720af287cec6da110cee7488771bfcd.png (799 KiB) media/images/map.index-059b208860fe7bb3fa1129d1ac328a69.png (456 KiB) media/images/post.show-cf557d5bd5c5823e89b9427013c266cd.png (422 KiB) css/application-ab380ca8.css (500 KiB) js/application-eb3d27609911ccb97804.js (1.44 MiB) js/application-eb3d27609911ccb97804.js.gz (521 KiB) js/application-eb3d27609911ccb97804.js.map.gz (801 KiB) js/application-eb3d27609911ccb97804.js.br (421 KiB) js/application-eb3d27609911ccb97804.js.map.br (633 KiB) WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: application (1.93 MiB) css/application-ab380ca8.css js/application-eb3d27609911ccb97804.js WARNING in webpack performance recommendations: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application. For more info visit https://webpack.js.org/guides/code-splitting/ Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/sass-loader/dist/cjs.js??ref--6-3!app/javascript/stylesheets/application.scss: Entrypoint mini-css-extract-plugin = * [0] ./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/javascript/stylesheets/application.scss 1.61 MiB {0} [built] [3] ./app/javascript/images/haikei2.jpg 103 bytes {0} [built] + 2 hidden modules
エラーではなくWARNINGですが、こちらが原因の可能性もありますでしょうか？
#追記２
docker-compose.ymlの中身はこちらです。
# docker-compose.yml version: "3" services: app: build: context: . env_file: - ./environments/db.env # command: bundle exec puma -C config/puma.rb command: bundle exec rails server -e production volumes: - .:/var/www/アプリ名 - public-data:/var/www/アプリ名/public - tmp-data:/var/www/アプリ名/tmp - log-data:/var/www/アプリ名/log # depends_on: # - db # db: # image: mysql:5.7 # env_file: # - ./environments/db.env # volumes: # - db-data:/var/lib/mysql web: build: context: containers/nginx volumes: - ./nginx.conf:/etc/nginx/nginx.conf - ./アプリ名.conf:/etc/nginx/conf.d/アプリ名.conf - public-data:/var/www/アプリ名/public - tmp-data:/var/www/アプリ名/tmp ports: - 80:80 depends_on: - app volumes: public-data: tmp-data: log-data: db-data:
もう丸４日も経過しておりまして困ってしまっています。。
何かお気づきのことがありましたら教えていただきたいです。
よろしくお願いいたします。
yu_1985様
ご指摘ありがとうございます。
追記２として、追加させていただきました。
ご確認いただけますと幸いです。
AWSあるあるですが、SecurityGroupの設定が厳しすぎるというのがあります。
EC2に設定しているSecurityGroupのインバウンド、アウトバウンドを一時的にフル許可にして
（あくまで検証のために「一時的」にです）
SecurityGroupの問題なのか、Rails、dockerの問題なのか切り分けを行うのが良いと思います。
odataiki様
ご回答ありがとうございます。
元々、EC2に設定しているSecurityGroupのインバウンドは0.0.0.0/0を使い、すべての IPv4 アドレスからアクセスすることを許可する設定にしております。
（アウトバウンドは設定なしの状態）
ですが、AWSの問題なのかRails、dockerの問題なのかなど、一つ一つ切り分けていくことが大事だということに気づけました！
貴重なご意見ありがとうございます。
補足しておきますが、ここで発生しているのは404なのでネットワーク的に問題があった可能性は低いです。
404はリクエストが届いた上でアクセス対象が見つからないときのエラーです。
なのでセキュリティグループが関連している可能性は薄いです。ネットワーク的に接続できていなかったらまずタイムアウトするはずなので。
またセキュリティグループについてはインバウンドはともかくアウトバウンドはデフォルトで作成すると無制限になっています。
ちなみに、404が出るのは特定のディレクトリの画像やjsだけなのか、それとも他のものもすべてなのかどちらですか。
yu_1985様
コメントありがとうございます。
リクエスト自体は届いているけれどもアクセス対象が見つからない状況とのことで、セキュリティグループが関連している可能性は薄いとのこと、大変勉強になります。
404エラーは、一部ではなく全てのCSS、JSに対して発生しております。。
回答1件
0
自己解決
自己解決いたしました！
ローカル環境からgithubにpushをしたら、EC2にpullをする必要があることを把握できておらず、
いくら色々なパターンを試してみても、全て反映されておりませんでした。。。
pullをしたら無事に反映できました！
投稿2021/07/20 17:57
総合スコア14
あなたの回答
tips
プレビュー
