Skip to content

이미지를 위한 S3와 Cloudfront 설정하기

sᴏʟʙɪ ☔️ edited this page Oct 14, 2023 · 3 revisions

펀잇 서비스에서는 사용자들이 리뷰 및 꿀조합 작성시 업로드하는 이미지를 관리하게 된다.

이미지 수가 많아지게 된다면 서버에 부하가 일어나게 된다. 특히 우리 서비스는 리뷰와 꿀조합 모두 사진을 업로드 하기 때문에 관리하는 이미지 수가 많아지게 되었다. 또한, 서버에서 로깅을 할 때 멀티파트 파일 직렬화가 안 되어서 로깅하기가 힘들다는 점도 있다.

이러한 이유로 이미지 파일을 서버에서 관리하기 힘들다고 판단했고 이미지를 S3 버킷에 저장, CDN 서비스인 Cloudfront를 이용해 이미지를 제공하기로 결정했다.

CDN을 적용하고, 한 번 요청한 리소스는 CDN 캐시에서 불러와야 한다.

S3 버킷 생성하기

우리 프로젝트는 이미 만들어진 우테코의 s3 버킷에 업로드 하게 된다.

이 아래에 우리 프로젝트 폴더를 만들어주면 된다.

우리는 s3에 이미지만 업로드 할 예정이라 prod와 dev 폴더를 생성하여 개발/배포 환경의 이미지 폴더를 나눠줬다.

스크린샷 2023-09-04 오후 3 38 04 스크린샷 2023-09-04 오후 3 37 25

그리고 정책도 작성하도록 하자.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::버켓이름/*"
        },
        {
            "Sid": "2",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity EASDHYW63ZV4D"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::버켓이름/*"
        }
    ]
}

이렇게 하면 s3 버킷을 만드는 것은 끝이 난다.

Cloudfront 생성하기

스크린샷 2023-09-06 오후 5 21 53

위의 방법처럼 버킷 아래에 폴더를 만들었다면 만든 s3 버킷을 연결하고 원본 경로를 설정해준다.

하단의 원본 액세스를 설정해주지 않는다면 access denied라는 화면을 볼 수 있다.

스크린샷 2023-09-06 오후 5 25 28

그리고 이제 SSL 인증서를 선택해야 하는데 아직 인증서가 없기 때문에 먼저 배포를 생성해두고 ACM을 통해 SSL 인증서를 받아와야 한다.

밑에 옵션은 기본으로 유지했다.

ACM을 통해 SSL 인증서 발급받기

우리는 가비아를 통해 도메인을 구입했다.

구리고 구매한 도메인을 기반으로 ACM에서 SSL 인증서를 요청한다.

스크린샷 2023-09-06 오후 5 29 59

요청을 보내게 되면 CNAME 값이 발급되지만 인증서는 대기중일 것이다.

그 다음에 다시 가비아로 이동해서 인증서에서 받은 값들을 추가해준다.

스크린샷 2023-09-01 오후 4 54 09

혹시 몰라 마스킹을 했는데 여기 호스트에는 발급받은 인증서의 CNAME 이름과 CNAME 값을 입력하면 된다.

또한 우리는 대체 도메인 이름을 사용할것이기 때문에 image 호스트 이름도 추가해줬다.

스크린샷 2023-09-06 오후 5 37 55

그리고 1, 2분을 기다리게 되면 발급됨 상태로 변한다. (1, 2분이 지나도 변하지 않는다면 잘못 설정한 것이니 설정을 잘 살펴보자.)

다시 클라우드프론트 설정으로 돌아와서 대체도메인을 쓴다면 입력해주고 SSL 인증서를 연결해주면 끝이다.

스크린샷 2023-09-06 오후 5 39 58

마지막으로 s3 버킷에 사진을 업로드 해보고 도메인 이름/이미지파일 경로를 쳐봤을 때 사진이 뜨면 성공이다!

스크린샷 2023-09-06 오후 5 48 57

🔐 공통

🔑 프론트엔드

🔒 백엔드

📝 회의록

🤩 데모데이

Clone this wiki locally