S3 vs S3 + CloudFront 이미지 조회 속도 비교 테스트

현재 팀 프로젝트 서비스는 게시글에 이미지를 첨부할 수 있다.

우테코의 정책으로는 S3에 저장되어있는 객체는 CloudFront로만 조회할 수 있었다.

그래서 처음 인프라 설계 자체를 S3 + CloudFront 구성으로 했다.

그런데 문득, S3에 있는 이미지를 바로 조회할 때와, CloudFront를 통해 조회할 때

성능이 얼마나 차이 나는지 궁금해, 테스트해 보기로 했다.

CloudFront란?

CloudFront는 CDN이다.

AWS S3에 저장되어 있는 이미지 등의 정적 파일을 엣지 로케이션이라고 하는 분산되어있는 데이터 센터에 캐싱해 둔다.

사용자가 요청을 보내면, 원본 이미지 파일이 있는 AWS S3 서버까지 도달할 필요 없이, 요청 위치부터 가장 가까운 엣지 로케이션에 있는 이미지 파일을 가져온다.

그러면, 이미지를 조회하는 데 걸리는 시간을 줄일 수 있다.

S3에서 이미지를 바로 조회할 수 있도록 설정

우선, 지금 성능 개선을 위해 구성되어있는 인프라는

우테코에서 교육용으로 제공한 AWS 환경이다.

이 환경에서는 우테코 정책상 S3에서 바로 이미지를 조회할 수 없고,

무조건 CloudFront를 통해서만 조회할 수 있다.

따라서, 개인 계정을 사용해 테스트해야 한다.

S3 버킷 생성 및 권한 설정

AWS에 개인 계정으로 로그인해서 S3 콘솔에 접속한 후, 버킷 만들기를 누른다.

• 버킷 이름을 입력한다.
• 모든 퍼블릭 액세스 차단의 체크박스를 해제한다.
  • 그러면 맨 아래의 체크박스 부분이 생기는데, 체크한다.
• 맨 아래로 가서 버킷 만들기 클릭

외부에서 S3의 이미지를 읽어갈 수 있도록 오픈하고, 업로드는 AWS의 IAM 역할을 통해 제한을 둘 것이다.

방금 생성한 버킷 이름을 클릭하고, 권한 탭으로 들어간다.

버킷 정책 항목의 편집 버튼을 누른다.

버킷 정책 편집 항목에서

• 버킷 ARN 복사
• 정책 생성기 버튼 클릭

Add Statement 버튼을 누르면 아래와 같은 내용이 밑에 나온다.

입력한 내용들을 확인하고, Generate Policy 버튼을 클릭한다.

그러면 위와 같이 JSON 형태의 정책이 생성되는데, 모두 복사한다.

S3 버킷 정책 편집 창으로 돌아와, 복사한 JSON 형태의 정책을 붙여넣고, 변경사항 저장을 누른다.

IAM 사용자 권한 생성

AWS의 IAM 대시보드에 접속한다.

메뉴에서 사용자 탭을 클릭하고, 사용자 추가 버튼을 누른다.

사용자 이름은 아무거나 입력해도 된다.

꼭 해주지 않아도 되지만, 나는 태그에 Name 값을 입력했다.

내용을 검토하고, 사용자 만들기 버튼을 누른다.

위와 같이 엑세스 ID, 비밀 엑세스 키가 나온다.

이 값들은 이 창에서만 볼 수 있으니, 메모장 등에 적어놓자.

이 두 값이 있어야 S3에 객체를 업로드 하는 등의 접근을 할 수 있다.

S3에 테스트용 이미지 업로드

CloudFront에 성능 테스트 및 개선을 위해 저장되어있는 이미지를 이 S3에 업로드하겠다.

앞에서 생성한 S3에 접속해, 업로드 버튼을 누른다.

업로드할 이미지를 드래그&드롭한 후, 업로드 버튼을 눌러 업로드한다.

퍼블릭 엑세스 차단을 풀어놓았기 때문에, https://taehee-kim-dev-s3-bucket.s3.ap-northeast-2.amazonaws.com/inbi-test-image.jpeg를 브라우저 주소창에 입력하면 이미지를 볼 수 있다.

CloudFront vs S3 이미지 조회 성능 비교

이제, 같은 이미지를 CloudFront로 조회하는 것과, S3에서 조회하는 것의 속도를 비교해보자.

동일한 환경에서 진행하기 위해, DB에서 값을 수정하겠다.

첨부된 이미지가 2개 존재하는 게시물 중에, id가 19968인 게시물로 테스트를 해 보겠다.

두 이미지 중 한 이미지의 URL을 방금 S3에 업로드한 이미지의 URL(https://taehee-kim-dev-s3-bucket.s3.ap-northeast-2.amazonaws.com/inbi-test-image.jpeg)로 수정하겠다.

Image 테이블의 모습이다.

post_id 19968인 게시글에 이미지가 2개 있다.

한 이미지는 CloudFront를 통해 조회된다. (inbi-test-4mb-image.jpeg)

다른 한 이미지는 S3에서 조회된다. (inbi-test-image.jpeg)

:bangbanb: 이미지의 이름은 용량 등과 아무 상관이 없으니 신경 쓰지 말자.

이제 id가 19968인 게시글의 이미지 로딩 시간을 크롬 개발자도구의 Network 탭을 통해 확인해 보자.

캐싱 되어있는 이미지를 가져오면 0ms가 나오니, 크롬 개발자도구를 켠 상태에서 캐시 비우기 및 강력 새로고침을 누르자.

네트워크 상황에 따라 결과는 매번 달라졌지만, 가장 평균적이라고 생각하는 결과를 캡처했다.

이미지 파일 이름	조회 방식	조회하는 데 걸린 시간
inbi-test-image.jpeg	S3에서 바로 조회	97ms
inbi-test-4mb-image.jpeg	S3에 저장되어 있는 것을 CloudFront를 통해 조회	74ms

평균적으로 위와 같은 결과가 나왔다.

계산해 보면, 74ms / 97ms = 0.76 다.

즉, CloudFront를 통해 조회하는 것은 S3에서 조회하는 것보다 약 23% 정도 시간이 더 적게 걸린다.

참고자료

• [Spring] Spring Boot AWS S3 사진 업로드 하는 법