리액트 빌드 후 CSS 적용 안될 때 시도할만한 방법들

저는 리액트를 통해 웹 페이지를 구현하고 이 빌드 파일을 서버에 배포했을 때, CSS가 적용되지 않아 문제를 겪었던 경험이 있습니다. 배포된 웹 사이트에 접속 시 개발자 도구 Network 탭에서 정상적으로 CSS 파일을 GET하는 부분도 확인할 수 있었기에 도대체 왜 CSS가 적용되지 않는지 이해가 되지 않았습니다. 이런 문제를 겪고 계신 분들에게 도움을 드리기 위해 저의 해결 방법을 공유하겠습니다.

 

CSS 적용 안될 때 해결 방법

1. Nginx static 경로 체크

저는 해당 방법으로 문제를 해결했습니다. 저는 웹 서버로 nginx를 이용하고 있었는데요. 여기서 js 혹은 css같은 정적 파일을 위한 설정을 다음과 같이 해주었습니다.

location /static/ {
  root /usr/src/build;
}

 

 

이때 정확한 MIME 타입을 지정하지 않아서 문제가 될 수 있다는 글을 확인했습니다. 그래서 다음과 같이 해당 설정을 수정하였습니다.

location /static/ {
  root /usr/src/build;
  
  # 추가한 부분들!!!
  index index.html;
  expires 1y;
  add_header Cache-Control "public, max-age=31536000";
  types {
    text/css css;
    application/javascript js;
  }
}

이렇게 수정한 뒤 Nginx를 재시작, 그리고 웹 사이트에서 강력 새로고침을 통해 화면을 갱신하니 CSS가 제대로 적용된 화면을 확인할 수 있었습니다.