タイトルのような症状に陥ったのですが、「CSS 読み込まれる 反映されない」みたいなワードでググっても情報が出てこなかったので記録しておきます。
症状
個人で運営しているサービスのインフラ周りを全とっかえする作業中に発生しました。
環境は、Rails+Nginx on GKEといった感じです。
図のようにCSSがまったく当たっておらず、最初はサーバーの設定ミスでアセットファイルが提供されていないのかと思いましたが、よく見るとアセットは全て200 OKで読み込まれています。
（inkscapeで描いているのがバレてしまう...）
更にJPGやPNGといった一部画像のみは正常に表示されており、CSS、SVG、JSは表示されない/反映されないというおかしな現象です。
原因と解決策
上の画像のTypeのところをよく見るとわかるのですが、titlelogoというsvgファイルのTypeがtext/plainになっていました。
このType（MIME Type）が一致していないと、たとえデータが完全でも正常に表示されないようです。（はじめて知った）
よく見たらConsoleにもResource interpreted as Stylesheet but transferred with MIME type text/plainという警告が出ていました。（ErrorじゃなくWarningなのでなかなか気づきにくい）
何故いきなりこのような症状が出たのかといえば、インフラ周りを全とっかえする際にnginx.confを作り直したことが原因でした。MIME Typeを拡張子から判別するための以下の2行を付け忘れていたのです。
include mime.types;
default_type application/octet-stream;
1行目はnginx.confと同階層にある、拡張子とMIME Typeのペアを羅列しているmime.typesを読み込むコードです。
2行目はmime.typesに記載のないデータを「不明なバイナリデータ」を意味するapplication/octet-streamとして扱うためのコードです。（これを付ければブラウザがある程度よしなに扱ってくれる？未検証）
というわけで、無事にCSSやらSVGが表示されるようになりました。
めでたしめでたし
今回使ったnginx.conf全文
ついでに今回正常に表示されたnginx.conf全文を載せておきます。
前提は以下のとおりです。
- Railsの
public/を/var/www/static_files/にmountしてある - Railsコンテナは同一Pod上の3000ポートで起動している
- SSL通信に関してはIngress上で解決している
events {
worker_connections 1024;
}
http{
charset UTF-8;
server_tokens off;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include mime.types;
default_type application/octet-stream;
server{
listen 80;
# Rooting for /public
location / {
root /var/www/static_files;
try_files $uri @rails;
}
# Rooting for rails
location @rails {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
}