✨ nginx swagger-ui

ec2 > nginx > gunicorn > django 를 붙이고 나서 스웨거에 접속을 했는데, ui 가 전혀 없는 상태였습니다. 😂

개발자 도구로 확인해보니, not found....

nginx 를 붙이면서, static 파일들을 한 곳으로 모아줬어야 했는데 모아주지 않아서 ec2 서버로 swagger에 접속하니 ui를 찾지 못한 채 blank page 가 나왔습니다.

1. django에서 static 은?

django에서 static 파일을 보통 아래 3가지의 경우로 설정합니다.

1. STATICFILES_DIRS
2. STATIC_URL
3. STATIC_ROOT

1) STATICFILES_DIRS

개발 단계에서 사용하는 정적 파일들의 경로를 지정하는 설정입니다.
특정 django app 에만 사용하는 정적 파일이 있거나 여러 경로에 정적 파일들을 배치했다면, 해당 경로들을 list, tuple 로 담으면 됩니다,

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

2) STATIC_URL

웹 페이지에서 사용할 정적 파일의 최상위 URL 경로입니다.
이 경로는 디렉터리는 아니며 URL로 존재하는 단위입니다.

처음 django project를 생성하면 settings.py에 아래와 같이 기본값으로 설정되어 있습니다.

STATIC_URL = '/static/'

2) STATIC_ROOT

django 프로젝트에서 사용하는 모든 정적 파일을 한 곳에 모아넣는 경로입니다.
python manage.py collectstatic 이라는 명령어를 입력하여 한 곳에 모아줍니다.

개발 과정에선, settings.py에서 DEBUG=True로 설정되어 있으면 STATIC_ROOT 설정은 작용하지 않으며, STATIC_ROOT는 실 서비스 환경을 위한 설정 항목입니다.

django가 접근하여 다루는 곳은 STATICFILES_DIRS 이고, STATIC_ROOT 는 웹 서버가 접근 합니다.

2) django static 파일 모아주기

로컬이나 ec2 우분투 서버에서 장고 프로젝트 settings.py로 이동
저는 ec2 우분투 서버에 클론 받은 프로젝트 파일에서 수정했습니다.


# settings.py

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'static')

STATIC_URL 밑에, STATIC_ROOT 추가하기

# 프로젝트 urls.py

urlpatterns = [
   """내가 추가한 url 들 """
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)



# 아래 명령어로 정적 파일 모아주기
python manage.py collectstatic

그럼 manage.py 있는 경로에 static 폴더가 생기면서 안에 swagger 관련 js,css 등 정적 파일들이 모아져 있는 것을 볼 수 있습니다.

3) nginx 설정

# cd /etc/nginx/sites-enabled 경로로 이동
# nginx 설정 시 만들었던 프로젝트명.py 파일 열기

sudo vi 프로젝트명.py

server {
        listen 80;
        server_name ec2퍼블릭 주소;

        charset utf-8;

        location / {
        include proxy_params;
        proxy_pass http://127.0.0.1:8000;
        }

        location /static/ {
                alias /home/ubuntu/프로젝트 경로/static/;
        }
}


>>> static 경로 지정 : alias /home/ubuntu/프로젝트 경로/static/

4) 재실행

sudo systemctl daemon-reload
sudo systemctl restart gunicorn
sudo systemctl restart nginx

참고!