twitter-bootstrap-railsを使ったRailsアプリをサブディレクトリ運用のPassengerにデプロイしたらAsset Pipelineでハマった
twitter-bootstrap-railsは便利ですね。
とてもナイスなわけですが、タイトルの通り、PassengerでRailsをサブディレクトリで配備してたら、Asset Pipelineでハマったのでメモ。
先にどうしたかだけ書いておくと、Webフォントでの表示はやめて、画像表示にしました。
何がハマったのかというと、Twitter Bootstrapのアイコンを使ってゴミ箱とかユーザーとか表示をしてました。
ソース見てみると、Webフォントを使って表示してるんですね。ちょっと前までは画像だけしか使ってなかったと思ったのですけど。
で、開発環境では表示されていたのですが、Capistranoで本番環境にデプロイしたら表示されなくなったと。
本番環境はPassengerで、Virtual Hostを使用せずに、サブディレクトリで運用してます。
#passenger.conf
RailsBaseURI /railsapp1
なので、URLはexample.com/railsapp1/となるわけです。
Webフォントやアイコンが参照するURLがCSS上でどうなっているのか、実際にprecompileされたCSSを調べてみると、/assets/fontawesome-webfont.eot*1とか、/assets/twitter/bootstrap/glyphicons-halflings.pngとかなっていて、example.com/assets/fontawesome-webfont.eotとなり、railsapp1が抜けているので404になってました。
ならばと、bootstrap_overrides.css.lessの該当箇所を相対パスに変更してみました。
//@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
//@iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');
@iconSpritePath: './twitter/bootstrap/glyphicons-halflings.png';
@iconWhiteSpritePath: './twitter/bootstrap/glyphicons-halflings-white.png';
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
//@fontAwesomeEotPath: '/assets/fontawesome-webfont.eot';
//@fontAwesomeWoffPath: '/assets/fontawesome-webfont.woff';
//@fontAwesomeTtfPath: '/assets/fontawesome-webfont.ttf';
//@fontAwesomeSvgPath: '/assets/fontawesome-webfont.svg';
@fontAwesomeEotPath: './fontawesome-webfont.eot';
@fontAwesomeWoffPath: './fontawesome-webfont.woff';
@fontAwesomeTtfPath: './fontawesome-webfont.ttf';
@fontAwesomeSvgPath: './fontawesome-webfont.svg';
// Font Awesome
@import "fontawesome";開発環境では、両方表示されていたので*2、本番環境にアップしてみたところ・・・
@font-face{font-family:'FontAwesome';
src:url(/assets/./fontawesome-webfont-7cf1b0de49e2f8672c9ad6d9e382115f.eot);
src:url(/assets/./fontawesome-webfont.eot?#iefix) format("embedded-opentype"),url(/assets/./fontawesome-webfont-9c0e35b95bf9cea29c77678ebf71a29d.woff) format("woff"),url(/assets/./fontawesome-webfont-1e29be0bb354c9f664cbca7df9a966d8.ttf) format("truetype"),url(/assets/./fontawesome-webfont.svg#FontAwesome) format("svg");
font-weight:normal;font-style:normal}フォントのurl部分には/assets/が差し込まれてしまいました。
画像については、/assets/が入って来なかったので、Webフォント部分をコメントアウトして、画像でアイコンを表示するようにしました。
ちなみに、asset-pathや、bootstrap_twitter-overrides.css.less.erbにして、asset_path等も試してみましたが、本番環境では結局/assets/....となってしまい、サブディレクトリが入らずダメでした。
サブディレクトリではなく、素直にVirtual Hostで運用しとけば起きない問題ではありますね。
Asset Pipelineは便利なんでしょうけど、ハマると面倒です。
以上。
追記:twitter-bootstrap-railsにはstaticブランチという静的なJS,CSSのものがあるのですが、こちらはWebフォント使ってない版でした。
