S3, CloudFront, Lambda@Edge를 이용한 이미지 리사이즈(1) - Lambda@Edge란?

목차

 

 

 

 

 

회사 서비스에 도입하기 위해 서치하고 정리했던 내용 올려봅니다

기나긴 삽질의 기록들...

 

 

Lambda@Edge는 뭔가요?

Lambda@Edge는 AWS CloudFront의 기능 중 하나로, 

CloudFront의 다양한 이벤트에서 실행될 수 있는 람다입니다.

 

AWS CloudFront는 Edge Location(데이터 센터의 전 세계 네트워크)를 통해 콘텐츠를 제공하는데,

Lambda는 Region별로 생성할 수 있게 되어있습니다.

그렇다면 전 세계 Region에 똑같은 Lambda를 만들어주어야할까요?

이럴 때 사용하는 것이 Lambda@Edge입니다.

 

버지니아 리전(us-east-1)에 Lambda@Edge를 만들어두면

AWS가 알아서 해당 람다를 Edge Location으로 복제해줍니다.

따라서 사용자에게 가까운 람다가 실행되어 지연시간을 단축할 수 있고, 성능을 개선할 수 있습니다.

 

여기서는 실시간 이미지 리사이징에 람다 엣지를 사용해보려합니다!

 

 

 

예시상황

인스타그램 예시

서비스를 운영하다보면 하나의 원본 이미지를 UI에 맞추어 다야한 크기로 보여주어야하는 상황이 발생합니다.

 

현재의 이미지 처리 프로세스가 아래와 같다고 생각해 봅시다.

1. 원본 이미지(happy.jpg) S3에 저장

2. 사이즈 규격별로 이미지를 리사이징하여 S3에 저장

3. 클라이언트는 규격에 맞게 /happy_300x300.jpg를 호출 

 

여기서 문제점은 2가지입니다.

1. 원본 이미지 1개 + 사이즈 규격 N개= 총 N+1개의 이미지가 S3에 저장됨

2. 새로운 사이즈 규격이 생길때마다 원본 이미지를 찾아 리사이징 처리 후 S3에 저장해야함.

 

 

 

 

예시상황에 Lambda@Edge를 도입한다면?

1. S3에는 원본 이미지만 저장할 수 있음

2. 새로운 규격이 생겨도 쿼리스트링에 입력하는대로 이미지를 리사이징하니 문제 없음.

/happy.jpg?w=100&h=200

3. 한번 요청했던 데이터는 CloudFront에서 캐싱되기 때문에 빠른 응답 가능.

 

 

 

주의

아래에서 우리가 만들 이미지 리사이징 람다함수는

클라우드프론트에 캐싱 처리가 안되어있을 때만 실행되게 만들겁니다.

 

만약 캐싱처리가 안된 각기 다른 이미지를 10000개 요청하면 어떻게될끼요?

일반적으로 람다가 동시에 실행될 수 있는 개수는 1000개입니다.

다시말해 캐싱처리가 안된 이미지는 1000개까지만 동시에 처리가 가능합니다.

 

그래서 Lambda@Edge를 이용한 이미지 리사이징 작업은

서비스 이용이 낮은 시간대에 한번씩 배치를 돌려 캐싱 처리되게끔 처리하기도 한다네요..!

 

 

 

 

 

Lambda@Edge EventType

이벤트 유형 선택 가이드

• Viewer Request
  • 요청한 개체가 CloudFront 캐시에 있는지 확인하기 전에 람다가 실행된다.
  • 해당 이벤트에 람다를 트리거하면 CloudFront 캐시 여부에 관계없이 매 요청마다 람다가 실행된다.

 

• Origin Request
  • 요청한 개체가 CloudFront 캐시에 없을 때, 오리진으로 요청을 전달할 때 람다가 실행된다.
  • 요청한 개체가 CLoudFront 캐시에 있을 때는 실행되지 않는다.

 

• Origin Response << 해당 이벤트에서 원본 이미지 리사이징 처리!
  • 오리진으로부터 응답을 수신하고, 응답에서 개체를 캐시하기 전에 람다가 실행된다.
  • 오리진에서 오류가 반환된 경우에도 람다가 실행된다.

 

• Viewer Response
  • 요청한 개체를 사용자에게 반환하기 전에 람다가 실행된다.
  • 해당 이벤트에 람다를 트리거하면 CloudFront 캐시 여부에 관계없이 매 요청마다 람다가 실행된다.

 

 

 

 

 

결과 미리보기

원본이미지

요청 url : https://d39leqiptum1or.cloudfront.net/harry.jpg

사이즈 : 1058 * 1411

 

위의 원본이미지 url에 쿼리스트링을 붙여 실시간으로 이미지를 리사이징처리하고,

리사이징된 이미지가 캐싱처리되는지 확인해보자.

 

 

 

 

이미지 리사이징 최초요청

요청 url : https://d39leqiptum1or.cloudfront.net/harry.jpg?w=200

결과

• 사이즈 : 200 * 267
• x-cache : Miss from cloudfront (= CloudFront에 캐싱된 이미지가 존재하지 않아서 S3에서 이미지를 가져왔다.)
• 경과시간:  182.07ms

 

 

 

 

리사이징된 이미지 재요청

요청 url : https://d39leqiptum1or.cloudfront.net/harry.jpg?w=200

결과

• 사이즈 : 200 * 267
• x-cache : Hit from cloudfront (= CloudFront에 캐싱된 이미지가 존재하여 캐싱 데이터를 응답해주었다.)
• 경과시간: 8.23ms

 

 

 

 

작업 순서대로 따라하기

1. S3, CloudFront 셋팅
2. CloudFront 쿼리스트링 캐시 셋팅
3. IAM 역할 생성
4. Lambda@Edge 배포 셋팅 및 로그 확인
5. 리사이징 로직 작성 및 테스트

 

5번까지 하면 기본적인 이미지 리사이징 처리는 끝납니다.

이후 추가로 CloudFront를 Route53에 붙인다거나,

CloudFront 에러발생 시 기본이미지를 보여주도록 셋팅하거나 등의 작업도 가능합니다!