파일 관리 서비스 3 - S3 이미지 리사이징 서비스 만들기 (by. CloudFront, Lambda@Edge)

개요

웹 페이지 서비스에서 스토리지(S3)에 가지고, 사용하고 잇는 원본 이미지 크기가  720 x 360 라고 가정하자

하지만 페이지에 따라 640x360, 1200x600 등등 출력할 화면이 있다고 가정할 때.. (추후 2:1 비율의 다양한 이미지 사이즈가 추가 될 수 있음) 어떻게 효율적으로 관리 할 수 있을까?

 

접근 및 방법

1. 그냥 720x360 이미지를 활용하자니

-> 더 작은 이미지(320x160)를 호출하는 곳에서는 더 큰 이미지(720x360)를 불필요한 호출 리소스가 사용된다. 

 

2. 각 사이즈의 이미지를 만들어 올려놓자니

-> 크기가 바뀔 때마다 매번 관리(업로드) 해야 하고, 스토리지(S3)에 저장하는 것도 부담일 수 있음

 

관리 비용도 적게 들고, 스토리지도 효율적으로 사용하면서, 확장에도 유연하게 하게 하려면?

 

설계 

다음과 같은 구조로 설계 할 수 있고, 몇줄 요약하자면 다음과 같다.

• S3를 cloudfront에 배포해둔다. 
• 사용자가 이미지 요청(GET)시 쿼리 파라미터로 이미지 크기를 받는다. ex) ?w=320&h=160
• 이미지 요청이 왔을 때 원본 이미지 외에 리사이징이 필요한 CloudFront에 없는 이미지라면 Lambda(=Lambda@Edge)에서 이미지 리사이징을 한다. 
• resizing 된 이미지는 Lambda가 CloudFront에 재배포한다.
• 유저는 CloudFront의 이미지 정보를 응답 받고, 이후 (유저, 다른유저)요청시 CloudFront에 캐싱된 이미지를 응답 받는다.

 

https://aws.amazon.com/ko/blogs/networking-and-content-delivery/adding-http-security-headers-using-lambdaedge-and-amazon-cloudfront/

 

추가적인 스토리지(S3) 사용 없이,

GET 메소드의 이미지 파라미터로 다양한 크기에두 유연하게 대처가능 해지고

한번 CloudFront에 배포된 이미지는 캐싱되어

다양한 유저가 리사이징 이미지 요청시에도, 빠른 응답을 받을 수 있다.

 

 

설계 - Cloudfront 활용

유저 ~ CDN ~ S3의 구조는 다음과 같고,

CDN(Content Delivery Network) 서비스를 제공하는 AWS CloudFront의 주요 이벤트는 다음과 같다.

- Viewer Request, Origin Request, Origin Response, Viewer Response

- 위 이벤트 들 중에 하나에 trigger를 걸 수 있다 (ex. 람다 실행)

https://d2908q01vomqb2.cloudfront.net/5b384ce32d8cdef02bc3a139d4cac0a22bb029e8/2017/12/04/1-1.png

 

 

설계 - 상세 설명

설계 그림을 좀더 상세 하게 설명하면 다음과 같다.

https://aws.amazon.com/ko/blogs/networking-and-content-delivery/adding-http-security-headers-using-lambdaedge-and-amazon-cloudfront/

 

1. Viewer Request

- 사용자가 CloudFront 배포 도메인을 통해 요청을 보냅니다.

 

2. 캐시 조회: CloudFront 이 캐시에 요청된 콘텐츠가 있는지 확인

- 2.1 캐시 Hit : 캐시에 콘텐츠가 있으면 사용자에게 반환

- 2.2 캐시 Miss : 캐시에 콘텐츠가 없으면 오리진 서버(S3)로 요청

 

3. CloudFront 오리진 요청 (Origin Request)

- CloudFront가 요청된 파일을 가져오기 위해 S3 버킷으로 요청

 

4. S3 응답 (Origin Response, 오리진 응답)

- 오리진 서버(S3)가 콘텐츠를 반환합니다.

- S3 -> cloudfront에 HTTP 응답 정보, 파일 메타 정보와 객체를 전달

 

5. CDN 에서 응답 수신 후 → Lambda@Edge 함수 실행

- S3로 부터 응답을 받은 후, CloudFront는 이 응답을 Lambda@Edge 함수로 전달

- Lambda@Edge로 응답 정보(파일 위치 path), Http 정보 등 보냄 (파일 객체 x)

 

6. Lambda@Edge 실행

- 파일 객체는 Lambda 내부에서 S3 연결하여 다시 얻어옴

- Lambda@Edge 함수는 이 응답을 처리할 수 있으며, 필요에 따라 수정된 응답 혹은, Origin Response 그대로 반환 가능

- cloudfront 이벤트 - payload 예시 링크

 

7. Viewer Response: CloudFront가 사용자에게 콘텐츠를 반환

파일  간 꼭 모든 사항을 필수적으로 검증해야 하는 것은 아니고, 서비스에 맞게 하면됨.

 

*주의사항

- 추후 이미지 원본이 변경되는 경우 (생성/수정/삭제) CloudFront 까지 꼭 배포를 해주어야 한다!

 

참고 문서

• 당근마켓 백엔드 on-the-fly 방식
• Q. next.js 프레임워크는 자체적으로 이미지 최적화 기능을 해준다. 기능적 충돌은 없을지?
  - A. next.js는 위 내용을 자동적으로 해주는 것 맞음 (next.js 올리브영 테크블로그 설명)
  - A. 일반적으로 다른 FE 프레임워크 등 경우에는 on-the-fly 구현이 필요할 수 있음