This post is #3 of a multi-part series on the AWS CDK with TypeScript written during Melbourne lockdown #6.

This post will use the AWS TypeScript CDK to deploy an S3 bucket to hold media assets, a CloudFront distribution for a content delivery network for those assets and setup a Aaaa record for that CDN through Route53.

The code will build off the work done in the first two articles of the “Working with the TypeScript AWS CDK” series.

Source code can be found here.

Prerequisites

1. Basic familiarity with AWS CDK for TypeScript.
2. Read the first two posts in the “Working with the TypeScript AWS CDK” series.

• AWS CDK With TypeScript Foundations
• Using The AWS CDK With LocalStack And aws-cdk-local

1. If you want to create the Route53 record, you will need to get the ACM ARN for your certificate and have a hosted zone ID ready.

Getting started

We will clone the working repo from the previous blog post as a starting point:

At this stage, we will have the app in a basic working state.

In order to create the CDN stack, we will require the following AWS CDK libraries:

We can install these prior to doing any work:

The repository that we cloned already has a upgrade script supplied. We can use this to ensure our CDK packages are at parity:

We are now at a stage to write our CDN stack.

Plan for the CDK stack

There are a few steps we need to take to create our CDN distribution.

The order that we want to go when creating our stack:

1. We want to create an S3 bucket to host the assets.
2. We want to ensure we get a reference to the ACM certificate from the ARN.
3. We want to instantiate a new CloudFront distruction with a custom domain and that certificate.
4. We need to grab the hosted zone from the attributes of the custom domain tha we created.
5. We need to assign an ARecord and AaaaRecord for the zone targeting the CloudFront distribution.

With that outline, we are now ready to create our new stack.

Adding the CDN stack code

Create a new file at lib/cdn-stack.ts.

Afterwards, we can add the following code:

We are now ready to work through each of the steps.

Create an S3 bucket

We will create a bucket demo-cdk-assets-bucket to host the assets with a DESTROY policy for when we tear down the assets.

Get reference to the ACM certificate

Instantiate a new CloudFront distribution

Get the hosted zone

Assign ARecord and AaaaRecord to CloudFront distribution

Adding the stack to the CDK app

We are now ready to add the stack to our app!

Inside of bin/aws-cdk-with-typescript-foundations.ts, adjust the code to be the following:

Synthesizing and deploying the stack

We can run through our usual lifecycle to syntheize and deploy the stack:

Once successful, we are ready to test some assets.

Manually testing the stack

We can use the AWS CLI to test our CDN endpoint.

Add the following script to package.json under scripts:

This script will sync assets in our assets folder to the root of our S3 bucket.

Create a new assets folder:

Then add any assets in that you want. I have added the icon for my website workingoutloud.dev for the demonstration.

Once that is done, run the command npm run s3 and let the assets sync. If successful, you should get something similar to the following:

If successful, you can now go to https://example-cdn.your-domain.com/wol-dev-300.png and see your resulting image:

Writing a test for our stack

We can also add a test for our stack under test/cdk-stack.test.ts. This section is more for completion sake, but please note that I have adjusted some of the test to take environment variables for the sake of redacting critical information (albeit it is not that critical):

Running npm t test/cdn-stack.test.ts or npm run test test/cdn-stack.test.ts would display our test succeeding:

Teardown

Always be sure to tear down your resources when you are done with them. We purposely made the bucket destroyable for this reason in this demo.

Note: your bucket will need to be empty to be destroyed. Ensure you login and empty the bucket first.

Summary

Today’s post demonstrated how to create a simple CDN with the AWS TypeScript CDK.

To improve upon from here, you could look to add in ways to resize assets on the fly or build a pipeline to process images and place them into the S3 bucket.

Resources and further reading

1. AWS CDK for TypeScript
2. workingoutloud.dev
3. “Working with the TypeScript AWS CDK” series
4. AWS CDK With TypeScript Foundations
5. Using The AWS CDK With LocalStack And aws-cdk-local
6. Final repository code

Photo credit: roadtripwithraj

Originally posted on my blog. To see new posts without delay, read the posts there and subscribe to my newsletter.

I write content for AWS, Kubernetes, Python, JavaScript and more. To view all the latest content, be sure to visit my blog and subscribe to my newsletter. Follow me on Twitter.