Django와 S3연동 후, css 등 static file 로딩이 되지 않을 때 해결 방법

문제: django admin 접속 시, css가 적용되지 않는다

Django 로 개발하던 중, static file을 S3로 collectstatic 해주었다.

그 이후, django admin에서 css 등이 적용되지 않는 증상을 보였는데, 코드 문제는 아니었다. 이런 경우 문제의 가능성과 내 경우 무엇이 문제였는지 정리해둔다.

문서에서 본대로 설정했는데, 이런 화면이 나온다. 뭐가 문제일까?

가능성 1: S3 연동 후, collectstatic을 재수행하지 않았다

S3에 연동 후에 반드시 collectstatic 해주어야 한다. 하지 않으면, S3 bucket 설정이 완벽해도, 자원이 없으므로 여전히 예쁘지 않은 admin페이지를 볼 것이다.

해결책

아래 스크립트 실행: S3에 static file을 업로드한다.

./manage.py collectstatic [--settings=<YOUR.SETTINGS_PY_FILE>]
# e.g.) ./manage.py collectstatic

가능성 2: S3 버킷 접근 제어 문제

가장 우선적으로 확인해봐야할 내용이다.

위 붉은 네모에 해당하는 URL에 어디서든 접근 가능한가? secret mode 등으로 테스트 해보고, 정상적으로 접근 가능하다면, 이 문제는 아니다. 하지만 파일 내용이 보이지 않고, 에러가 난다면 정책문제일 가능성이 높다.

버킷이 public하게 열려있다면, 아래처럼 "public"이 경고와 함께 표시되어있을 것이다.
버킷을 public하게 열고 싶지 않다면, 이 글 말고 다른 글을 확인하자. 이 글은 admin에서 제공되는 static file들은 public하게 접근 권한을 줘도 아무런 문제가 없다는 전제가 깔려 있다.

아직 public 하게 접근 가능한 object가 없을 수 있다. 권한 혹은 오브젝트 유무를 확인해본다.

해결책

아래처럼 버킷 정책을 넣어주면 보통 해결될 것이다.

{
    "Version": "2012-10-17",
    "Id": "PolicyForPublicWebsiteContent",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<버킷이름>/*"
        }
    ]
}

가능성 3: S3 버킷 작명 문제

css 등 요청 시, https로 요청하게 되는데, 버킷이름에 .이 들어가게 되면 인증서 패턴과 일치하지 않아서, 브라우저가 위험한 사이트로 판단, 해당 자원을 로드하지 않는다.

해결책

그냥 버킷에 "." 문자를 빼고 생성하자. 아주 잘 동작할 것이다.

해결 후, 최종 확인

새로고침 후, 정상동작하는 것을 확인할 수 있다.