0

環境

  • Ruby 2.6.3
  • Ruby on Rails 6.0.0
  • Yarn 1.22.4
  • Webpacker 5.1.1
  • @fortawesome/fontawesome-free 5.13.0

問題

記事(https://techracho.bpsinc.jp/hachi8833/2020_01_17/85943)の通りにRailsにYarnでFontawesomeパッケージを導入し、以下のように設定しました。

application.scss

$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/brands';

application.js

require("@fortawesome/fontawesome-free")

開発環境(localhost:3000)では、Chrome開発コンソールとターミナル上にエラーは出ず、絵文字も表示されました。しかし、実行環境では、絵文字が □ のように表示され、以下の通りのエラーが出ました。

Chrome コンソール

Failed to load resource: the server responded with a status of 404 (Not Found) fa-solid-900.woff2:1
Failed to load resource: the server responded with a status of 404 (Not Found) fa-solid-900.woff:1
Failed to load resource: the server responded with a status of 404 (Not Found) fa-solid-900.tff:1

ターミナル

ActionController::RoutingError (No route matches [GET] "/assets/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff"):
...

なぜ開発環境では絵文字が表示され、実行環境では表示されないのか分かりません。

初学者ですので、下らない質問ではあると存じますが、どうかお願い致します。

1
  • 開発環境と実行環境の違いは何か?についても記載があると回答のヒントになるかもしれません。
    – cubick
    Commented 2020年4月29日 7:12

1 件の回答 1

1

config/environments/production.rb で config.assets.compile = true とすることで解決しました。

1
  • 小規模な利用であれば、特に問題はないかとは思いますが、基本的にはRAILS_ENV=production bin/rails assets:precompileの方が推奨のようです。理由は、メモリーの消費とパフォーマンスの低下にあるようです。詳しくは、railsguides.jp/…config.assets.precompile = trueにした場合のところを見てみてください。
    – sanadan
    Commented 2020年5月1日 10:31

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。