crunchcrunch

crunchcrunch

Deploy a static website with AWS CDK

Deploy a static website with AWS CDK

I played with AWS CDK for over a week, so i decided to write an article to show you how you can use it.

In this tutorial, we are going to deploy a static HTML/CSS using Amazon S3.

But to define the infrastructure, we are going to use AWS CDK.

Whats is AWS CDK ?

AWS CDK (Cloud Development Kit) is a software development framework for defining cloud infrastructure in code and provisioning it through AWS CloudFormation.

In other words, your are going to define your infrastructure needs inside your code, and under the hood, the CDK is going to create all the things you need using CloudFormation and deploy it for you.

Let's do that

Create a new project

mkdir static-on-aws-cdk
cd static-on-aws-cdk
npm init -y

We are going to create two folders :

  • one containing the code for our website
  • one containing the code for our infra
mkdir static
mkdir infra

The static website

cd static & touch static/index.html

Let's write some really complicated and sophisticated HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./style.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div class="description">
        My Page on AWS !

    </div>
</body>
</html>

Let's add some important styling

touch style.css
.description {
    font-size: 3rem;
    text-align: center;
    font-weight: bold;
}

Great ! Our website is ready !

The infra

Install the AWS CDK globally

npm install -g aws-cdk

Go to the infra directory

cd ../infra

We are going to use the CLI to generate a boilerplate :

cdk init app --language typescript

We need a bucket s3 right ? So let's install the dependency to do that

npm i @aws-cdk/aws-s3

We will also need a dependency for the deployment :

npm i @aws-cdk/aws-s3-deployment

Open lib/infra-stack.ts : that file will contain our stack and modify it this way

import * as cdk from '@aws-cdk/core';
import * as s3 from '@aws-cdk/aws-s3';
import * as s3Deployment from '@aws-cdk/aws-s3-deployment'

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

    // The code that defines your bucket s3
    const bucketName = "the-bucket-name-you-want"
    const myBucket = new s3.Bucket(this, bucketName, {
      publicReadAccess: true,
      removalPolicy: cdk.RemovalPolicy.DESTROY,        
      websiteIndexDocument: "index.html"
   });

   // The code that defines your deployment
   const deployment = new s3Deployment.BucketDeployment(this, "deployStaticWebsite", {
    sources: [s3Deployment.Source.asset("../website")],
    destinationBucket: myBucket
 });
  }
}

That's it ! The code is ready.

Let's deploy now !

First command to type , to bootstrap the environment :

cdk bootstrap

(It will generate a “cdk-out” folder that contains our website code).

Second command, to create the Cloudformation template for our app :

cdk synth

Final command, to deploy (Enter “y” to continue with the deployment )

cdk deploy

When it's finished, in the AWS console, open S3, you will see the bucket created !

  • Open the bucket, you will find the index.html. Click on it
  • find the “Object URL”, click on it
  • This will open the static website we’ve created showing "My Page on AWS !"

Conclusion

Congrats ! You have deployed your static website on AWS using the CDK !

Now let's clean everything before we go :

  • Empty the bucket (delete the two files inside it)

And then execute this command to clean everything up :

cdk destroy

If you want to go further , here are some useful links :

AWS CDK Documentation

AWS CDK Workshop

Let me know if you have any questions in the comments :)

Interested in reading more such articles from Sonia Manoubi?

Support the author by donating an amount of your choice.

 
Share this