[AWS] AWS CloudFront + Lambda@Edge 를 통한 이미지 리사이징

이전 글에서 Lambda를 활용하여 이미지를 리사이징 후 저장하는 방법에 대해 작성했습니다.

https://ryusunny.tistory.com/153

[AWS] S3 + Lambda 를 통한 이미지 리사이징 (macOS sharp 모듈 오류, 무한 리사이징 오류)

 

하지만 이 방법에는 두 가지 문제점이 존재합니다.

1. /origin 경로에 원본 이미지, /resized 경로에 리사이즈된 이미지가 S3에 저장되어 사용량이 증가합니다.
2. 클라이언트에서 필요한 이미지 사이즈가 변경되었을 경우(예: 썸네일 이미지 크기 스펙 변경), 원본 이미지를 다시 필요한 이미지의 사이즈에 맞게 리사이징 해야합니다.

 

CloudFront와 Lambda@Edge를 활용한 해결 방법

 

이 문제를 해결하기 위해 CloudFront와 Lambda@Edge를 활용하여 이미지를 요청 시점에 동적으로 리사이징하는 방식을 적용할 수 있습니다.

1. 사용자가 특정 크기의 이미지를 요청하면 CloudFront가 요청을 Lambda@Edge로 전달합니다.
2. Lambda@Edge는 S3에서 원본 이미지를 가져와 요청된 크기로 실시간 변환합니다.
3. 변환된 이미지는 CloudFront에 캐싱되므로 동일한 요청이 반복될 경우 Lambda@Edge의 리사이징 과정을 거치지 않고 즉시 응답할 수 있습니다.

이 방식은 불필요한 S3 스토리지 사용을 줄이고, 클라이언트에서 요청하는 이미지 크기가 변경되더라도 자동으로 대응할 수 있는 장점이 있습니다.

 

CDN(Content Delivery Network)

 

CDN(콘텐츠 전송 네트워크)은 전 세계 여러 위치에 분산된 서버 네트워크를 통해 웹 콘텐츠를 더욱 빠르고 안정적으로 제공하는 기술입니다. 일반적으로 웹사이트의 HTML, CSS, JavaScript, 이미지, 동영상 등의 정적 및 동적 콘텐츠를 캐싱하여, 사용자와 가장 가까운 서버(엣지 서버)에서 응답할 수 있도록 합니다.

 

 

CloudFront

Amazon CloudFront는 AWS에서 제공하는 CDN 서비스로, 전 세계의 엣지 로케이션(Edge Location)을 통해 정적 및 동적 콘텐츠를 빠르게 배포할 수 있도록 지원합니다.

 

 

특징

• 정적 및 동적 콘텐츠 제공
  • HTML, CSS, JavaScript, 이미지뿐만 아니라 API 응답, 실시간 스트리밍 등의 동적 콘텐츠도 지원
• 전 세계 엣지 로케이션 활용
  • 사용자의 요청이 지연 시간이 가장 낮은 엣지 로케이션으로 라우팅됨
• 캐싱 및 성능 최적화
  • 요청된 콘텐츠가 이미 캐시에 있으면 즉시 제공
• 보안 기능 제공
  • AWS WAF(Web Application Firewall), DDoS 방어, 암호화 기능 지원
• 오리진(Origin)과 연동
  • Amazon S3, MediaPackage, HTTP 서버 등 다양한 오리진에서 콘텐츠 제공 가능

 

CloudFront의 동작 방식

1. 사용자가 콘텐츠를 요청하면 CloudFront가 이를 처리한다.
2. 요청된 콘텐츠가 사용자의 가장 가까운 엣지 로케이션에 캐시를 확인한후 캐시되어 있으면 즉시 제공합니다.
3. 캐시에 없는 경우, CloudFront는 오리진(S3)에서 등에서 콘텐츠를 가져옵니다.
4.  엣지 로케이션에 가져온 콘텐츠를 일정 기간 동안 콘텐츠(캐시) 저장하여 이후 요청을 빠르게 처리합니다.

 

CloudFront의 장점

• 지연 시간 감소
  • 사용자의 가까운 위치에서 콘텐츠 제공
• 네트워크 부하 분산
  • 여러 엣지 로케이션에 분산하여 서버 부하 감소
• 보안 강화
  • AWS WAF, DDoS 방어, 암호화 등 다양한 보안 기능 제공
• 비용 절감
  • 원본 서버(오리진)로의 요청 횟수를 줄여 트래픽 비용 절감
• 높은 확장성
  • 트래픽 급증에도 안정적인 서비스 제공

---

Lambda@Edge

Lambda@Edge는 AWS Lambda의 확장된 컴퓨팅 서비스로, CloudFront의 엣지 로케이션(Edge Location)에서 실행되는 함수를 정의할 수 있습니다. 이를 통해 Lambda 함수가 전 세계의 엣지 로케이션에 복사되어 배포되며, 사용자는 가장 가까운 엣지 서버에서 실행되는 Lambda 함수를 이용할 수 있습니다.

이 방식은 웹 콘텐츠의 지연 시간을 줄이고 성능을 향상시키는 데 유용하며, 이미지 변환, 보안 헤더 추가, 사용자별 응답 최적화 등 다양한 용도로 활용할 수 있습니다.

 그래서 필자는 Lambda@Edge + Cloudfront를 활용하여 실시간으로 이미지 리사이징하는 가능을 구현했습니다.

 

 

---

 

CloudFront, Lambda@Edge 설정

https://blog.kmong.com/더-나은-사용자-경험을-위한-이미지-리사이징을-해보자-cffbb55b9d95

더 나은 사용자 경험을 위한 이미지 리사이징을 해보자

참고한 블로그입니다. 해당 블로그에 설정 과정에 대한 자세한 설명이 나와있습니다.

 

cloudwatch 로그를 위한 로그 정책을 포함한 정책입니다.

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "LambdaEdgePermissions",
			"Effect": "Allow",
			"Action": [
				"lambda:GetFunction",
				"lambda:EnableReplication*",
				"cloudfront:UpdateDistribution",
				"s3:GetObject",
				"s3:ListBucket",
				"logs:CreateLogGroup",
				"logs:CreateLogStream",
				"logs:PutLogEvents",
				"logs:DescribeLogStreams"
			],
			"Resource": "*"
		}
	]
}

 

 

Lambda 함수 코드

const sharp = require('sharp');
const aws = require('aws-sdk');

const s3 = new aws.S3({ region: 'ap-northeast-2' });
const BUCKET = 'iruyeon';

exports.handler = async (event, _, callback) => {
  const { request, response } = event.Records[0].cf;

  /** 쿼리 설명
   * w : width
   * h : height
   * f : format
   * q : quality
   * t : type (contain, cover, fill, inside, outside)
   */
  const querystring = request.querystring;
  const searchParams = new URLSearchParams(querystring);

  if (!searchParams.get('w') && !searchParams.get('h')) {
    console.log("No resizing parameters found. Returning original response.");
    return callback(null, response);
  }

  const { uri } = request;

  const match = uri.match(/\/?(.*)\.(.*)/);
  if (!match) {
    console.error("Invalid URI format:", uri);
    return callback(null, response);
  }

  const [, imageName, extension] = match;

  const width = parseInt(searchParams.get('w'), 10);
  const height = parseInt(searchParams.get('h'), 10);
  const quality = parseInt(searchParams.get('q'), 10) || DEFAULT_QUALITY;
  const type = searchParams.get('t') || DEFAULT_TYPE;
  const f = searchParams.get('f');
  const format = (f === 'jpg' ? 'jpeg' : f) || extension;
  
  try {
    const s3Object = await getS3Object(s3, BUCKET, imageName, extension);

    const resizedImage = await resizeImage(s3Object, width, height, format, type, quality);

    response.status = 200;
    response.body = resizedImage.toString('base64');
    response.bodyEncoding = 'base64';
    response.headers['content-type'] = [{ key: 'Content-Type', value: `image/${format}` }];
    response.headers['cache-control'] = [{ key: 'cache-control', value: 'max-age=31536000' }];

    return callback(null, response);
  } catch (error) {
    console.error("Processing error:", error);
    return callback(error);
  }
};

const DEFAULT_QUALITY = 80;
const DEFAULT_TYPE = 'contain';

async function getS3Object(s3, bucket, imageName, extension) {
  const key = decodeURI(`${imageName}.${extension}`);

  try {
    const s3Object = await s3.getObject({ Bucket: bucket, Key: key }).promise();
    return s3Object;
  } catch (error) {
    console.error("s3.getObject error:", error);
    throw error;
  }
}

async function resizeImage(s3Object, width, height, format, type, quality) {

  try {
    const resizedImage = await sharp(s3Object.Body)
      .resize(width, height, { fit: type })
      .toFormat(format, { quality })
      .toBuffer();

    return resizedImage;
  } catch (error) {
    console.error("resizeImage error:", error);
    throw error;
  }
}

 

 

이후, CloudFront Domain Name으로 접속하여 원하는 query를 설정 후 x-cache 헤더를 확인합니다.

x-cache 확인하는 방법 (크롬)

1. 개발자 도구 열기 (F12 또는 Ctrl + Shift + I (Mac: Cmd + Option + I)
2. 상단 메뉴에서 Network(네트워크) 클릭
3. 상단의 Img(이미지) 필터 클릭
4. 해당 이미지 선택
5. Headers(헤더) 탭 클릭
6. x-cache 항목을 찾으면, 해당 값이 Hit/Miss/Expired인지 확인 가능

 

 

x-cache 값의 의미

Hit from cloudfront	CloudFront 캐시에서 제공됨 (캐싱 성공)
Miss from cloudfront	CloudFront 캐시에 없음 (새 요청)
Expired from cloudfront	캐시 만료 후 새 요청 수행
RefreshHit from cloudfront	캐시된 객체를 새로고침

 

 

[속도 비교]

최초 요청 시 CloudFront에 캐시가 존재하지 않으므로, 오리진인 S3에서 원본 이미지를 가져와 Lambda@Edge가 리사이징을 수행한 후 적절한 이미지를 반환합니다.

 

이후 동일한 요청이 들어오면 CloudFront에 캐싱된 이미지를 즉시 제공하여 응답 시간을 단축합니다.

 

 

 

 

 

[참고]

https://wired.company/blog_original/?bmode=view&idx=15848347

CloudFront와 AWS Lambda@edge를 활용한 이미지 최적화 : 와이어드컴퍼니

https://medium.com/@115taegyeong/image-resizing-d4cea1b1ba55

Lambda@Edge Image Resizing