これは知ってないと嵌まるんですよね〜
bootstrap絡みで最近よく目にする「font-awesomeが」ですが、Nginxでfont-awesomeのアイコンを表示しようとすると、404になる現象に遭遇しました。
環境は、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; }
対策
それでは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ヘッダが無いので追加する訳です。
これでnginxがeot,ttf,woffを処理できるようになり、font-awesomeが使えるようになります。

- 作者: Clement Nedelcu,長尾高弘
- 出版社/メーカー: アスキー・メディアワークス
- 発売日: 2011/04/21
- メディア: 大型本
- 購入: 2人 クリック: 714回
- この商品を含むブログ (23件) を見る

- 作者: Dimitri Aivaliotis
- 出版社/メーカー: Packt Publishing
- 発売日: 2013/03/19
- メディア: Kindle版
- この商品を含むブログを見る