Django templates static 디렉토리 설정 방법

처음에 templates과 static 디렉토리를 제대로 설정해 두지 않으면 나중에 유지 보수가 너무 힘들어지기 때문에 Django를 설치하게 되면 코딩 들어가기 전에 이것부터 해두기를 바란다. 

최종적인 모습은 아래와 같다. 정말 수년의 경험을 통해서 얻은 가장 개발에 혼선없고 효율적으로 관리하기 편한 최적화된 구조이니 참조하기 바란다.

Django Best Templates Static Directory

 

1. templates 디렉토리 설정

• 프로젝트 바로 아래에 "templates" 디렉토리를 생성한다.
• settings.py에서 tempaltes 디렉토리를 아래와 같이 설정해준다.

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

# templates directory
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

 

• 이후 html 등의 template 파일은 각각의 앱 디렉토리가 아닌 프로젝트 밑에 있는 templates에서 앱이름에 맞는 디렉토리를 생성한 후 프로젝트/templates/앱이름/index.html 형태로 저장한다.사용할 때에는 render에서 앱이름/html파일이름 으로 지정하여 사용할 수 있다. 가장 깔끔한 방식이다.

return render(request, 'poll/index.html', context)

 

2. static 디렉토리 설정

• 프로젝트 바로 아래에 "static" 디렉토리를 생성한다.
• settings.py에서 static 디렉토리를 아래와 같이 설정해준다. 이후 CSS, Javascript, Image 등의 static 파일은 각각의 앱 디렉토리가 아닌 프로젝트 밑에 있는 static에서 css와 같이 공통 디렉토리 또는 앱이름에 맞는 디렉토리를 생성한 후 프로젝트/static/앱이름/sample1.png 형태로 저장한다.

# Static files (CSS, JavaScript, Images)
STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / 'static'] # when debug=True, for local server
# STATIC_ROOT = '/.../..../.../staticfiles' # when debug=False, for NGINX server

참고로, STATICFILES_DIRS와 STATIC_ROOT는 같이 공존할 수 없다. 나도 처음에 이 두개를 같이 써주고 돌려보면 자꾸 에러가 나서 왜 안되는지 이유를 몰랐었다. 결론은 Django는 공식적으로 static 파일들을 운영하는 용도가 아니라고 분명히 말하고 있다. 즉 동적 웹서버를 위한 것이고 정적 파일들은 전통적인 아파치, Nginx 등의 정적 웹서버 운영에 최적화된 서버에서 운영하도록 설정하라고 권고하고 있다. 그렇기 때문에 STATIC_ROOT와 manage.py collectstatic 이라는 명령어가 존재하는 것이다.  실제로, 위의 설정을 해두고 debug=False로 설정한뒤에 html에서 이미지가 표시되는지 확인해보라. 분명히 깨져서 나올 것이다. 그말은 debug=False라는 것은 상용 운영을 위한 것이기 때문에 정적 파일들을 더 이상 프로젝트 밑에 있는 static이라는 디렉토리에서 찾기 않기 때문이다. 꼭 이점을 잘 이해하기를 바란다. 정말 많은 시간을 허비한 부분이다.아래와 같이 기억하고 debug 상태에 따라 주석 처리를 알맞게 해주어야 한다.

- 개발중 debug=True 일때는 STATICFILES_DIRS

- 상용중 debug=False 일때는 STATIC_ROOT

 

• 당연히 STATIC_ROOT를 써야될 상황이 되었다면 collectstatic을 해주어야 한다.

python manage.py collectstatic

 

• html에서 사용할 때에는 아래와 같이 코드를 작성하면 된다.

{% load static %}
...

<img src="{% static 'poll/sample.png' %}">
...