TodoList 25편 - AWS S3 정적 이미지와 CSS 파일 적용

AWS S3 정적 이미지와 CSS 파일 적용

이전 포스팅에서,

S3 를 사용해 보았는데, 그전까지 잘 보이던 CSS 와 이미지 파일들이 보이지 않았습니다.

이미지와 CSS가 적용되지 않은 사이트를 보게되니, 살짝 당황 했었습니다.

아래 두가지 사유로 인해서, 적용이 되지 않는다는것을 알아냈습니다.

경로
권한 (엑세스 설정)

경로 (settings.py 파일에 S3관련 세팅 재확인)

정적파일이 있는 URL 을 잘 찾을수 있도록, 경로를 다시 한번 확인해 줍니다.

# django-storages
# django FIleStorage로 S3Boto3Storage (AWS S3) 사용 
SECRETS = json.load(open(os.path.join(BASE_DIR, 'secrets.json'), 'rt'))
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3BotoStorage'
AWS_ACCESS_KEY_ID = SECRETS['AWS_ACCESS_KEY_ID']
AWS_SECRET_ACCESS_KEY = SECRETS['AWS_SECRET_ACCESS_KEY']
AWS_STORAGE_BUCKET_NAME = 'todolist-djangojenge'
AWS_S3_REGION_NAME = 'ap-northeast-2'
AWS_S3_CUSTOM_DOMAIN = '%s.s3.%s.amazonaws.com' % (AWS_STORAGE_BUCKET_NAME, AWS_S3_REGION_NAME)
AWS_AUTO_CREATE_BUCKET = True
AWS_DEFAULT_ACL = 'public-read'
AWS_S3_OBJECT_PARAMETERS = {'CacheControl': 'max-age=86400'}


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')
AWS_LOCATION = 'static'

# 필자의 경우, 아래 STATIC_URL 이 'https://%s/' %(AWS_S3_CUSTOM_DOMAIN) 으로만 되어 있었음
# S3에 있는 정적파일들의 Full 주소는, 아래 조합과 같음. 
STATIC_URL = 'https://%s/%s/' % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION) 

STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]


# MEDIA_ROOT 설정 
# user-uploaded static files 의 기본 경로 
MEDIA_ROOT = os.path.join(BASE_DIR, '.media')
MEDIA_URL = '/media/'

참고로, secrets.json 파일은, 프로젝트 폴더 내에 존재하는 json 파일로,

이 파일에 AWS_ACCESS_KEY 값과, AWS_SECRET_ACCESS_KEY 값이 json 형태로 저장되어 있습니다.

이를, json.loads 를 사용하여, settings.py 파일에 적용해 줍니다.

권한 (엑세스 설정)

기본적으로, S3 버킷은, private 으로 설정이 되어 있어서,

그냥 정적파일을 읽어 오려 하면, 안 읽어 집니다.

따라서, S3 버킷 접근 속성을, Public 으로 바꾸어줘야.

서버를 실행 시켰을때, 정적파일들을 읽을수 있게 되어, 이 파일들을 이용해서 화면에 렌더해줄수 있습니다.

아래 사이트에 아주 자세히 나와 있어서, 참조하고 권한을 고쳐주면 됩니다.

https://www.simplified.guide/aws/create-public-s3-bucket

마치며..

S3 적용후에, 정적파일들이 적용 되지 않아서 당황했었지만,

다행히, 에러를 해결할수 있었습니다. 이제 정적파일들과 미디어 파일들은, 로컬 위치가 아닌, S3에서 불러 옵니다.

S3 에서 불러와도 로컬에서 불러온것처럼, 잘 적용되고 표시되는것을 확인할수 있었습니다.