[AWS] S3 Storage 활용한 이미지 저장

 

이번 유화제작 프로젝트에서 이미지를 유화스타일로 변경하여 저장하는 기능이 있는데 이전 프로젝트 처럼 백엔드와 프론트엔드 파일이 하나로 되어있지 않고 분리되어서 작업이 진행이 되기도 하고, 로컬 파일이나 프로젝트 파일에 이미지가 저장되게 되면 EC2에 배포했을때, 유저가 많아졌을때 서버용량에는 한계가 있다고 생각을 해서 S3로 저장을하고 이미지를 가져오는 방식으로 진행을 했다. 

 

 

우선 AWS에서 S3를 검색하고 버킷페이지로 온다.

 

버킷페이지에서 버킷생성을 누르게 되면 보이는 설정사항들이다.

버킷이름은 프로젝트 이름이랑 비슷하게 프로젝트+bucket 이나 images 이렇게 지으면

알기 쉬울것 같아서 네이빙은 그렇게 했다.

 

이 버킷에 관한 소유권을 지정하는 부분인 것같다. 일단은 S3에서 작업을 나만 하니까 권장으로 되어있는

ACL 비활성화로 지정을 했다.

 

이부분은 퍼블릭 액세스에 대한 설정이다. 일반적으로는 모든 퍼블릭 액세스 차단을 사용하는데 버킷을 통해 static파일에 대한 호스팅을 진행하는 경우에는 다른 옵션을 선택해야 한다고 한다. 세부적인 사항들은 복잡하고,  문서도 영어로 되어있어서 이해하는게 사실 좀 어려운 것 같아서 공부를 해봐야 될 부분 인 것 같다..

 

https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-control-block-public-access.html

Blocking public access to your Amazon S3 storage - Amazon Simple Storage Service

 

나머지 설정들은 기본적으로 설정된 것으로 놔두고 버킷을 생성했다. 그러면 조금 시간이 지나면 

방금 설정한대로 버킷이 새로 하나가 생성된다.  이제 따로 버킷정책을 설정을 하고 백엔드 프론트가 분리되었으니 

CORS 세팅도 같이 해준다. Action에 이제 S3에서 어떠한 작업들을 할것인지에 대한 설정으로 보인다.

우선은 GET과 PUT이 필요하지만 다른부분들도 추후에 필요하게 될지도 몰라서 일단은 넣어놨다.

 

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "S3statement",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:PutObject",
                "s3:GetObjectAcl",
                "s3:GetObject",
                "s3:ListBucket",
                "s3:DeleteObject",
                "s3:PutObjectAcl"
            ],
            "Resource": [
                "arn:aws:s3:::naegrimfarmpictures/*",
                "arn:aws:s3:::naegrimfarmpictures"
            ]
        }
    ]
}

 

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]

CORS세팅은 S3와 통신하는 메소드를 지정해주고 Origin도 지정을 해준다. 

원래는 Origin도 지정을 해줘야하지만, 도메인 URL이나 백엔드 서버가 아직 배포되어있지 않아서 *로 전부 허용해놓고 

설정을 마무리했다.

settings.py에서도 액세스키나 세부적인 세팅들을 하고 필요한 모듈들도 설치하고 이것들을 마치고 나면 이렇게

이미지들이 내가 원하는 폴더안에 원하는 이름으로 잘 저장이 되고 프론트에서도

그 url을 가지고 이미지들을 잘 보여주는 모습을 볼 수 있다.

참고 : 구글검색 <django s3와 연동하기>

 

 

그전 프로젝트때는 RESTful하게 프론트 백을 나누지 않아서 S3를 사용해보지 않았다 보니 얼마나 좋은지에 대한 감이 없었는데, 이번 프로젝트때 프론트와 백을 나누고 이미지 저장소도 따로 두게되니, 이미지를 가져오는 속도도 빠르고 프로젝트 파일에 많은 양의 데이터가 저장되는게 아니다 보니 배포 서버에서도 부담이 덜하다는걸 몸소 느꼈던 것 같다. serializer에서 object.image.url 로 쿼리해서 url을 리턴 할 수 있는 부분도 정말 편리했고 S3와 무사히 연동이 되어 프로젝트 진행에 차질이 없어서 좋았다. 앞으로는 매 프로젝트마다 무조건 사용을 하게 될 것 같다.