【404】font-awesomeがnginx上で404になる件【bootstrap】

これは知ってないと嵌まるんですよね〜

f:id:treeapps:20180418115102p:plain

bootstrap絡みで最近よく目にする「font-awesomeが」ですが、Nginxでfont-awesomeのアイコンを表示しようとすると、404になる現象に遭遇しました。
f:id:treeapps:20131014132456p:plain
環境は、nginx1.4、tomcat7、です。

どうも以下のファイルが404になっているようです。

fontawesome-webfont.woff
fontawesome-webfont.ttf
fontawesome-webfont.svg

パスが間違っている事も考え、同フォルダにtest.css等を配置すると表示できます。
完全にピンポイントで前述のファイルのみが表示できません。
挙動を見ると、woff/ttf/svgの拡張子がtomcatに渡されてしまい、404になっていました。

試しに以下のようにtomcatに渡さないようにbreakしても、tomcatに処理が渡ってしまいます。

        location ~ .*(htm|html|jpg|JPG|gif|GIF|png|PNG|swf|SWF|css|CSS|js|JS|inc|INC|ico|ICO|woff|ttf|svg)(|.*)$ {
            break;
        }

対策
- mime.types
- nginx.conf
Access-Control-Allow-Originとは？

対策

それでは404にならなような設定にしてみましょう。

mime.types

以下を追加します。

    pplication/x-font-ttf                 ttf;
    font/opentype                         otf;
    font/x-woff                           woff;

nginx.conf

以下のように修正します。

http {
    server {
        listen       80;
        server_name  localhost;

        # ★★★ これを追加 ★★★
        location ~* \.(eot|ttf|woff)$ {
            add_header Access-Control-Allow-Origin *;
            break;
        }

        location ~ .*(htm|html|jpg|JPG|gif|GIF|png|PNG|swf|SWF|css|CSS|js|JS|inc|INC|ico|ICO)(|.*)$ {
            break;
        }

        location / {
            proxy_pass http://localhost:8080/hoge/;
        }

    }
}

これだけでnginxでfont-awesomeが正常に動作するようになります。

Access-Control-Allow-Originとは？

Access-Control-Allow-Origin（所謂CORSですね）はクロスドメイン制約を制限するためのヘッダーです。
nginxはeot,ttf,woffの場合、Access-Control-Allow-Origin ヘッダはデフォルトでつきません。
chrome://net-internals/#events
からAccess-Control-Allow-Origin を見ても、jqueryとmodernizr.min.jsのみしかありません。
従ってeot,ttf,woff、の場合にAccess-Control-Allow-Originヘッダが無いので追加する訳です。
f:id:treeapps:20131014140316j:plain
これでnginxがeot,ttf,woffを処理できるようになり、font-awesomeが使えるようになります。