django static_root와 collectstatic에 대해 알아봅시다.

 debug=True로 세팅하고 admin page를 켜 보면 잘 켜집니다. 그런데 production 환경에서 debug 옵션을 True로 줄 리는 없을 겁니다. debug=False로 세팅하는 경우 몇 가지 세팅을 하셔야 하는데요. ALLOWED_HOSTS와 CORS_ALLOWED_ORIGINS 세팅을 해 주셔아 합니다.

 

---

 먼저 django-cors-headers를 설치 후에 아래와 같은 설정을 해 주었습니다.

 

 ALLOWED_HOSTS에 "localhost"를 넣었습니다.

 

 

 다음에 "corsheaders.middleware.CorsMiddleware"를 CommonMiddleware 위에 넣었습니다.

 

 다음에, CORS_ALLOWED_ORIGINS에 "http://localhost:8000"을 추가해 주었습니다. 이는 debug=False로 두었을 때, 400 bad request가 떨어지는 것을 방지하기 위한 설정들입니다.

 

 이제, admin 페이지에 들어가 봅시다. 그랬더니, static/admin/css/base.css 등을 찾을 수 없다고 떴습니다. production 환경에서 이들을 로드하기 위해서 몇 가지 작업이 필요하다는 의미입니다.

 

---

 settings.py에서, STATIC_URL과 STATIC_ROOT를 설정해 줍니다.

 

 이제, 프로젝트의 루트 폴더에서 collectstatic 명령어를 수행해 주겠습니다. 그러면 아래와 같이 public 폴더가 생성됩니다. 이는 STATIC_ROOT와 깊은 관련이 있습니다. 설정된 STATIC_ROOT 경로에 정적 파일들을 모두 모아줍니다.

 

 실행하고 나면, djangoex 프로젝트 안에 public이라는 폴더가 생성됩니다.

 

 

 이제 접속해 볼까요? 어드민 페이지에 접속해 보니 무언가가 작동이 되지 않는지 깨져버리고 있습니다. 이게 무슨 일일까요?

 

 

---

 장고에서 debug=False로 돌리는 경우에, static 파일들을 serve 하지 않는 모양입니다. 이는 공식 문서를 보면 확인할 수 있습니다. 그러면 STATIC_ROOT은 아무런 쓸모가 없는 것일까요? static file들을 한 경로에다 모아주기 위해 필요한 설정값이기 때문입니다. 일례로 저는, silk와 django-admin, rangefilter를 설치했는데요.

 

 

 collectstatic 명령어를 실행한 후에 특정 디렉토리에 admin, rangefilter, silk의 static 파일들이 모두 들어가 있음을 알 수 있습니다. 이 경우, serving 하는 쪽에서 static 파일의 절대 경로만 알고 있으면, 정적 파일들을 불러올 수 있다는 이야기가 됩니다. 그런데, 장고 에서 debug=False로 두면 장고가 static을 serve 하지 않는다고 했는데 다른 도구가 없을까요?

 

 nginx와 같은 것으로 처리하면 됩니다.

 

 파일들을 못 불러올 때 에러 메세지를 보면 /static/admin/js/dark_mode.css에 대한 에러가 계속 뜨고 있음을 알 수 있어요.

 

 wsl로 접속해서, static 파일들이 있는 경로를 보겠습니다. dark_mode.css가 있는 위치와 dark_mode.css를 불러오는 url을 보면 앞에 static까지의 접두사만 빼고 똑같음을 볼 수 있어요.

 

 

 그렇기 때문에 /static으로 온 경로의 경우 static 파일이 있는 절대 경로로 가라고 nginx에게 알려주기만 하면 됩니다. STATIC_URL로 우리는 /static으로 접근하면 정적 파일들이 있는 폴더에 접근할 수 있다고 설정했기 때문입니다.

 

 

 이 위치가 /mnt/c/Users/chokw/PycharmProjects/djangoex/public입니다.

 

 

 고로, 이런 식으로 처리해 주면 됩니다. /static/이 실제 정적 파일 경로인 /mnt/c/.../djangoex/public/에 맵핑됩니다. /static/은 STATIC_URL과 관련이 있는 셈입니다.

 

 

 이제 localhost:8080/admin으로 접속하면 css 파일을 잘 불러온다는 사실을 알 수 있습니다. 여기까지 정리해 봅시다. 먼저 장고의 collectstatic은 정적 파일들을 한 곳에 모으기 위해 씁니다. 이와 관련된 것은 STATIC_ROOT입니다. 다음. 장고에서 배포할 때 보안을 위해 debug를 False로 세팅하게 되는데요. 이 때, static 파일이 장고에서 serve 되지 않습니다. 사실 --insecure 옵션을 킬 수도 있긴 합니다만. 흐음. 장고 말고 nginx 같은 데에서 static 파일이 있는 곳으로 url을 잘 mapping 해 주면 되겠습니다.