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 :
Let me know if you have any questions in the comments :)