CSS 파일(등)이 로드되고 있는데 반영되지 않는다! ! (Resource interpreted as Stylesheet but transferred with MIME type text/plain)

타이틀과 같은 증상에 빠졌습니다만, 「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;
    }
  }
}