Create AWS CloudFront Function by using AWS CDK

AWS CloudFront Functions is a simple edge computing service. We can deploy our own function to the AWS CDN edge locations.

And using AWS CDK, we can deploy and manage it easily.

Setup project

First, we need to setup a new CDK project.

$ mkdir cloudfront-functions
$ cd cloudfront-functions
$ cdk init app --language=typescript

Install CloudFront module

CloudFront Function resources are in the CloudFront module of CDK.

$ yarn add @aws-cdk/aws-cloudfront

Create CloudFront Function Instance

Then we can define the CloudFront Function resource by the following code.

import { Function, FunctionCode } from '@aws-cdk/aws-cloudfront';
import * as cdk from '@aws-cdk/core';
import { RemovalPolicy } from '@aws-cdk/core';


export class CloudfrontFunctionsStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // The code that defines your stack goes here
    new Function(this, 'ViewerRequestFunction', {
      code: FunctionCode.fromInline(`
        function handler(event) {
          var request = event.request;      
          return request;
        }
      `),
      comment: 'Comment about the function',
      functionName: 'ExampleViewerRequestFunction'
    })
   // If you want to retain the resource when delete the stack
   .applyRemovalPolicy(RemovalPolicy.RETAIN)
    
    new Function(this, 'ViewerResponseFunction', {
      code: FunctionCode.fromInline(`
        function handler(event) {
          var response = event.response;      
          return response;
        }
      `),
      comment: 'Comment about the function',
      functionName: 'ExampleViewerResponseFunction'
    })
  }
}

Tips1: Disable autopublish

The Function constructor lack of autopublish configuration attribute. So we need to use CfnFunction class instead.

import { FunctionCode, CfnFunction } from '@aws-cdk/aws-cloudfront';
import * as cdk from '@aws-cdk/core';
export class CloudfrontFunctionsStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    new CfnFunction(this, 'ViewerResponseFunction', {
      name: 'ExampleViewerResponseFunction',
      autoPublish: false,
      functionCode: FunctionCode.fromInline(`
        function handler(event) {
          var response = event.response;      
          return response;
        }
      `).render(),
      functionConfig: {
        comment: "Comment about the function",
        runtime: 'cloudfront-js-1.0',
      }
    })

  }
}

Tips2: Import the function’s code from another file

Currently, the CDK module does not support importing from JS files yet. But the feature request and Pull Request are already created. https://github.com/aws/aws-cdk/issues/14967

So we need to use CfnFunction and import the JS file manually.

import { CfnFunction } from '@aws-cdk/aws-cloudfront';
import * as cdk from '@aws-cdk/core';
import { readFileSync } from 'fs';
import { join } from 'path';

export class CloudfrontFunctionsStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);
    new CfnFunction(this, 'ViewerResponseFunction', {
      name: 'ExampleViewerResponseFunction',
      autoPublish: false,
      functionCode: readFileSync(
         join(__dirname, '../functions/viewer_response.js'),
         { encoding: 'utf-8' }
      ),
      functionConfig: {
        comment: "Comment about the function",
        runtime: 'cloudfront-js-1.0',
      }
    })
  }
}