In this article, I will see how to host "zackweb" as a static web application using the following AWS serverless options:

• S3 static webhosting

• AWS CDK + CloudFront

Prerequisite

• Add one more step in the existing Github Action workflow to copy the static web content to the newly created S3 bucket

# edit github action workflow
aws s3 cp ~/zack-gitops-project/zack_blog/_site/* s3://zackweb-serverless/ --recursive

# validate content in s3 bucket
ubuntu@ip-172-31-26-78:~$ aws s3 ls s3://zackweb-serverless --summarize
                     PRE aboutme/
                     PRE assets/
                     PRE certificate/
                     PRE gitrepo/
                     PRE jekyll/
                     PRE pro/
                     PRE skillroadmap/
2023-07-30 14:55:05       4455 404.html
2023-07-30 14:55:05        504 Dockerfile
2023-07-30 14:55:06      80555 feed.xml
2023-07-30 14:55:06       7760 index.html
2023-07-30 14:55:06          0 nginx.conf

Total Objects: 5
   Total Size: 93274

Option 1: S3 static webhosting

Go to the AWS console, under the S3 bucket "zackweb-serverless" properties, enable static website hosting, and update the bucket website endpoint address to the GoDaddy DNS record.

Option 2: using AWS CDK + CDN

With AWS CDK and CDN, the "zackweb" can be straightforwardly distributed from an S3 bucket accessible to the public by using CloudFront.

The steps will be:

1. Enable AWS CDK on the EC2 bastion host.

2. S3 bucket ready and copy static web content into it (done above with modification of the existing GitHub action workflow).

3. Establish a CloudFront distribution to host a static To-Do web application.

4. Deploy the AWS CDK solution to host the To-do application.

5. Install AWS CDK on the bastion EC2 host

# AWS CDK requires nodejs newer version
ubuntu@ip-172-31-26-78:~$ sudo apt-get install nodejs -y
ubuntu@ip-172-31-26-78:~$ sudo npm cache clean -f
ubuntu@ip-172-31-26-78:~$ sudo npm install -g n
ubuntu@ip-172-31-26-78:~$ sudo n stable
ubuntu@ip-172-31-26-78:~$ nodejs --version
v12.22.9

# install aws-cdk cli
ubuntu@ip-172-31-26-78:~$ npm install -g aws-cdk
ubuntu@ip-172-31-26-78:~$ cdk --version
2.139.1 (build b88f959)

# check aws credential and bootstrap CDK
ubuntu@ip-172-31-26-78:~$ aws sts get-caller-identity
{
    "UserId": "AIDxxxxxxxxx7ZV",
    "Account": "8xxxxxx342",
    "Arn": "arn:aws:iam::8xxxxx342:user/zackcdk"
}

# bootstrap CDK
ubuntu@ip-172-31-26-78:~$ sudo cdk bootstrap aws://8xxxxxxx2/ap-southeast-2

# init app
ubuntu@ip-172-31-26-78:~$  mkdir cdk
ubuntu@ip-172-31-26-78:~$ cd cdk
ubuntu@ip-172-31-26-78:~/cdk# cdk init app --language=typescript
Initializing a new git repository...
Executing npm install...
✅ All done!

# create CDK code

ubuntu@ip-172-31-26-78:~/cdk/lib# vim cdk-stack.ts

import * as cdk from '@aws-cdk/core';
import * as cloudfront from '@aws-cdk/aws-cloudfront';
import * as origins from '@aws-cdk/aws-cloudfront-origins';

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

    // existing S3 bucket
    const existingBucketName = 'zackweb-serverless';

    // Create a CloudFront distribution
    const distribution = new cloudfront.Distribution(this, 'MyDistribution', {
      defaultBehavior: {
        origin: new origins.S3OriginFromBucketName(existingBucketName)
      },
      defaultRootObject: 'index.html' // default root object
    });

    // Output the CloudFront distribution domain name
    new cdk.CfnOutput(this, 'CloudFrontDomainName', {
      value: distribution.distributionDomainName
    });
  }
}

# install required module

ubuntu@ip-172-31-26-78:~/cdk/lib# npm install @aws-cdk/core
ubuntu@ip-172-31-26-78:~/cdk/lib# npm install @aws-cdk/aws-cloudfront
ubuntu@ip-172-31-26-78:~/cdk/lib# npm install @aws-cdk/aws-cloudfront-origins

# Deploy stack
ubuntu@ip-172-31-26-78:~/cdk/lib# cd ..
ubuntu@ip-172-31-26-78:~/cdk/# cdk deploy

• The "zackweb" is now hosted on AWS with serverless deployment!

Conclusion

Now we move the blog onto AWS with serverless website hosting, using both S3 static webhosting and AWS CDK plus Cloudfront.