Back to home

PrerequisitesGetting startedPlan for the CDK stackAdding the CDN stack codeCreate an S3 bucketGet reference to the ACM certificateInstantiate a new CloudFront distributionGet the hosted zoneAssign ARecord and AaaaRecord to CloudFront distributionAdding the stack to the CDK appSynthesizing and deploying the stackManually testing the stackWriting a test for our stackTeardownSummaryResources and further reading
Building A CDN With S3, Cloudfront And The AWS CDK main image

Building A CDN With S3, Cloudfront And The AWS CDK

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.
  3. 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:

1 2 3 $ git clone https://github.com/okeeffed/using-the-aws-cdk-with-localstack-and-aws-cdk-local building-a-cdn-with-s3-cloudfront-and-the-aws-cdk $ cd building-a-cdn-with-s3-cloudfront-and-the-aws-cdk $ npm i

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:

1 2 3 4 5 6 7 @aws-cdk/core @aws-cdk/aws-cloudfront @aws-cdk/aws-cloudfront-origins @aws-cdk/aws-s3 @aws-cdk/aws-certificatemanager @aws-cdk/aws-route53 @aws-cdk/aws-route53-targets

We can install these prior to doing any work:

1 npm i @aws-cdk/core @aws-cdk/aws-cloudfront @aws-cdk/aws-cloudfront-origins @aws-cdk/aws-s3 @aws-cdk/aws-certificatemanager @aws-cdk/aws-route53 @aws-cdk/aws-route53-targets

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

1 npm run upgrade

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.

1 $ touch lib/cdn-stack.ts

Afterwards, we can add the following code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import "dotenv/config"; import * as cdk from "@aws-cdk/core"; import * as cloudfront from "@aws-cdk/aws-cloudfront"; import * as origins from "@aws-cdk/aws-cloudfront-origins"; import * as s3 from "@aws-cdk/aws-s3"; import * as acm from "@aws-cdk/aws-certificatemanager"; import * as route53 from "@aws-cdk/aws-route53"; import * as targets from "@aws-cdk/aws-route53-targets"; export class CdnStack extends cdk.Stack { constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) { super(scope, id, props); // ... ready to add our code here } }

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import "dotenv/config"; import * as cdk from "@aws-cdk/core"; import * as cloudfront from "@aws-cdk/aws-cloudfront"; import * as origins from "@aws-cdk/aws-cloudfront-origins"; import * as s3 from "@aws-cdk/aws-s3"; import * as acm from "@aws-cdk/aws-certificatemanager"; import * as route53 from "@aws-cdk/aws-route53"; import * as targets from "@aws-cdk/aws-route53-targets"; export class CdnStack extends cdk.Stack { constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) { super(scope, id, props); // Create the S3 bucket to host assets const assetsBucket = new s3.Bucket(this, "demo-cdk-assets-bucket", { bucketName: "demo-cdk-assets-bucket", removalPolicy: cdk.RemovalPolicy.DESTROY, }); } }

Get reference to the ACM certificate

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 import "dotenv/config"; import * as cdk from "@aws-cdk/core"; import * as cloudfront from "@aws-cdk/aws-cloudfront"; import * as origins from "@aws-cdk/aws-cloudfront-origins"; import * as s3 from "@aws-cdk/aws-s3"; import * as acm from "@aws-cdk/aws-certificatemanager"; import * as route53 from "@aws-cdk/aws-route53"; import * as targets from "@aws-cdk/aws-route53-targets"; export class CdnStack extends cdk.Stack { constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) { super(scope, id, props); const assetsBucket = new s3.Bucket(this, "demo-cdk-assets-bucket", { bucketName: "demo-cdk-assets-bucket", removalPolicy: cdk.RemovalPolicy.DESTROY, }); // Get the certificate const certificate = acm.Certificate.fromCertificateArn( this, "Certificate", // found using aws acm list-certificates --region us-east-1 "arn:aws:acm:your-zone:your-id" ); } }

Instantiate a new CloudFront distribution

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 import "dotenv/config"; import * as cdk from "@aws-cdk/core"; import * as cloudfront from "@aws-cdk/aws-cloudfront"; import * as origins from "@aws-cdk/aws-cloudfront-origins"; import * as s3 from "@aws-cdk/aws-s3"; import * as acm from "@aws-cdk/aws-certificatemanager"; import * as route53 from "@aws-cdk/aws-route53"; import * as targets from "@aws-cdk/aws-route53-targets"; export class CdnStack extends cdk.Stack { constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) { super(scope, id, props); const assetsBucket = new s3.Bucket(this, "demo-cdk-assets-bucket", { bucketName: "demo-cdk-assets-bucket", removalPolicy: cdk.RemovalPolicy.DESTROY, }); const certificate = acm.Certificate.fromCertificateArn( this, "Certificate", "arn:aws:acm:your-zone:your-id" ); // Create new CloudFront Distribution const cf = new cloudfront.Distribution(this, "cdnDistribution", { defaultBehavior: { origin: new origins.S3Origin(assetsBucket) }, domainNames: ["example-cdn.your-domain.com"], certificate, }); } }

Get the hosted zone

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 import "dotenv/config"; import * as cdk from "@aws-cdk/core"; import * as cloudfront from "@aws-cdk/aws-cloudfront"; import * as origins from "@aws-cdk/aws-cloudfront-origins"; import * as s3 from "@aws-cdk/aws-s3"; import * as acm from "@aws-cdk/aws-certificatemanager"; import * as route53 from "@aws-cdk/aws-route53"; import * as targets from "@aws-cdk/aws-route53-targets"; export class CdnStack extends cdk.Stack { constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) { super(scope, id, props); const assetsBucket = new s3.Bucket(this, "demo-cdk-assets-bucket", { bucketName: "demo-cdk-assets-bucket", removalPolicy: cdk.RemovalPolicy.DESTROY, }); const certificate = acm.Certificate.fromCertificateArn( this, "Certificate", "arn:aws:acm:your-zone:your-id" ); const cf = new cloudfront.Distribution(this, "cdnDistribution", { defaultBehavior: { origin: new origins.S3Origin(assetsBucket) }, domainNames: ["example-cdn.your-domain.com"], certificate, }); // Get the zone const zone = route53.HostedZone.fromHostedZoneAttributes( this, "dennisokeeffe-zone", { zoneName: "example-cdn.your-domain.com", hostedZoneId: "your-zone-id", } ); } }

Assign ARecord and AaaaRecord to CloudFront distribution

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 import "dotenv/config"; import * as cdk from "@aws-cdk/core"; import * as cloudfront from "@aws-cdk/aws-cloudfront"; import * as origins from "@aws-cdk/aws-cloudfront-origins"; import * as s3 from "@aws-cdk/aws-s3"; import * as acm from "@aws-cdk/aws-certificatemanager"; import * as route53 from "@aws-cdk/aws-route53"; import * as targets from "@aws-cdk/aws-route53-targets"; export class CdnStack extends cdk.Stack { constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) { super(scope, id, props); const assetsBucket = new s3.Bucket(this, "demo-cdk-assets-bucket", { bucketName: "demo-cdk-assets-bucket", removalPolicy: cdk.RemovalPolicy.DESTROY, }); const certificate = acm.Certificate.fromCertificateArn( this, "Certificate", "arn:aws:acm:your-zone:your-id" ); const cf = new cloudfront.Distribution(this, "cdnDistribution", { defaultBehavior: { origin: new origins.S3Origin(assetsBucket) }, domainNames: ["example-cdn.your-domain.com"], certificate, }); const zone = route53.HostedZone.fromHostedZoneAttributes( this, "dennisokeeffe-zone", { zoneName: "example-cdn.your-domain.com", hostedZoneId: "your-zone-id", } ); // Adding out A Record code new route53.ARecord(this, "CDNARecord", { zone, target: route53.RecordTarget.fromAlias(new targets.CloudFrontTarget(cf)), }); new route53.AaaaRecord(this, "AliasRecord", { zone, target: route53.RecordTarget.fromAlias(new targets.CloudFrontTarget(cf)), }); } }

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 #!/usr/bin/env node import "source-map-support/register"; import * as cdk from "@aws-cdk/core"; import { CdnStack } from "../lib/cdn-stack"; const app = new cdk.App(); new CdnStack(app, "CdnStack", { /* If you don't specify 'env', this stack will be environment-agnostic. * Account/Region-dependent features and context lookups will not work, * but a single synthesized template can be deployed anywhere. */ /* Uncomment the next line to specialize this stack for the AWS Account * and Region that are implied by the current CLI configuration. */ // env: { account: process.env.CDK_DEFAULT_ACCOUNT, region: process.env.CDK_DEFAULT_REGION }, /* Uncomment the next line if you know exactly what Account and Region you * want to deploy the stack to. */ // env: { account: '123456789012', region: 'us-east-1' }, /* For more information, see https://docs.aws.amazon.com/cdk/latest/guide/environments.html */ });

Synthesizing and deploying the stack

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 $ npm run cdk synth npm run cdk synth > aws-cdk-with-typescript-foundations@0.1.0 cdk > cdk "synth" Resources: democdkassetsbucketA19A67A4: Type: AWS::S3::Bucket Properties: BucketName: demo-cdk-assets-bucket UpdateReplacePolicy: Delete DeletionPolicy: Delete Metadata: aws:cdk:path: CdnStack/demo-cdk-assets-bucket/Resource democdkassetsbucketPolicy674BC594: Type: AWS::S3::BucketPolicy Properties: Bucket: Ref: democdkassetsbucketA19A67A4 PolicyDocument: Statement: - Action: s3:GetObject Effect: Allow Principal: CanonicalUser: Fn::GetAtt: - cdnDistributionOrigin1S3Origin52472F64 - S3CanonicalUserId Resource: Fn::Join: - "" - - Fn::GetAtt: - democdkassetsbucketA19A67A4 - Arn - /* Version: "2012-10-17" Metadata: aws:cdk:path: CdnStack/demo-cdk-assets-bucket/Policy/Resource cdnDistributionOrigin1S3Origin52472F64: Type: AWS::CloudFront::CloudFrontOriginAccessIdentity Properties: CloudFrontOriginAccessIdentityConfig: Comment: Identity for CdnStackcdnDistributionOrigin123067AEF Metadata: aws:cdk:path: CdnStack/cdnDistribution/Origin1/S3Origin/Resource cdnDistribution5DCBB4A4: Type: AWS::CloudFront::Distribution Properties: DistributionConfig: Aliases: - example-cdn.your-domain.com DefaultCacheBehavior: CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6 Compress: true TargetOriginId: CdnStackcdnDistributionOrigin123067AEF ViewerProtocolPolicy: allow-all Enabled: true HttpVersion: http2 IPV6Enabled: true Origins: - DomainName: Fn::GetAtt: - democdkassetsbucketA19A67A4 - RegionalDomainName Id: CdnStackcdnDistributionOrigin123067AEF S3OriginConfig: OriginAccessIdentity: Fn::Join: - "" - - origin-access-identity/cloudfront/ - Ref: cdnDistributionOrigin1S3Origin52472F64 ViewerCertificate: AcmCertificateArn: arn:aws:acm:[redacted] MinimumProtocolVersion: TLSv1.2_2019 SslSupportMethod: sni-only Metadata: aws:cdk:path: CdnStack/cdnDistribution/Resource CDNARecord9F02271B: Type: AWS::Route53::RecordSet Properties: Name: example-cdn.your-domain.com. Type: A AliasTarget: DNSName: Fn::GetAtt: - cdnDistribution5DCBB4A4 - DomainName HostedZoneId: Fn::FindInMap: - AWSCloudFrontPartitionHostedZoneIdMap - Ref: AWS::Partition - zoneId HostedZoneId: [redacted] Metadata: aws:cdk:path: CdnStack/CDNARecord/Resource AliasRecord851000D2: Type: AWS::Route53::RecordSet Properties: Name: example-cdn.your-domain.com. Type: AAAA AliasTarget: DNSName: Fn::GetAtt: - cdnDistribution5DCBB4A4 - DomainName HostedZoneId: Fn::FindInMap: - AWSCloudFrontPartitionHostedZoneIdMap - Ref: AWS::Partition - zoneId HostedZoneId: [redacted] Metadata: aws:cdk:path: CdnStack/AliasRecord/Resource CDKMetadata: Type: AWS::CDK::Metadata Properties: Analytics: v2:deflate64:H4sIAAAAAAAAE3VQy24CMQz8Fu4hsKoQPXZZVKmHqtXyBaljkFkao8QpqqL8OwmpVC6cPB57xo9Od91aL2cv5hLmYKdFAvao004MTGpgF8RHEDVi4OgB1bB37+Z8Jneo8J4uzZaE2GVVzVJ40mkTYUKp1T/UwiefCH7/6ZZnBSeOdu/ZiU5bKqPpK1ZH9eHpQK4HwBDeLDohucmHKnitgkcd9zZZeY6Cq7JYP2I51LYbKtqV5XpjTMtyzsqxRX0Mi59upZ/Li46BaO5jcf5GPbZ4Bbh/xoU/AQAA Metadata: aws:cdk:path: CdnStack/CDKMetadata/Default Condition: CDKMetadataAvailable Mappings: AWSCloudFrontPartitionHostedZoneIdMap: aws: zoneId: [redacted] aws-cn: zoneId: [redacted] Conditions: CDKMetadataAvailable: Fn::Or: - Fn::Or: - Fn::Equals: - Ref: AWS::Region - af-south-1 - Fn::Equals: - Ref: AWS::Region - ap-east-1 - Fn::Equals: - Ref: AWS::Region - ap-northeast-1 - Fn::Equals: - Ref: AWS::Region - ap-northeast-2 - Fn::Equals: - Ref: AWS::Region - ap-south-1 - Fn::Equals: - Ref: AWS::Region - ap-southeast-1 - Fn::Equals: - Ref: AWS::Region - ap-southeast-2 - Fn::Equals: - Ref: AWS::Region - ca-central-1 - Fn::Equals: - Ref: AWS::Region - cn-north-1 - Fn::Equals: - Ref: AWS::Region - cn-northwest-1 - Fn::Or: - Fn::Equals: - Ref: AWS::Region - eu-central-1 - Fn::Equals: - Ref: AWS::Region - eu-north-1 - Fn::Equals: - Ref: AWS::Region - eu-south-1 - Fn::Equals: - Ref: AWS::Region - eu-west-1 - Fn::Equals: - Ref: AWS::Region - eu-west-2 - Fn::Equals: - Ref: AWS::Region - eu-west-3 - Fn::Equals: - Ref: AWS::Region - me-south-1 - Fn::Equals: - Ref: AWS::Region - sa-east-1 - Fn::Equals: - Ref: AWS::Region - us-east-1 - Fn::Equals: - Ref: AWS::Region - us-east-2 - Fn::Or: - Fn::Equals: - Ref: AWS::Region - us-west-1 - Fn::Equals: - Ref: AWS::Region - us-west-2 $ npm run cdk deploy > aws-cdk-with-typescript-foundations@0.1.0 cdk > cdk "deploy" This deployment will make potentially sensitive changes according to your current security approval level (--require-approval broadening). Please confirm you intend to make the following modifications: IAM Statement Changes ┌───┬────────────────────────────┬────────┬──────────────┬────────────────────────────┬───────────┐ │ │ Resource │ Effect │ Action │ Principal │ Condition │ ├───┼────────────────────────────┼────────┼──────────────┼────────────────────────────┼───────────┤ │ + │ ${demo-cdk-assets-bucket.A │ Allow │ s3:GetObject │ CanonicalUser:${cdnDistrib │ │ │ │ rn}/* │ │ │ ution/Origin1/S3Origin.S3C │ │ │ │ │ │ │ anonicalUserId} │ │ └───┴────────────────────────────┴────────┴──────────────┴────────────────────────────┴───────────┘ (NOTE: There may be security-related changes not in this list. See https://github.com/aws/aws-cdk/issues/1299) Do you wish to deploy these changes (y/n)? y CdnStack: deploying... CdnStack: creating CloudFormation changeset... ✅ CdnStack Stack ARN: arn:aws:cloudformation:us-east-1:[REDACTED]

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:

1 2 3 "scripts": { "s3": "aws s3 sync ./assets s3://demo-cdk-assets-bucket" }

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

Create a new assets folder:

1 $ mkdir assets

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:

1 2 3 4 5 6 $ npm run s3 > aws-cdk-with-typescript-foundations@0.1.0 s3 > aws s3 sync ./assets s3://demo-cdk-assets-bucket upload: assets/wol-dev-300.png to s3://demo-cdk-assets-bucket/wol-dev-300.png

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

Example CDN success with networking information

Example CDN success with networking information

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):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 import { expect as expectCDK, matchTemplate, MatchStyle, } from "@aws-cdk/assert"; import * as cdk from "@aws-cdk/core"; import * as CdnStack from "../lib/cdn-stack"; test("CDN Stack", () => { const app = new cdk.App(); // WHEN const stack = new CdnStack.CdnStack(app, "MyTestStack"); // THEN expectCDK(stack).to( matchTemplate( { Resources: { democdkassetsbucketA19A67A4: { Type: "AWS::S3::Bucket", Properties: { BucketName: "demo-cdk-assets-bucket", }, UpdateReplacePolicy: "Delete", DeletionPolicy: "Delete", }, democdkassetsbucketPolicy674BC594: { Type: "AWS::S3::BucketPolicy", Properties: { Bucket: { Ref: "democdkassetsbucketA19A67A4", }, PolicyDocument: { Statement: [ { Action: "s3:GetObject", Effect: "Allow", Principal: { CanonicalUser: { "Fn::GetAtt": [ "cdnDistributionOrigin1S3Origin52472F64", "S3CanonicalUserId", ], }, }, Resource: { "Fn::Join": [ "", [ { "Fn::GetAtt": [ "democdkassetsbucketA19A67A4", "Arn", ], }, "/*", ], ], }, }, ], Version: "2012-10-17", }, }, }, cdnDistributionOrigin1S3Origin52472F64: { Type: "AWS::CloudFront::CloudFrontOriginAccessIdentity", Properties: { CloudFrontOriginAccessIdentityConfig: { Comment: "Identity for MyTestStackcdnDistributionOrigin1E3DABCBC", }, }, }, cdnDistribution5DCBB4A4: { Type: "AWS::CloudFront::Distribution", Properties: { DistributionConfig: { Aliases: [process.env.ZONE_NAME!], DefaultCacheBehavior: { CachePolicyId: "658327ea-f89d-4fab-a63d-7e88639e58f6", Compress: true, TargetOriginId: "MyTestStackcdnDistributionOrigin1E3DABCBC", ViewerProtocolPolicy: "allow-all", }, Enabled: true, HttpVersion: "http2", IPV6Enabled: true, Origins: [ { DomainName: { "Fn::GetAtt": [ "democdkassetsbucketA19A67A4", "RegionalDomainName", ], }, Id: "MyTestStackcdnDistributionOrigin1E3DABCBC", S3OriginConfig: { OriginAccessIdentity: { "Fn::Join": [ "", [ "origin-access-identity/cloudfront/", { Ref: "cdnDistributionOrigin1S3Origin52472F64", }, ], ], }, }, }, ], ViewerCertificate: { AcmCertificateArn: process.env.ACM_ARN!, MinimumProtocolVersion: "TLSv1.2_2019", SslSupportMethod: "sni-only", }, }, }, }, CDNARecord9F02271B: { Type: "AWS::Route53::RecordSet", Properties: { Name: `${process.env.ZONE_NAME!}.`, Type: "A", AliasTarget: { DNSName: { "Fn::GetAtt": ["cdnDistribution5DCBB4A4", "DomainName"], }, HostedZoneId: { "Fn::FindInMap": [ "AWSCloudFrontPartitionHostedZoneIdMap", { Ref: "AWS::Partition", }, "zoneId", ], }, }, HostedZoneId: "Z1Z1MST5IFCUVI", }, }, AliasRecord851000D2: { Type: "AWS::Route53::RecordSet", Properties: { Name: `${process.env.ZONE_NAME!}.`, Type: "AAAA", AliasTarget: { DNSName: { "Fn::GetAtt": ["cdnDistribution5DCBB4A4", "DomainName"], }, HostedZoneId: { "Fn::FindInMap": [ "AWSCloudFrontPartitionHostedZoneIdMap", { Ref: "AWS::Partition", }, "zoneId", ], }, }, HostedZoneId: process.env.HOSTED_ZONE_ID!, }, }, }, Mappings: { AWSCloudFrontPartitionHostedZoneIdMap: { aws: { zoneId: "Z2FDTNDATAQYW2", }, "aws-cn": { zoneId: "Z3RFFRIM2A3IF5", }, }, }, }, MatchStyle.EXACT ) ); });

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

1 2 3 4 5 6 7 8 9 10 11 12 13 $ npm t test/cdn-stack.test.ts > aws-cdk-with-typescript-foundations@0.1.0 test > jest "test/cdn-stack.test.ts" PASS test/cdn-stack.test.ts ✓ CDN Stack (144 ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 1.78 s, estimated 4 s Ran all test suites matching /test\/cdn-stack.test.ts/i.

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.

1 2 3 4 5 6 7 8 9 10 11 $ npm run cdk destroy > aws-cdk-with-typescript-foundations@0.1.0 cdk > cdk "destroy" Are you sure you want to delete: CdnStack (y/n)? y CdnStack: destroying... ✅ CdnStack: destroyed

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

Photo credit: roadtripwithraj

Dennis O'Keeffe

@dennisokeeffe92
  • Melbourne, Australia

Hi, I am a professional Software Engineer. Formerly of Culture Amp, UsabilityHub, Present Company and NightGuru.
I am currently working on workingoutloud.dev, Den Dribbles and LandPad .

Related articles


1,200+ PEOPLE ALREADY JOINED ❤️️

Get fresh posts + news direct to your inbox.

No spam. We only send you relevant content.