Django가 static 파일을 다루는 방법

2022. 1. 17. 14:36ㆍ강의 정리/Django 와 프론트엔드

반응형

출처 : https://www.inflearn.com/course/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EC%9E%A5%EA%B3%A0-%EC%9B%B9%EC%84%9C%EB%B9%84%EC%8A%A4/dashboard

 

장고(Django)를 배우기 시작한 입문자이시거나, 또는 배우고 싶은 생각이 있으신 분은 위 출처의 강의를 적극 추천드립니다!!!

 

 

 

 


웹사이트는 일반적으로 자바스크립트, CSS, 이미지 등의 파일들을 사용하는데, 이러한 파일들을 Django 에서는 Static 파일이라 부른다.
http://pythonstudy.xyz/python/article/314-Static-%ED%8C%8C%EC%9D%BC

 

 

Static 파일

  • 개발 리소스로서의 정적인 파일 (프론트엔드와 관련이 많음)
  • 앱 / 프로젝트 단위로 저장 / 서빙

 

Media 파일

  • FileField / ImageField를 통해 저장한 모든 파일
  • DB필드에는 저장경로를 저장하며, 파일은 파일 스토리지에 저장
  • 프토젝트 단위로 저장 / 서빙

 

 

장고 Static 파일 경로

  • 한 App을 위한 static 파일을 app/static/app 경로에 둔다.
  • 프로젝트 전반적으로 사용하는 static 파일은 settings.STATICFILES_DIRS에 지정된 경로에 둔다. EX) 부트스트랩
    •  
  • 다수 디렉토리에 저장된 static 파일은 collectstatic 명령을 통해, settings.STATIC_ROOT에 지정된 경로로 모아서 (복사)해서 서비스에 사용

 

부트스트랩 파일 static 경로에 저장하기

  1. http://bootstrapk.com/getting-started/ 에서 컴파일된 CSS와 JS 다운로드
  2. settings.py의 STATIFILES_DIRS에서 설정한 경로 아래에 저장 
    • STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'inflearn', 'static'),
]
    •  

 

파일 static 경로에 저장된 부트스트랩 활용하기

    <link rel="stylesheet" href="{% static 'bootstrap-3.3.2-dist/css/bootstrap.css' %}" />
    <script src="{% static 'jquery-3.6.0.min.js' %}" ></script>
    <script src="{% static 'bootstrap-3.3.2-dist/js/bootstrap.js' %}"></script>

 

 

 

#dongbaek/settings.py

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

 

 

 

STATIC_URL = None

  • 각 static 파일에 대한 URL Prefix
    • 템플릿 태그 {% static "경로" %}에 의해서 참조되는 설정
  • 항상 / 로 끝나도록 설정

 

 

STATICFILES_DIRS = []

  • File System Loader에 의해 참조되는 설정

 

 

STATIC_ROOT = None

  • python manage.py collectstatic 명령이 참조되는 설정
  • 여러 디렉토리로 나눠진 static 파일들을 이 경로의 디렉토리로 복사하여, 서빙
    • 해당 작업이 필요한 이유는 서비스가 되려면 다 합쳐야 웹서비스에 의해 서빙을 받을 수 있기 때문이다.
  • 배포에서만 의미가 있는 설정 
    • 개발시에는 Django 개발 서버에서는 static 파일이 어디있는지 알고있기 때문이다.

 

collectstatic 명령이란?

  • 실 서비스 배포전에는 반드시!!!! 본 명령을 통해, 여러 디렉토리에 나누어져 있는 static 파일들을 한 곳으로 복사해야 한다.
    • 복사하는 대상 디렉토리 : settings.STATIC_ROOT
    • 이 명령을 통해서 한 디렉토리에 static 파일들이 모두 모여있기에, Finder의 도움이 필요없어짐

 

 

 

 

 

추천 settings

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

 

Static Files Finders

 

Template Loader와 유사

  • 설정된 Finders를 통해, static 템플릿이 있을 디렉토리 목록을 구성
    • 장고 서버 초기 시작시에만 1회 작성
  • 디렉토리 목록에서 지정 상대경로를 가지는 static 파일 찾기

 

대표적인 2가지 Static Files Finders

  • App Directories Finder
    • "장고앱/static/" 경로를 "디렉토리 목록"에 추가
  • File System Finder
    • settings.STATICFILES_DIRS 설정값을 "디렉토리 목록"에 추가
  • STATICFILES_FINDERS = [
	'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]

 

템플릿에서 static URL 처리 예시 (1)

방법 1) settings.STATIC_URL, Prefix를 하드코딩하기 #비추천

  • 하지만, settings.STATIC_URL 설정은 언제라도 프로젝트에 따라 변경될 수 있음. 하드 코딩하는 것이 번거롭고, 변경점이 생겼을 경우 일일이 수정해줘야 함
  • 배포시에는 static_url 설정값이 변경됨
    • 클라우드 정적 스토리지나 CDN 사용 시
  • <img src="/static/blog/title.png" />

 

 

방법 2) Template Tag를 통한 처리

  • 프로젝트 설정에 따라, 유연하게 static url prefix가 할당된다.
  • {% load static %}
<img src="{% static 'blog/title.png' %}" />

 

 

 

개발 환경에서의 static 파일 서빙

개발 서버를 쓰고, and settings.DEBUG = True 일 때만, 지원

  • 프로젝트 / urls.py에 Rule이 명시되어 있지 않아도, 자동 Rule 추가
  • 이는 순수 개발목적으로만 제공
  • False일 때는 별도로 static 서빙 설정을 해주어야 함
  • URL을 통해 파일시스템에 직접 접근하는 것이 아닌, 별도 static 파일 아래에 지정 이름의 STATIC 파일을 장고의 StaticFiles Finder에서 대신 찾고 그 내용을 읽어서 응답하는 시스템이다.

 

 

static 서빙을 하는 여러가지 방법

  1. 클라우드 정적 스토리지나 CDN 서비스를 활용
  2. apache / nginx 웹서버 등을 통한 서빙
  3. 장고를 통한 서빙

 

 

 

외부 웹서버에 의한 static/media 컨텐츠 서비스

  • 정적인 컨텐츠는, 외부 웹서버(nginx등등)를 통해서 처리하면 효율적으로 처리할 수 있다.
  • 정적 컨텐츠만의 최적화 방법 사용

 

 

 

배포 시 static 파일 처리 과정(프로세스)

  1. "서비스용settings"에 배포 static 설정
  2. 관련 클라우드 스토리지 혹은 아파치 / ngnix static 설정
  3. 개발이 완료된 static 파일을, 한 디렉토리로 복사
    • python manage.py collectstatic --settings=서비스용settings
      • 스토리지 설정에 따라, 한번에 클라우드 스토리지로의 복사를 수행되기도 함
    • settings.STATIC_ROOT 경로로 복사됨
  4. settings.STATIC_ROOT 경로에 복사된 파일들을 배포 서버로 복사
    • 대상 : 클라우드 스토리지, 혹은 아파치 / ngnix에서 참조할 경로
  5. static 웹 서버를 가리키도록 settings.STATIC_ULR 수정

 

static 관련 라이브러리

 

django-storages — django-storages 1.12.2 documentation

© Copyright 2011-2017, David Larlet, et. al. Revision 8942ff24.

django-storages.readthedocs.io

 

 

 

 

 

 

 

반응형

'강의 정리 > Django 와 프론트엔드' 카테고리의 다른 글

Django와 부트스트랩  (0) 2022.01.14

관련글

댓글 0

티스토리툴바