前提・実現したいこと
Railsの本番環境でCSSを反映させたい。
Railsで作成したアプリにYarn経由でBootstrapを導入しapp/javascript/src/application.scss
とapp/javascript/packs/application.js
にimport
することでCSSを当てていますが本番環境下では反映されず困っています。
原因はapp/javascript/packs
とapp/javascript/src
ディレクトリのファイルはアセットパイプラインのプリコンパイルの対象に入らないからだと考え、config/initializers/assets.rb
にその二つのパスを追加しデプロイをしましたが、
うまく反映されたのはJavascriptファイルのapp/javascript/packs/application.js
のみで、相変わらずCSSファイルのapp/javascript/src/application.scss
は反映されず、もう何日も原因が分からないままで困っています。
どうかご指導のほどよろしくお願いします。
ツールのバージョン
MacOS Catalina 10.15.7
Amazon Linux2
Rails 6.0.3.3
Ruby 2.6.5
Bootstrap 4.5.0
Yarn 1.22.10
rails/webpacker 4.3.0
Capistrano 3.15.0
nginx 1.18.0
該当のソースコード
- config/initializers/assets.rb
ruby
1 2Rails.application.config.assets.paths << Rails.root.join('node_modules') 3Rails.application.config.assets.paths << Rails.root.join('app','javascript','packs') 4Rails.application.config.assets.paths << Rails.root.join('app','javascript','src')
- app/javascript/src/application.scss
scss
1@import '~bootstrap/scss/bootstrap'; 2@import '~@fortawesome/fontawesome-free/scss/fontawesome';
- app/javascript/packs/application.js
Javascript
1require("@rails/ujs").start() 2require("turbolinks").start() 3require("@rails/activestorage").start() 4require("channels") 5 6import 'bootstrap' 7import '@fortawesome/fontawesome-free/js/all' 8import '../src/application.scss'
- app/views/layouts/application.html.erb
<!DOCTYPE html> <html> <head> <title>Myapp</title> <meta name="description" content="This site is under construction..."> <meta name="robots" content="noidex,nofollow"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <link rel="prefetch" href="<%= asset_pack_path 'application.css' %>" /> <%= yield %> </body> </html>
- config/environments/production.rb
ruby
1 # Disable serving static files from the `/public` folder by default since 2 # Apache or NGINX already handles this. 3 config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present? 4 # =>false 5 6 # Compress CSS using a preprocessor. 7 config.assets.css_compressor = :sass 8 # Do not fallback to assets pipeline if a precompiled asset is missed. 9 config.assets.compile = true
↓Ngnix(webサーバーの設定を一応載せます)
- /etc/nginx/nginx.conf
user nobody; worker_processes 1; error_log /var/log/nginx/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; include /usr/log/nginx/modules/*.conf; pid run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log logs/access.log main; sendfile on; tcp_nopush on; keepalive_timeout 0; keepalive_timeout 65; types_hash_max_size 4096; include /usr/log/nginx/conf.d/*.conf; #gzip on; server { include /etc/nginx/default.d/*.conf; #listen 80; #server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; #location / { # index index.html index.htm; # root html; } error_page 404 /404.html; locaton = /40x.html { } # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { # root html; } }
試したこと
これでアセットパイプライン上に編入されたはずです。
Terminal
1irb(main):001:0> Rails.application.config.assets.paths 2=> ["/Users/a01/projects/myapp/app/assets/config", 3"/Users/a01/projects/myapp/app/assets/images", 4"/Users/a01/projects/myapp/app/assets/stylesheets", 5"/Users/a01/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/actioncable-6.0.3.3/app/assets/javascripts", 6"/Users/a01/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/activestorage-6.0.3.3/app/assets/javascripts", 7"/Users/a01/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/actionview-6.0.3.3/lib/assets/compiled", 8"/Users/a01/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/turbolinks-source-5.2.0/lib/assets/javascripts", 9#<Pathname:/Users/a01/projects/myapp/node_modules>, 10#<Pathname:/Users/a01/projects/myapp/app/javascript/packs>, 11#<Pathname:/Users/a01/projects/myapp/app/javascript/src>]
コマンド
・bundle exec production deploy:assets:precompile
・bundle exec cap production unicorn:restart
・RAILS_SERVE_STATIC_FILES=1 unicorn_rails -c /var/www/myapp/current/config/unicorn.rb -E production -D
あなたの回答
tips
プレビュー