[django]nginx 사용시 css 깨지는 문제 해결법

jonghyuck’s velog·2021년 5월 15일
0
post-thumbnail
  1. css가 깨진다. why....?
  2. 해결방법

✅ 1. CSS가 깨진다. why....?

👉 지난시간 이야기 (docker를 사용하여 nginx-django 띄워보기)
지난번 nginx를 이용해 django를 실제로 서비스 해봤는데 CSS가 깨지는 문제점이 있었다.

오류 코드를 보면 404오류가 떠있는 것을 볼 수 있다.
여기에 관해서도 정리한 글이 있으니 참고해보자.

👉 HTTP란?

  • 404 : url을 잘못 입력했을 때 요청한 url을 찾을 수 없음을 의미

대략 url을 잘못 입력했다는 오류로 보인다. 그럼 runserver사용시에는 잘 연결되던 CSS 파일이 왜 url오류를 뿜어낼까???

static file이란?

static file(정적파일)은 image, css, js와 같이 웹사이트를 구성하는 요소중 그 내용이 고정되서 응답할때 별도의 처리 없이 파일 내용을 그대로 보내면 되는 파일들을 의미한다.

원래 nginx서버 를 사용해 웹서버를 띄울 경우 static file들은 proxy서버에서 직접 처리하여 좀 더 빠른 응답속도를 만들어 주는데 이 때문에 기존의 static 폴더의 경로를 따로 설정해서 nginx에게 알려주는 작업이 필요하다. django에서 runserver사용시에는 장고 자체에서 제공하는 기능에 의해 문제가 없지만 정적 파일은 원래 웹서버에서 담당하는것이 효율적이므로 테스트를 제외하고는 대부분 nginx가 서비스하도록 만들어준다고 한다.

✍️ 정리

  1. nginx는 정적파일을 서빙하는 서버의 역할과 reverse proxy server의 역할이다.
  2. runserver는 django에서 자체적으로 정적파일을 연결해주지만 이는 비효율적인 방법이다(test용)
  3. nginx와 같은 웹서버로 서비스시에는 정적파일을 모아서 서버에 위치를 알려주는 방법으로 nginx가 대신 정적파일을 서빙할 수 있도록 만들어주어야 한다.

✅ 2. 해결방법

그럼 nginx에게 정적파일을 모아서 위치만 알려주면 해결된다는걸 알았으니 해결해보자.(아주 간단하다.)
docker를 이용해 컨테이너로 올려놨기 때문에 우선 docker서버에 접속한다.

  • docker 실행중인 컨테이너
docker ps
  • docker 컨테이너 접속
docker exec -it [134adb2ba12 혹은 my-container] /bin/bash


여기서 우선 django로 접속한다.

docker exec -it django  /bin/bash


계정이 바뀌며 정상적으로 컨테인너에 접속한 모습이다. 여기부터는 docker를 사용하지 않을때와 같으니 컨테이너가 아닌 로컬환경이라면 여기서부터 따라하면 된다.
manage.py가 있는 폴더로 이동한 후

python manage.py collectstatic
혹은
python3 manage.py collectstatic

위 명령어를 입력해준다.


나는 이미 실행한 후였기 때문에 overwrite라고 나오지만 상관없다. yes를 눌러주면 166개의 정적파일들이 static폴더에 모이게 된다.

이제 nginx-app.conf에게 static file의 위치를 알려주면 된다.

마지막으로 잘되는지 확인!

굿

0개의 댓글