Blog Relay - Trying Out CloudFront Functions

Hello! I'm Lee Byung-hyun from the Manufacturing Business Technology Department.

This blog is the 29th blog in our Korean blog relay for 2025.
The topic of this blog is "Using CloudFront Functions".

What is CloudFront Functions?

CloudFront Functions is a lightweight serverless computing service provided by Amazon CloudFront. It executes code written in JavaScript (ES5.1) to process and modify user requests in real-time.

Key features:

• Specialized for simple URL rewriting and header modification
• JavaScript (ES5.1) compatible
• Cannot make external HTTP calls

Please refer to the official documentation for more details.

• Amazon CloudFront Functions — New feature to run code at the edge with lower latency | Amazon Web Services Korea Blog

When to use it?

It's useful when you want to modify CloudFront requests. For example, you can map specific URL requests to different files based on conditions, or add/modify headers.

Real use cases:

• When legacy applications request fixed URLs, but you need to show different files based on time or conditions
• When you need to conduct A/B testing without client redeployment
• When you need to serve different files while maintaining the CDN cache
• And more...

Implementation Example

In this blog, we'll cover an example of using CloudFront Functions to change the image URL that the client sees to provide random images.

We'll use AWS CDK for deployment. Please refer to the repository below for the complete code.

• cloudfront-functions-example

CloudFront Functions Code

For example, let's assume you're displaying a banner on a page and can't modify the client. Then, as shown below, CloudFront Functions can replace the URI of that banner image with a random image.

			
			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 Configuration

With AWS CDK, you can load the CloudFront Functions code and connect it to a CloudFront Distribution as shown below.

```typescript
// Loading CloudFront Function code
const functionCode = fs.readFileSync(
  path.join(__dirname, '../lambda/viewer-request-function/index.js'), 
  'utf8'
);

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

// Applying to 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,
      }],
    },
  },
});

		

In this example, we created CloudFront and connected CloudFront Functions to it, but if CloudFront already exists, you can just create CloudFront Functions and connect it using AWS CLI or console.

			
			// Loading CloudFront Function code
const functionCode = fs.readFileSync(
  path.join(__dirname, '../lambda/viewer-request-function/index.js'), 
  'utf8'
);

// Creating only CloudFront Functions in AWS CDK
const viewerRequestFunction = new cloudfront.Function(this,
  'ViewerRequestFunction', {
    code: cloudfront.FunctionCode.fromInline(functionCode),
  });

// Later, connect to existing CloudFront using AWS CLI or console

		

Actual Operation

As shown below, although the request is made to banner.png, you can see that CloudFront Functions intercepts it and provides a random image.

## Can't We Use Lambda@Edge?

Lambda@Edge also provides functionality to modify CloudFront requests. However, Lambda@Edge is more suitable for cases requiring complex logic or external API calls. On the other hand, CloudFront Functions are optimized for simple request modifications, making them faster and more cost-effective.

Please refer to the official documentation for more detailed information.

• Differences between CloudFront Functions and Lambda@Edge - Amazon CloudFront

Conclusion

CloudFront Functions is a service that can simply modify existing CloudFront requests as described above. Of course, changing the actual client or server code might be a more fundamental solution, but in specific cases like those mentioned above, it could be worth considering.

Additionally, for images, depending on the browser, they may hit disk or memory cache, so there are additional factors to consider when you need to display content more dynamically!

That was the 29th blog of the Korean blog relay in 2025, "Trying CloudFront Functions". The 30th blog relay will be published in the fifth week of August.

Thank you for reading! This was Lee Byeonghyeon from the Manufacturing Business Technology Department.

For inquiries, contact Classmethod Korea!

Classmethod Korea conducts various seminars and events.
Please refer to the page below for ongoing events.

https://classmethod.kr/board/library

For consultations about AWS and inquiries about Classmethod members, please contact us at the email below!
Info@classmethod.kr