[Error]django - Nginx status 200, Not Accept static file - nginx상태코드가 200이지만 적용이 안된 경우

내용

django-gunicorn-nginx 연결을 잘해줬다고 생각을 하고 도커 컴포즈를 실행해 보았다.

보통 static file은 nginx에서 처리를 하기 때문에 swagger, admin과 관련된 html, css, js는 nginx에서 처리가 돼야 했다.

하지만, 서버 정상 작동(API 기능들 성공) 상태 이지만 정적파일들을 읽을 수 없었다.

이 부분에서 의문이 들었던 것은 웹에서 swagger를 볼 때 개발자 도구에서 network 카테고리를 선택하면 어떤 파일들을 받으려고 하는지 상태코드부터 자세하게 알 수 있다. 

 

여기서, 제일 의문이 였던건... 상태코드가 200으로 정적 파일들을 모두 읽어오고 200이는 표시까지 정확하게 확인이 됐기 때문이다.

만약, 읽지 못했다면 404 or 다른 에러가 들이 떠야하는데 왜 그런 것일까.

그러다 큰 힌트를 얻고 해결하게 됐다.

 

문제점

우선 Docker-compose로 nginx 컨테이너를 만들어서 실행하는 부분에서 내가 설정을 잘 못한 부분이 있었다. nginx.conf라는 파일의 volume 설정도 문제였고, 위치도 문제 였다고 생각을 한다.

 

기존에는 nginx.Dockerfile 과 nginx.conf. 2개를 가지고 있었다. 내 생각으로 Dockerfile에는 문제가 없지만, conf 문제 였다고 본다.

 

기존

user  nginx;
worker_processes  auto;
error_log    /var/log/nginx/error.log warn;

events {
    worker_connections  1024;
}

http {
    upstream app_server {
        ip_hash;
        server app:8000;
    }

    server {
        listen       80;
        server_name  Static IP;

        location = favicon.ico { 
            access_log off; 
            log_not_found off; 
        }

        location /static/ {
            alias  /static/;
            # root  /;
        }

        location /media/ {
            root /media/;
        }

        location / {
            # include nginx.conf;
            proxy_pass http://app_server;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_redirect off;
            proxy_set_header Host $http_host;
        }
    }
}

nginx에서 설정할 수 있는 부분들을 모두 nginx.conf라는 파일에 모아뒀다.

이방식을 했을경우 내가 생각했던 nginx 설정들이 정확하게 되지 않았다.

 

변경

    upstream app_server {
        ip_hash;
        server app:8000;
    }

    server {
        listen       80;
        server_name  Static IP;

        location = favicon.ico { 
            access_log off; 
            log_not_found off; 
        }

        location /static/ {
            alias  /static/;
        }

        location /media/ {
            alias /media/;
        }

        location / {
            proxy_pass http://app_server;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_redirect off;
            proxy_set_header Host $http_host;
        }
    }

 

컨테이너에 접속해서 확인해보면 etc/nginx에 파일과 폴더들이 존재했는데, nginx.conf라는 파일에 이미 user, worker_process, event가 적혀 있었다. 이 파일도 나중에 변경을 하면 내가 사용하고 싶은 부분들을 사용할 수 있을거라고 생각을 했다.

 

내가 변경한 파일은 ect/nginx/conf.d에 default.conf라는 파일 이름으로 volume을 설정하였다.

해당 방법으로 수정을 하고 나니 내가 원했던 static file들에 css가 적용이 된 상태로 보이게 됐다.

 

고찰

해당 에러를 해결하면서, 서칭도 많이 하고, 블로그도 많이 읽어 보면서, 모든 글들이 내가 설정한 부분과 맞지는 않는다는 것을 또 알게 되었고 설정을 잘못하면 충분히 많은 시간을 투자해야 한다는 것을 다시한번 알게 되었다.

 

Ref.

https://velog.io/@jimin_lee/%EC%BB%A8%ED%85%8C%EC%9D%B4%EB%84%88-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

https://www.youtube.com/watch?v=N2t7L_K5LXo

 

 

- 어떤 문제를 해결하기위해 검색하고 블로그에 작성한 글입니다. 부족한점이 많지만 틀린점이나 부족한점이 있다면 말씀해주시면 감사하겠습니다.