Edited at

rails-assets-fontawesome 4.4.0 にアップデートしたらフォントが迷子に (asset compile 編)

More than 3 years have passed since last update.


前提: やったこと


app/assets/stylesheets/application.css.scss

$fa-font-path: "fontawesome/fonts";

@import "fontawesome";


現象


  • フォントファイル(fontawesome-webfont.woff2 など) が、production 環境で参照できなくなってしまった


    • development 環境では参照できる




調査


  • 4.3.0 ではfont-url で参照していたためasset compile でfingerprinted url を取得できたが、4.4.0 から何故かurl で参照するようになったため、fingerprinted url が取得できなくなってしまったらしい

# 4.3.0

-[100756]% grep -r woff2 vendor/bundler/ruby/2.0.0/gems/rails-assets-fontawesome-4.3.0
vendor/bundler/ruby/2.0.0/gems/rails-assets-fontawesome-4.3.0/app/assets/stylesheets/fontawesome/font-awesome.scss: src: font-url("fontawesome/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format('embedded-opentype'), font-url("fontawesome/fonts/fontawesome-webfont.woff2?v=4.3.0") format('woff2'), font-url("fontawesome/fonts/fontawesome-webfont.woff?v=4.3.0") format('woff'), font-url("fontawesome/fonts/fontawesome-webfont.ttf?v=4.3.0") format('truetype'), font-url("fontawesome/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format('svg');

# 4.4.0
-[100757]% grep -r woff2 vendor/bundler/ruby/2.0.0/gems/rails-assets-fontawesome-4.4.0
vendor/bundler/ruby/2.0.0/gems/rails-assets-fontawesome-4.4.0/app/assets/stylesheets/fontawesome/_path.scss: url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),


前提その2


non-digest オプションがRails4 から無くなった件

https://github.com/rails/sprockets-rails/issues/49



  • トレードオフ


    • non-digest なURL にすると、キャッシュの問題が起きてしまう

    • 全てをdigest にすると、3rd party でasset pipeline を気にせず作られたものはURL のリンク切れが起きてしまう (★ 今回はこの問題に引っかかった)


      • 毎回3rd party のfile をmodify (url => image-url, etc..) するのは微妙






  • 上記スレッドで挙がっている解決策(案) と所感


    • rake task でコピーして元のURL で参照する


      • 所感: modify したときにURL が変わらないので、結局キャッシュの問題が解決できないぽい



    • redirect


      • 所感: これもおそらくキャッシュの問題が解決できない気がする


        • app.js => app-xxx.js の302 (これはブラウザがキャッシュする?)

        • app-xxx.js (これはブラウザがキャッシュするはず)

        • => fingerprint が効くようにするには302 をキャッシュしないようにするべきだが、それだと毎度app.js のリクエストがサーバーに飛ぶのであまり意味ない? (302 だけなので速いかもしれないが)





    • override


      • 所感: 表示はされるようになるが、元のファイルが残っているので404 not found のリクエストが飛んでしまうのが嫌なかんじ



    • middle ware に何か挟み込む?


      • 所感: アイデアは書いてあるが、実装はまだ無いぽい



    • non-stupid-digest-assets gem を使ってnon-digest なファイルを指定する


      • 所感: キャッシュの問題は解決されないが、余分なファイルやリクエストは作らずに済む (設定ファイルは1つ増えるが)






今回とった方針


  • non-stupid-digest-assets を利用する


    • 結局どれもキャッシュの問題が解決できないのであれば、せめて余計なものを作らないものを選ぶ




その他メモ


  • なぜかfont のリクエストヘッダにCache-Control: no-cache が付く件 (Chrome のDeveloper Console で確認)


    • 要調査

    • とりあえず現状キャッシュの問題は関係ないっぽい