Cloudfront Function and association using AWS-CDK

Aws has introduced Cloudfront-Functions to run your code at edge with low latency at any scale.

Amazon CloudFront is a service that speeds up the distribution and delivery of static and dynamic web content through its global network of machines spread across hundreds of locations, also known as edge locations.

How Cloudfront Works?

CloudFront Functions are natively built into the CloudFront infrastructure with over 218+ points of presence spread across 90 cities and 47 countries. Each of these locations hosts an instance of the Functions runtime, which is an ECMAScript 5.1-compliant JavaScript engine, and each of these runtimes is capable of handling tens of millions of requests per second while delivering sub-millisecond latency.

We have already covered on how to do it through AWS CLI, check here(https://kuchbhilearning.blogspot.com/2022/09/aws-cloudfront-function-aws-has.html)

In this article let's focus on doing this through AWS-CDK.

We are assuming that you already have a sample code of function, with that being said let's dive in.

import * as cloudFront from 'aws-cdk-lib/aws-cloudfront';
  
  // After importing the cloudfront.
  // Cloudfront has a exposed a class called Function
  const cloudFrontFunction = new cloudFront.Function(stack, `cf-function`, {
    code: cloudFront.FunctionCode.fromFile({
      filePath: path.join(__dirname, 'cf-func/dist/index.js') // Give the path of the function
    })
  });


  const cloudFrontDistribution = new cloudFront.Distribution(stack, `cloudfront-distribution`, {
    // Default path pointing to S3 Web Bucket where static content resides
    defaultBehavior: {
      // Point to S3 Web Bucket as origin
      origin: new cloudFrontOrigins.S3Origin(s3BucketWeb), // S3 bucket path
      // HTTP requests will be redirected to HTTPS
      viewerProtocolPolicy: cloudFront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
      // Only allow GET, HEAD, OPTIONS methods
      allowedMethods: cloudFront.AllowedMethods.ALLOW_GET_HEAD_OPTIONS,
      // Cache GET, HEAD, OPTIONS
      cachedMethods: cloudFront.CachedMethods.CACHE_GET_HEAD_OPTIONS,
      // Apply the following to API endpoints only
      functionAssociations: [
        {
          function: cloudFrontFunction,
          eventType: cloudFront.FunctionEventType.VIEWER_REQUEST
        }
      ]
    },
});

The more important part to note here is the FunctionAssociation property to which we can assign the function and add an event type.

In this example we have kept the event type to Viewer_Request. You can also choose Viewer_Response based on the requirement.

Author Description