Lambda@Edge를 활용한 이미지 리사이징

Lambda@Edge 를 활용한 이미지 리사이즈 

각 단말기에 적합한 이미지를 내려주기 위해 고민하다 모든 사이즈를 저장하는 것은 비용과 서버에 부담이 있어 불필요하다 판단하여 요청 시에만 생성하여 제공해 주려 Lambda@Edge를 도입해서 이미지 리사이즈를 구현했다.

친절하게 AWS 블로그에 이미지 리사이즈 구현 포스팅이 있어 많은 참고를 할 수 있었고 생각보다 간단하여 기본적인 건 빠르게 구현하였다.

** Lambda@Edge : Cloudfront에서 제공하는 콘텐츠를 사용자가 지정하여 Lambda 함수 실행할 수 있는 서비스

현재 람다 엣지는 US East (N. Virginia)에서만 제공되고 있음.

CloudFront 이벤트로 사용한 건 Viewer Request(최종 사용자로부터 요청을 수신한 경우)와 Origin Response(오리진으로 응답을 수신한 경우) 가 되겠다. Viewer Request 이벤트에서 CloudFront에 캐싱된 데이터가 없으면 S3 서버(Origin)을 Fetch하게 되는 데 이 곳에도 없을 경우에 람다가 생성하여 Origin에 이미지를 저장시켜주는 식의 흐름이다.

자세한 건 아래 URL과 이미지를 참고하면 자세한 설명이 적혀있다.

현재 구현할 서비스의 필요한 해상도는 S/M/L/XL 정도가 되겠다. 

CloudFront에 파라미터명을 설정해주고 (*.jpg?d=s) 들어오는 사이즈에 따라 이미지 사이즈를 변경해 S3에 올리게끔 처리했다.

이미지 리사이즈엔 node.js에서 퍼포먼스가 좋아 많이 사용하고 있는 sharp 라이브러리를 사용하였다. 

HEIF도 지원이 필요한 데 곧 제공될 예정이지만 현재는 아니라 기다리고 있는 중이다.

  S3.getObject({ Bucket: BUCKET, Key: originalKey }).promise()
      .then(data => Sharp(data.Body)
        .resize(width)
        .toFormat(requiredFormat)
        .toBuffer()
      )
      .then(buffer => {
        S3.putObject({
            Body: buffer,
            Bucket: BUCKET,
            ContentType: 'image/' + requiredFormat,
            CacheControl: 'max-age=31536000',
            Key: key,
            StorageClass: 'STANDARD'
        })

AWS 블로그에서 제공되고 있는 소스이니 잘 가져다 구현하면 된다.

https://{BUCKET_URL}/images/805656.png?d=s 와 같이 요청하면 해상도별로 S3에 구분한 경로에 저장이 된다.

요청이 들어오는 User-Agent에 따라 이미지 확장자를 분기해 줄 수 있으니(이를테면 안드로이드는 webp로 iOS는 HEIF) 해당 부분도 추가로 구현할 예정이다.

Lambda를 통해 특정 기능을 구현한 적은 처음이었는 데, 생각보다 간단하게 환경을 구성하지 않고 금방 개발할 수 있었다. 

중요한 서비스엔 부하가 가지 않게 하기도 하고 빠르게 구현할 수 있었는 데 운영하면서 발생하는 이슈는 몸소 겪어볼 예정이다. 

또한 얼마나 효율적으로 사용되는 지는 서비스를 런칭해서 사용해보고 리포트를 분석해야할 듯 하다. Request 하는 횟수에 따른 비용(백만 번은 무료인 Lambda와 다르게.. 사용하는 만큼 비용을 지불해야하기 때문에)과 Hit는 얼마나 되는 지와 모든 단말기의 해상도 파일이 필요하지 않을 거라 추측만 했을 뿐이라 실제로 비용적인 면 등을 면밀히 살펴봐야할 듯 하다.

참고 URL :

https://aws.amazon.com/ko/blogs/networking-and-content-delivery/resizing-images-with-amazon-cloudfront-lambdaedge-aws-cdn-blog/

https://github.com/kimsejun2000/lambdaedgedims/blob/master/4.%20Lambda%40Edge%20%EA%B5%AC%EC%84%B1.md