CSSファイル（等）が読み込まれているのに反映されない！！（Resource interpreted as Stylesheet but transferred with MIME type text/plain） #nginx

タイトルのような症状に陥ったのですが、「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行を付け忘れていたのです。

/etc/nginx/nginx.conf

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上で解決している

/etc/nginx/nginx.conf

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;
    }
  }
}