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.
- Basic familiarity with AWS CDK for TypeScript.
- Read the first two posts in the “Working with the TypeScript AWS CDK” series.
- 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.
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:
- We want to create an S3 bucket to host the assets.
- We want to ensure we get a reference to the ACM certificate from the ARN.
- We want to instantiate a new CloudFront distruction with a custom domain and that certificate.
- We need to grab the hosted zone from the attributes of the custom domain tha we created.
- We need to assign an
AaaaRecordfor 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
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!
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
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):
npm t test/cdn-stack.test.ts or
npm run test test/cdn-stack.test.ts would display our test succeeding:
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.
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
- AWS CDK for TypeScript
- “Working with the TypeScript AWS CDK” series
- AWS CDK With TypeScript Foundations
- Using The AWS CDK With LocalStack And
- Final repository code
Originally posted on my blog. To see new posts without delay, read the posts there and subscribe to my newsletter.