Web/Django-python

docker + nginx + django 에서 static file serve 해주기

기본적으로 장고는 정적파일 로드를 static 이라는 경로에 따로 모아놓고 진행을 한다.

따라서 실제 서비스 환경에서는 CSS나 이미지를 비롯한 정적 파일들을 해당 경로에 모아놔야 정상적으로 로드가 되는데,

장고에서는 runserver 실행시 필요한 static 파일들을 /static/ 이라는 하위경로에 자동으로 모아줘서 장고만 쓸때는 크게 문제가 없다. 서버가 실행되면 /static/ 경로를 참조하면 그만이니까.

근데 nginx를 쓸때는 그렇지 않다. nginx에서 로드할 파일들 목록에 static은 포함이 안되있어서 참조를 못하고, nginx에서 static을 참조를 못하니까 장고에서도 static을 못불러온다.

그래서 nginx에서도 static 파일을 모아올 수 있게끔 수동으로 내용들을 모아줘야한다. 이때 사용하는 명령어가 collectstatic 명령어. 해당 프로젝트 내에서 사용할 static 파일들을 수동으로 모아서 특정 디렉토리로 모아준다.

settings.py

~~~
import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
ROOT_DIR = os.path.dirname(BASE_DIR)

STATIC_URL = '/static'
STATIC_DIR = os.path.join(BASE_DIR,'static')
STATICFILES_DIRS = [
    STATIC_DIR,
    ]

STATIC_ROOT = os.path.join(ROOT_DIR,'.static_root')
~~~

프로젝트의 메인앱이 있는 디렉토리에 settings.py 파일을 위와 같이 수정한다.
static 파일이 모일 경로는 컨테이너 내에서는 /home/프로젝트/ 하위에 생기고, 로컬에서는 /volumes/프로젝트/하위에 생긴다.
.static_root 파일이 모일 경로는 컨테이너 내에서는 /home/ , 로컬에서는 /volumes/ 에 생긴다.

이후 python3 manage.py collectstatic 명령어를 실행해주면 .static_root 디렉토리에 수동으로 파일들을 모아준다.
이러면 이제 nginx 에서 접근할 수 있게 설정을 만들어주면 된다.

docker-compose.yml

~~~
nginx:
    image: nginx
    container_name : nginx_service
    volumes: 
      - /home/synod2/synod2/durumi/workspace/volumes-nginx:/etc/nginx/conf.d
      - /home/synod2/synod2/durumi/workspace/volumes/.static_root/:/static
    ports:
      - "80:80"
    depends_on : 
      - durumi

~~~

docker-compose 파일의 nginx 설정 관련 부분이다. 원래라면 volumes-nginx 에서 가져오는건 conf.d 파일뿐이겠지만, static 파일들을 nginx 컨테이너에 포함시켜야 제대로 인식이 가능하게 되므로, durumi의 볼륨인 volumes의 하위에 있는 .static_root 를 가져와 nginx 컨테이너에 포함시켜주자.

이제 마지막으로, nginx에서 아까 컨테이너로 가져온 .static_root 파일을 인식할 수 있게 해주자.

nginx.conf

upstream durumi {
    ip_hash;
    server durumi:8000; # 서버의 컨테이너 명
}

server {
    location / {
        proxy_pass http://durumi/;
  }

    location /static/ {
        alias /static/;
    }
    listen 80;
    server_name localhost;
}

추가해준건 location /static/ 부분. 컨테이너 내 /static/ 디렉토리를 가져와서 /static/ 이라는 이름으로 사용할 수 있게 지정해주자.

이렇게까지 하고 나면 이제 장고에서 적용해주는 css 를 비롯한 정적 파일들이 제대로 보인다.