블로그 릴레이 - CloudFront Functions 사용해보기

안녕하세요! 제조 비즈니스 테크놀로지부의 이병현입니다.

본 블로그는 당사의 한국어 블로그 릴레이의 2025년 29번째 블로그입니다.
이번 블로그의 주제는 「CloudFront Functions 사용해보기」 입니다.

CloudFront Functions란?

CloudFront Functions는 Amazon CloudFront에서 제공하는 경량 서버리스 컴퓨팅 서비스입니다. JavaScript(ES5.1)로 작성된 코드를 실행하여 사용자 요청을 실시간으로 처리하고 수정할 수 있습니다.

주요 특징:

• 간단한 URL 재작성, 헤더 수정에 특화
• JavaScript(ES5.1) 호환
• 외부 HTTP 호출 불가능

공식문서에도 자세한 내용이 포함되어 있으니 참고해주세요.

• Amazon CloudFront Functions — 더 짧은 지연 시간으로 엣지에서 코드 실행을 위한 신규 기능 | Amazon Web Services 한국 블로그

언제 사용할까요?

CloudFront의 요청을 수정하고 싶은 경우 유용합니다. 예를 들어, 특정 URL 요청을 조건에 따라 다른 파일로 매핑하거나, 헤더를 추가/수정하는 등의 작업이 가능합니다.

실제 사용 사례:

• 레거시 애플리케이션이 고정 URL로 요청하지만, 시간이나 조건에 따라 다른 파일을 보여주어야 하는 경우
• 클라이언트 재배포 없이 A/B 테스트를 진행해야 하는 경우
• CDN 캐시는 유지하면서 다른 파일을 제공해야 하는 경우
• 등등..

실제 구현 예제

이번 블로그에서는 CloudFront Functions를 사용해 클라이언트에서 바라보는 이미지 URL을 변경하여 랜덤하게 이미지를 제공하는 예제를 다뤄보겠습니다.

배포로는 AWS CDK를 사용합니다. 전체 코드는 아래 레포지토리를 참고해주세요.

• cloudfront-functions-example

CloudFront Functions 코드

예를 들어, 페이지에서 배너를 표시하고 있고, 클라이언트를 수정할 수 없다고 가정해 보겠습니다. 그러면 아래와 같이 해당 배너 이미지의 uri를 CloudFront Functions가 대신해서 랜덤한 이미지로 바꿔 전달할 수 있습니다.

function handler(event) {
    var request = event.request;
    var uri = request.uri;

    if (uri === '/banner.png') {
        var imageCount = 3;
        var randomIndex = Math.floor(Math.random() * imageCount) + 1;
        request.uri = '/images/banner' + randomIndex + '.png';
    }

    return request;
}

AWS CDK 구성

AWS CDK로는 아래와 같이 CloudFront Functions 코드를 불러와 생성하고, CloudFront Distribution에 연결합니다.

// CloudFront Function 코드 불러오기
const functionCode = fs.readFileSync(
  path.join(__dirname, '../lambda/viewer-request-function/index.js'), 
  'utf8'
);

// CloudFront Function 생성
const viewerRequestFunction = new cloudfront.Function(this, 'ViewerRequestFunction', {
  code: cloudfront.FunctionCode.fromInline(functionCode),
});

// CloudFront Distribution에 적용
const distribution = new cloudfront.Distribution(this, 'Distribution', {
  defaultBehavior: {
    origin: origins.S3BucketOrigin.withOriginAccessIdentity(bucket, { originAccessIdentity: oai }),
    cachePolicy: cloudfront.CachePolicy.CACHING_OPTIMIZED,
  },
  additionalBehaviors: {
    '/banner.png': {
      origin: origins.S3BucketOrigin.withOriginAccessIdentity(bucket, { originAccessIdentity: oai }),
      cachePolicy: cloudfront.CachePolicy.CACHING_DISABLED,
      functionAssociations: [{
        function: viewerRequestFunction,
        eventType: cloudfront.FunctionEventType.VIEWER_REQUEST,
      }],
    },
  },
});

본 예제에서는 CloudFront를 생성하여 CloudFront Functions를 연결하였지만, 이미 CloudFront가 존재하는 경우에는 CloudFront Functions 만 추가하고 AWS CLI나 콘솔에서 연결할 수 있습니다.

// CloudFront Function 코드 불러오기
const functionCode = fs.readFileSync(
  path.join(__dirname, '../lambda/viewer-request-function/index.js'), 
  'utf8'
);

// AWS CDK에서는 CloudFront Functions만 생성
const viewerRequestFunction = new cloudfront.Function(this,
  'ViewerRequestFunction', {
    code: cloudfront.FunctionCode.fromInline(functionCode),
  });

// 이후, AWS CLI나 콘솔에서 기존 CloudFront에 연결

실제 동작

아래처럼, 실제로는 banner.png로 요청하지만, CloudFront Functions가 이를 가로채서 랜덤한 이미지를 제공하는 것을 확인할 수 있습니다.

Lambda@Edge로는 안될까요?

Lambda@Edge도 CloudFront 요청을 수정할 수 있는 기능을 제공합니다. 하지만 Lambda@Edge는 더 복잡한 로직이나 외부 API 호출이 필요한 경우에 적합합니다. 반면, CloudFront Functions는 간단한 요청 수정에 최적화되어 있어, 빠르고 저렴하게 사용할 수 있습니다.

공식문서에도 자세한 내용이 포함되어 있으니 참고해주세요.

• CloudFront Functions와 Lambda@Edge 간 차이점 - Amazon CloudFront

마무리

CloudFront Functions는위 처럼 기존의 CloudFront 요청을 간단히 수정할 수 있는 서비스입니다. 물론, 실제 클라이언트나 서버의 코드를 변경 시키는게 더 근본적인 해결책이 될 수도 있지만, 위와 같이 특정 케이스에서는 고려해보는 것도 방법일 것 같습니다.

추가적으로 이미지의 경우 브라우저에 따라, 디스크 혹은 메모리 캐시에 히트하는 경우도 있기 때문에 더 동적으로 보여줘야하는 경우는 추가적으로 고려할 것 들이 존재합니다!

이상, 한국어 블로그 릴레이의 2025년 29 번째 블로그 「CloudFront Functions 사용해보기」 편이었습니다. 다음 30 번째 블로그 릴레이는 8월 다섯번째 주에 공개됩니다.

끝까지 읽어주셔서 감사합니다! 이상, 제조 비즈니스 테크놀로지부의 이병현이었습니다.

문의 사항은 클래스메소드 코리아로!

클래스메소드 코리아에서는 다양한 세미나 및 이벤트를 진행하고 있습니다.
진행중인 이벤트에 대해 아래 페이지를 참고해주세요.

https://classmethod.kr/board/library

AWS에 대한 상담 및 클래스 메소드 멤버스에 관한 문의사항은 아래 메일로 연락주시면 감사드립니다!
Info@classmethod.kr