Q&A
単純なところですが、capistrano使うようになって発生したということはcapistranoのデプロイの仕方になにか問題があるんじゃないでしょうかね。
ということなので、capistrano周りの設定を貼ったほうがいいと思います。
前提・実現したいこと
Cloud9で作成したRailsアプリをcapistranoを用いてAWSへデプロイまで持っていけました。
しかしながらcssやjsがうまく機能せずの状態でしてご質問させてください。
発生している問題・エラーメッセージ
上述したとおりですが、capistrano導入後本番環境にてcssとjsが反映されない状態です。
cssに関してはimage_tagで作った画像に関しては反映されるのですが、
backgroundに置いた画像は反映されません。
jsに関してはプルダウンなど機能しない状況です。
ちなみに、capistrano導入前はhttp://IPアドレスでサイトへ入ってもjs.cssは普通に生きていました。
試したこと
❶production.rbの中身を下記のように変える
Rails.application.configure do config.assets.js_compressor = :uglifier end だったのを↓ Rails.application.configure do config.assets.js_compressor = Uglifier.new(harmony: true) end
エラーが出ることはありませんが、引き続きcss,jsが組み込まれません。
❷unicorn.rbの修正
こちらのサイトを参考にunicorn.rbを修正してみました。
app_path = File.expand_path('../../../', __FILE__) を下記に変更 app_path = "/var/www/git_toreka"
githubにpullリクエストをし、再度デプロイしてみましたが、
エラー等は出ないものの引き続きcss,jsがうまく機能しません。
capistrano導入後のassets周りについてご理解のある方ご意見いただけますと幸いです。
補足情報（FW/ツールのバージョンなど）
amazonlinux2
EC2
AWS
Cloud9
Rails5.2
ruby2.5.1
mysql8
追記
gemfile
group :development, :test do gem 'capistrano' gem 'capistrano-rbenv' gem 'capistrano-bundler' gem 'capistrano-rails' gem 'capistrano3-unicorn' end
production.rb
server 'Elastic IP', user: 'ec2-user', roles: %w{app db web}
deploy.rb
lock '3.15.0' # Capistranoのログの表示に利用する set :application, 'git_toreka' set :deploy_to, '/var/www/git_toreka' # どのリポジトリからアプリをpullするかを指定する set :repo_url, 'git@github.com:yastinbieber/git_toreka.git' # バージョンが変わっても共通で参照するディレクトリを指定 set :linked_dirs, fetch(:linked_dirs, []).push('log', 'tmp/pids', 'tmp/cache', 'tmp/sockets', 'vendor/bundle', 'public/system', 'public/uploads') set :rbenv_type, :user set :rbenv_ruby, '2.5.1' #カリキュラム通りに進めた場合、2.5.1か2.3.1です # どの公開鍵を利用してデプロイするか set :ssh_options, auth_methods: ['publickey'], keys: ['~/.ssh/torekabodymake_keypair.pem'] # プロセス番号を記載したファイルの場所 set :unicorn_pid, -> { "#{shared_path}/tmp/pids/unicorn.pid" } # Unicornの設定ファイルの場所 set :unicorn_config_path, -> { "#{current_path}/config/unicorn.rb" } set :keep_releases, 5 # デプロイ処理が終わった後、Unicornを再起動するための記述 after 'deploy:publishing', 'deploy:restart' namespace :deploy do task :restart do invoke 'unicorn:restart' end end
unicorn.rb
app_path = File.expand_path('../../../', __FILE__) worker_processes 1 # currentを指定 working_directory "#{app_path}/current" listen "#{app_path}/shared/tmp/sockets/unicorn.sock" pid "#{app_path}/shared/tmp/pids/unicorn.pid" stderr_path "#{app_path}/shared/log/unicorn.stderr.log" stdout_path "#{app_path}/shared/log/unicorn.stdout.log" #Railsアプリケーションの応答を待つ上限時間を設定 timeout 60 #以下は応用的な設定なので説明は割愛 preload_app true GC.respond_to?(:copy_on_write_friendly=) && GC.copy_on_write_friendly = true check_client_connection false run_once = true before_fork do |server, worker| defined?(ActiveRecord::Base) && ActiveRecord::Base.connection.disconnect! if run_once run_once = false # prevent from firing again end old_pid = "#{server.config[:pid]}.oldbin" if File.exist?(old_pid) && server.pid != old_pid begin sig = (worker.nr + 1) >= server.worker_processes ? :QUIT : :TTOU Process.kill(sig, File.read(old_pid).to_i) rescue Errno::ENOENT, Errno::ESRCH => e logger.error e end end end after_fork do |_server, _worker| defined?(ActiveRecord::Base) && ActiveRecord::Base.establish_connection end
git_toreka.conf
upstream app_server { # sharedの中を参照するよう変更(/shared/tmp/sockets/unicorn.sock;) server unix:/var/www/git_toreka/shared/tmp/sockets/unicorn.sock; } server { listen 80; server_name 54.249.173.184; # currentの中を参照するよう変更(/current/public;) root /var/www/git_toreka/current/public; location ^~ /assets/ { gzip_static on; expires max; add_header Cache-Control public; # currentの中を参照するよう変更(/current/public;) root /var/www/git_toreka/current/public; } try_files $uri/index.html $uri @unicorn; location @unicorn { 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; } error_page 500 502 503 504 /500.html; }
capfile
require "capistrano/setup" require "capistrano/deploy" require 'capistrano/rbenv' require 'capistrano/bundler' require 'capistrano/rails/assets' require 'capistrano/rails/migrations' require 'capistrano3/unicorn' require "capistrano/scm/git" install_plugin Capistrano::SCM::Git Dir.glob("lib/capistrano/tasks/*.rake").each { |r| import r }
追記❷
[ec2-user@ip-172-31-36-245 ~]$ cd /var/www/git_toreka [ec2-user@ip-172-31-36-245 git_toreka]$ cd current [ec2-user@ip-172-31-36-245 current]$ ls app Capfile db lib material-dashboard-pro public REVISION tmp assets_manifest_backup config Gemfile log node_modules Rakefile storage vendor bin config.ru Gemfile.lock material-dashboard package.json README.md test yarn.lock [ec2-user@ip-172-31-36-245 current]$ cd public [ec2-user@ip-172-31-36-245 public]$ ls 404.html 422.html 500.html apple-touch-icon.png apple-touch-icon-precomposed.png assets favicon.ico robots.txt system uploads [ec2-user@ip-172-31-36-245 public]$ cd assets [ec2-user@ip-172-31-36-245 assets]$ ls admock-691e2314e1be82de0d6617b4dc1edd58a3f16fffbc4502118044ff597eab24b2.png all_mockup-f7d5bed754716b21fa1e32de6efa8bdc6fa70c4521997c5b15bb1d08f4ccb364.png application-25f3fd7a2a3d04f1ab4934eac212b722ce2fe309bb88db76a6b15d47a245e1df.css application-25f3fd7a2a3d04f1ab4934eac212b722ce2fe309bb88db76a6b15d47a245e1df.css.gz application-9c7884e7aa65700e82e55e118b39d39a56475e791b46d82f776b315eb965b3fb.js application-9c7884e7aa65700e82e55e118b39d39a56475e791b46d82f776b315eb965b3fb.js.gz background-3d8e1e3def327bc0c9ba8f29749dfdf812908478d2ffb0d67ed5eef8defb920c.png basic_mockup-78523b267941e3a22b52caf01a4fdfa81856c322a45586d278bdfc1f35e37386.png before-ba0563ddc85ff9e3b07e43b76fb3727e6a3f7db36a458e9d81f5da7525d15142.png bodymakeplan-22aa0b14539876ca92b187dd350577c558cffc107230e0fde7d5601c70423134.png bodymakeplann-63246d3675ca04642e3f0d021c22bbfbae9771a27c35ffaf0e6defb0bdb91317.png css dashboard_mockup-ecfa8447f376e8867aebe2bbb6d1d8eaf720b4b99dba1345afbd6c445884070b.png db_mockup-7b851a7683be119a8e399f852521e9bec453f2c267b6bd27c9598e0aac98a6c0.png fd_mockup-c85212729deb11476228065a800b92d6490fad145f7c2a9a11216f502270ae43.png foods-552098b2e663c0288c4321f45b9476d7fa0fcbaa7f071d0085ed212c7a867651.png hv_mockup-3c78ba97be7871c698cc4906dc3ce3394e627fd3017396e16a18020281a3dd3c.png img ipad-eacb12be26738570bf55046d0fa3dadfc2535e10bc26982186d0a61108b4eab1.png jquery-ui js meet-552098b2e663c0288c4321f45b9476d7fa0fcbaa7f071d0085ed212c7a867651.png oba_1-f370351441fe3ed4822553e5375808cc0ea65ea4bd835dcdd4ecf6b182d357b4.png oba_2-7c99929ef47a4540e3067ea29e081c7922a9cffa2240e987b3ece4ab97bb1122.png oba_3-9d73f21dd26aa4c1f56ee7bc62104928c88bc799b0947b081f8eab47912e0a1c.png ode_1-e246364cf1b4df2336d9cabc5d54f13eb7f3123ef14625ef97e5fc91e3827556.png ode_2-e2b0475130c3e1fb296e43e002dadbe202798db3911e073f7281c12abf1d098d.png ode_3-76157814a3c0062731ff909fc0a21d190da372fbf078a30b36e39a6c01c401f0.png ode_4-9cbe1e6a7624a08ca2d69ac16396ce5649a890cd0434e990c6a9a9d9a678d545.png oji_1-dac049b9628f025280b5e3c735a592a50d2d5b635e1373e777261a4320e15459.png oji_2-18effda7e4fed24d2ac694f5e6a06264c13a9605d4d41297e9d6fcb63d7eb57e.png oji_3-542e9256182d48751bd82167415574e2664b15395406fb612a18eecc1638ec7a.png oji_4-3fa390aa76f5848dbd8a44457e955cc7b1a585de039161203d0136ad7a8d981e.png oji_5-9234f99a194b552d751e54b33396c21648e19a483ed9942397035b28b4ef5168.png one_1-0d9b546ef0e1712f6cdae07528ebdbe9c66495a01e2d121e9f0f981b6dd5787b.png ota_1-94957234e08971b5b3c5ce5a58bd792e68ec75b9ebcf24c86c5dc168a84bb0f0.png ota_2-5d77c3f0a3717b2015d3c58603ba8e5b7412ceb78a89be1a4b77ce056c202748.png ozo_1-ff5983f8428e51c5551b14e295747af9dfaaf59fccb5da4701e0416858564b3d.png ozo_2-0cee3f4219031d6af659e3a8affbf42047e6747e820e788e6fcc936638a4ec1f.png ozo_3-76476189cdd0d13cea7e4a907ddb586caccf65c58a9c4134ae12fe9b79b73f2c.png ozo_4-342c67b62e2ed2059a6d4488d852f7c75e3e6897436f245c5f6f81a0b1e21701.png ozo_5-28a92bfc4b585b682eddd616ffd8cb99817c1adb71574d211abd066d9789cd69.png tai-9fccf4eeca784aeaeb92c45f9d378b00c25af6eed43673ecc8ea4bbb2e737f8d.png Toreka_mainpic-219fed155fda089b546433b08c1247c1d2e74bc4bc6f8c20c56a00d9ee5871d1.png Toreka_mainpic2-efd22f0a3646fc9575ba86957aba18fdee893cbe717c45a9c139ddeb3bac8fc8.png Toreka_mainpic3-e2fa55e9d9297b11ed8f9a899c7d347408a21c5ed0be844d8c886c9beab77dcb.png trainingaicon-b1032c19b4d09690200de7c527309baf47a74b113368a0da9328a4eeb2f58f26.png tr_mockup-0d18a42858700a31de65a2a7836f67e5edba41daf27c5d1ac5d8ced615984485.png tr_mockup2-3ddc582c801862f46912f1e7a484556702d58444e2ccf2213e732b10910955ef.png tr_mockup3-05625e47f24ce0c127aad3f9b3547af313623e8eb52db812416457cf74575db3.png tr_mockup4-fb7756f4f4b2a681ca7598d2b934c9d9b78ae7abf9cb276ef7bc6f50d11cb9d2.png tr_mockup5-34701529a83fade6476731e3347a1928c0c259dbde49c418c8088c2709fd7d77.png tr_mockup6-a61364a6de0ace5be05b1ca0e99ed2d2806614c489b4601b83d22dab854dd9b5.png tr_mockup7-915cafc729fdcafa667cf909933368dde2606be5c3abfd37d63fe460ced2497a.png video-11d96bb4189e336ec8b7da2012dff5c7e2c5ba90de67cd50e4cbf5294e67d914.png weight-a9d082382013e65692cc0f4a68df177ec81495b3a8afc2b4c3af352abe1711ec.png wg_mockup-ffe64eb5b9ef37841f0d0d9b8ca35d620aa1f152f91c5a21cdcadab23633ea76.png [ec2-user@ip-172-31-36-245 assets]$
いつもありがとうございます。
capistrano導入後修正したファイルを一通り追記させていただきました。
current/public/assets 以下にファイルは存在していますか？
本番環境にて確認してみましたが存在しておりました。
追記❷という形で内容貼り付けさせていただきましたのでご確認いただけますと幸いです。
ブラウザで
https://[サーバー]/assets/application-25f3fd7a2a3d04f1ab4934eac212b722ce2fe309bb88db76a6b15d47a245e1df.css
は開けますか？
また、トップページなどを開いてソースを確認するとassets内のファイルは読み込まれていますか？
ファイル名が一致しているかご確認ください。
ブラウザでご指定のやり方で確認をしてみたところコードが長く書かれているページが開きました。
> また、トップページなどを開いてソースを確認するとassets内のファイルは読み込まれていますか？
ファイル名が一致しているかご確認ください。
こちら確認してみて思ったのですが、bootstrapを導入しておりましてディレクトリの階層が下記のようになっています。（わかりづらいので追記にスクショを添付しておきます）
assets
L javascripts
Ljs
Lcore
~
~
L plugins
jsfileたち
何枚かimage画像も読み込めていない箇所があったのですが、imageファイルに直で置いてあるものは読み込まれており、一方でimageディレクトリ配下にimgフォルダを置いてその中にファイルを作っていたものは読み込みがされていませんでした。
なのでjavascriptsも同様な感じで読み込まれていないのかなとも思っております。
app/assets/javascripts/application.js
app/assets/stylesheets/application.css
上記のファイルに require_tree . という記述があれば、
通常、app/assets/[javascripts|stylesheets]/以下のファイルはapplication.[js|css]に結合されます。
(開発環境で動くなら記述されていると思います)
なので、ページに <link rel="stylesheet" media="all" href="/assets/applicatoin-*.[js|css]" />
という記述が確認できれば大丈夫なはずです。
ファイル名がassets以下のapplication-*.[js|css]と完全に一致しているかご確認ください。
画像は、assets/images と public/imagesでは扱いが異なります。
どちらに配置してどのように読み込んでいるのか分からないので何とも言えません。
なるほど。
require_tree . の記載は共にしているのでその部分は問題なさそうです。
> ページに <link rel="stylesheet" media="all" href="/assets/applicatoin-*.[js|css]" />
という記述が確認できれば大丈夫なはずです。
ファイル名がassets以下のapplication-*.[js|css]と完全に一致しているかご確認ください。
application.html.erb にてcssとjsを読み込ませるために下記のように記載しているのですがこの部分が影響している可能性はあるのでしょうか。
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
(着眼点がズレていたらすみません
その記述で問題ないはずです。
確認していただきたいのは、本番環境で出力されるHTMLから
assets/以下のapplication-*.[js|css]が読み込まれているかです。
1.ブラウザで本番環境のページを開く
2.右クリックしてソースを表示
3 F3 を押して 検索欄に assets/application-25f3fd7a2a3d04f1ab4934eac212b722ce2fe309bb88db76a6b15d47a245e1df.css を張り付ける
js も同様に application-9c7884e7aa65700e82e55e118b39d39a56475e791b46d82f776b315eb965b3fb.js
を検索してください。
このファイル名はデプロイのたびに変更される可能性がありますので、
もしデプロイしていたらファイル名が変わっている可能性があります。
ありがとうございます。
上記確認してみたところ
<link rel="stylesheet" media="all" href="/assets/application-25f3fd7a2a3d04f1ab4934eac212b722ce2fe309bb88db76a6b15d47a245e1df.css" />
<script src="/assets/application-9c7884e7aa65700e82e55e118b39d39a56475e791b46d82f776b315eb965b3fb.js"></script>
css, js共に確認ができました...
js/cssは読み込まれているが正常に反映されない
サブディレクトリのファイルが読み込まれていないっぽい
ということですね。
行き当たったことのない状態なので、試せることが思いつかないのですが、
deploy.rb に 以下を追加して cap production deploy しなおすとどうなりますか？
set :stage, :production
set :rails_env, 'production'
deploy.rb 最下部に
set :stage, :production
set :rails_env, 'production'
こちら打ち込み、githubにpullしたのち再度デプロイしてみましたが依然jsは機能しない形です…
github のリポジトリを拝見しました。
app/views/layouts/application.html.erb で
/assets から始まるものがありますが、本番環境ではこれが読み込めていないように見えます。
わざわざありがとうございます…‼︎
235行目からのjsの記載のことでしょうか？？
はい。それに加えて 31行目にもありますね
該当の /assets ~ の部分を / を削除しましたがそうするとroutinigerrorが生じてしまい開発環境ですらjsが機能しなくなってしまいます…
また本番環境では変わらずjsは反応しません。
開発環境では/assets/* のファイルも読み込めますが、本番環境では通常それはしません。
開発環境と本番環境で動くようにするには
1. app/views/layouts/application.html.erb から /assets が含まれるパスを消す
2. app/assets/javascripts|stylesheets/application.js|css を動くように改修する
/assets を指定して読み込んでいた、ということはapp/assets 以下にファイルが存在するということです。
そしてそれらは require_tree でapplication.css|jsに読み込まれているはずです。
CSS はこれでほぼ問題ないのですが、javascript は読み込む順番によってエラーが発生します。
ブラウザの開発者ツールのconsoleを見ると、例えば popper.js がないとか、moment.jsがないとか出てるはずです。
application.js の require は記載した順番でファイルを結合します。
以下の例では poppoerとmomentをその他より早く結合しています。
//= require ./js/core/popper.min.js
//= require ./js/plugins/moment.min.js
//= require_tree .
他にもエラーが出ていますが、それぞれ対処する必要があります。
なるほど…
確かにこれまでも開発者モードで見ると常に真っ赤だったので気にはなっていたのですがそれでも動いていたので深く考えておりませんでした。
念の為真っ赤の部分スクショで追記させていただきます。
確認なのですが、
> 1. app/views/layouts/application.html.erb から /assets が含まれるパスを消す
に関しては235行目〜279行目あたりをごっそり消してしまうということでしょうか？？
（中でもassetsと書いてあるもの
その上でapplication.js に
//= require ./js/core/popper.min.js
//= require ./js/plugins/moment.min.js
などエラーが吐かれているであろうファイル？を上記形式で記載するような形でしょうか？？
ちなみにcssも反映されていないとお伝えしてましたがimage画像が反映されていないだけで他レイアウトは反映がされておりました。申し訳ございません。
よってjs のみ動いていないということになります。
そうです。
bootstrap-datetimepicker requires Moment.js to be loaded first とエラーが出てますが、
これは bootstrap-datetimepicker より前に Moment.js が読み込まれていないとこのエラーが出ます。
bootstrap-datetimepicker(require_tree で読み込まれる) より前の行に
//= require ./js/plugins/moment.min.js を追加することで先に読み込んで(結合して)います。
ありがとうございます。
一度application.rb の該当箇所をコメントアウトして
application.js に必要箇所を取り込んでみます。
また報告させてください…!!
あなたの回答
tips
プレビュー
