How to upload Static Website content To AWS S3 + CloudFront Using TypeScript AWS CDK

How to deploy static site To AWS S3 + CloudFront Using The TypeScript AWS CDK

In this post, we're going to learn in steps deployment of a static website to an S3 bucket that has CloudFront setup as the global CDN.

In this post I have used AWS CDK with Typescript You can use your preferred language.

Before going to the application code you have to configure your local environment. if You have already had a prerequisite then move to the next step. If you have not configured it you can go to my previous post about Configuration AWS CDK

Getting Started

What is S3 bucket?

Ans: Amazon Simple Storage Service (Amazon S3) is an object storage service offering industry-leading scalability, data availability, security, and performance. Customers of all sizes and industries can store and protect any amount of data for virtually any use case, such as data lakes, cloud-native applications, and mobile apps. With cost-effective storage classes and easy-to-use management features, you can optimize costs, organize data, and configure fine-tuned access controls to meet specific business, organizational, and compliance requirements.

### What is CloudFront?

Ans: Amazon CloudFront is a web service that speeds up the distribution of your static and dynamic web content, such as .html, .css, .js, and image files, to your users. CloudFront delivers your content through a worldwide network of data centers called edge locations. When a user requests content that you're serving with CloudFront, the user is routed to the edge location that provides the lowest latency, so that content is delivered with the best possible performance.

CloudFront distributions deliver your content from one or more origins; an origin is a location where you store the original version of your content. We will use S3 bucket as the origin. If the bucket is configured as a website endpoint, the distribution can use S3 redirects and S3 custom error documents.

Let's write code for our application.

Step. 1:

Make directory

mkdir deploy_static_page_with_aws

Step. 2:

Goto New directory

cd deploy_static_page_with_aws
Step. 3:

Run this command to init an AWS-CDK project.

Note: We will be using typescript in this project if you are using another language you have to choose here

cdk init app --language typescript
Step. 4 :

Install required dependency which we are going to use in our application. I have used NPM package but you can also use Yarn as well.

Run this command to install dependencies:
npm install @aws-cdk/aws-s3 @aws-cdk/aws-s3-deployment @aws-cdk/aws-cloudfront @aws-cdk/aws-cloudfront-origins

We will use S3 bucket to host or static pages and use S3 bucket as an origin to CloudFront distribution. Cloudfront will deliver static content over CDN.

Step. 5:

Goto /lib folder and update existing code to initialize our AWS service.
At the top of file import these methods

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 s3deploy from "@aws-cdk/aws-s3-deployment";

Now initialized S3 bucket as follow:

   // create a bucket to upload your app files

    const websiteBucket = new s3.Bucket(this, "WebsiteBucket", {
      versioned: true,
    });

Let's connect our S3 bucket to CloudFront distribution and add S3 as an origin to CloudFront distribution to deliver content from S3 bucket.

    // create a CDN to deploy your website

    const distribution = new cloudfront.Distribution(this, "Distribution", {
      defaultBehavior: {
        origin: new origins.S3Origin(websiteBucket),
      },
      defaultRootObject: "index.html",
    });

In the following code we are describing that where is our static content is exits that we are going to deploy on S3 bucket. We have put our static pages in the website folder at the root directory of our application.

   // housekeeping for uploading the data in the bucket 

    new s3deploy.BucketDeployment(this, "DeployWebsite", {
      sources: [s3deploy.Source.asset("./website")],
      destinationBucket: websiteBucket,
      distribution,
      distributionPaths: ["/*"],
    });     

We can get CDN link from the CloudFront console. But I have written code to print the CloudFront CDN URL in the console. Put the following code in your code after the distribution code.

   // Prints out the web endpoint to the terminal

    new cdk.CfnOutput(this, "DistributionDomainName", {
      value: distribution.domainName,
    });   

🥰 👏 Congratulation; You have successfully deployed your first static websites to AWS Clouds.
You can Follow me on Twitter and connect on LinkedIn