s3와 cloudfront 연동하기

현재 토이프로젝트를 하면서 S3에 사진을 올려두고, 이 사진을 Client가 바로 S3를 통해서 접근할 것이냐. 

아니면, 내 서버를 한번 거쳐서 이미지에 접근할 것인가 하는 고민이 있었다. 

 

생각1 : Client가 바로 S3에 접근하여 이미지를 받아온다.! 근데, 뭔가 바로접근하자니 뭔가 찝찝함.

 

생각2 : Client가 개인 API를 경유하여 이미지를 받아온다.! 근데, 중간에 뭔가 손이 많이감.. 이로인한 추가 네트워크 리소스도 잡아먹는거 아닐까 하는걱정..

 

그러던 어느날 퇴근전 팀원분과 이런저런 이야기를 나누며 수다를 떨던중. 위의 고민을 넌지시 말해보았는데 

CloudFront라는것을 추천해주셨다.  

 

요즘세상 키워드만 알면 전지전능한 ChatGPT가 설명해주니, CloudFront에 대해 물어보면 아래와 같다.

 

 

뭔가, 중간에서 캐시역할을 하는듯하다. 또한, S3에서 CloudFront에 대한 접근설정을 하면 보안적인면도 증가되지 않을까 싶다.

 

 

CloudFront 생성

 

 

우측 상단의 배포생성 버튼을 클릭한다.

 

 

원본 도메인을 클릭하고, s3관련된 것으로 보이는 도메인을 클릭한다!! 

그리고 원본 액세스는 Legacy access identities를 클릭하고, 원본 액세스 ID는 s3관련된 것으로 보이는것 클릭!!! 

그리고 새 OAI 생성을 누른다.

 

 

 

그리고 아래의 캡쳐본들은 그냥 기본값을 설정하였는데, 혹시모르니 캡쳐를 떠두었다. 

아참, 여기는 둘중 하나 선택해야 했는데, 그냥 보안보호 비활성화를 선택하엿따.

 

아래는 그냥 기본값!! 

 

 

 

 

생성된 CloudFront에서 상단의 원본페이지에 들어가서 Origin access를 보면 아래와 같이 써져있는데, OAI값이 써져있을 부분을 복사한 후, s3 버킷페이지로 넘어간다.

 

origin-access-identity/cloudfront/<OAI값>

 

 

 

권한페이지를 클릭한다!!! 

 

권한페이지에서 편집 버튼을 누르고, 아래의 값에 OAI값을 넣고, 버킷명 부분에는 버킷의 이름을 적어넣으면 끝! 

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontAccess",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity <OAI값>"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<버킷명>/*"
        }
    ]
}

 

 

CloudFront의 배포 도메인 이름을 복붙하여 브라우저에서 s3버킷에 접근해보면 잘 되는지 확인할 수 있다.

 

접근방법

<배포 도메인 이름>/<버킷내의 객체경로>