In this blog I’ll discuss how to host a static website on AWS with S3, CloudFront and Route 53. We will secure our website with SSL certificate generated from Certificate Manger, enable HTTP/2 and HTTP/3 and redirect insecure http traffic to https version of the website. We will also make our bucket private and add policy to allow access from CloudFront.

In a later blog I will also setup GitHub actions to automatically deploy the website when we create a new post.

GOALS:

1. Create S3 bucket.
2. Create CloudFront distribution.
3. Point CloudFront to s3 bucket and restrict bucket access to CloudFront only.
4. Add your domain (optional).

NOTE: Replace `example.org` with your actual domain name.

Create S3 bucket

Open AWS console and got to S3 dashboard. Then create a new bucket with name as `example.org`.
Go to Properties tab and enable Bucket Versioning. By enabling bucket versioning you will not lose previous version of your assets (static files).
Go to Permissions tab and enable Block public access (bucket settings), this will prevent access to the bucket from the public. Remember, goal #2 we will use CloudFront to deliver the assets.

Create CloudFront distribution

Now we will create the CloudFront distribution and point it to our S3 bucket.
In CloudFront Dashboard create a new CloudFront distribution.
Origin > Origin Domain, select your S3 bucket.
Origin > Origin Access, Select origin access control settings and select Create Control Settings and fill the following details.

Name: leave it default or update
Description (Optional): add a description
Signing Behavior: Sign requests
Origin Type: S3

Then click create and select this newly created settings from the origin access control drop-down.
(We will need to update our bucket’s policy to allow CloudFront access to the bucket. We will do this later.)

In the Web Application Firewall (WAF), select Do not enable security protections
At the very bottom, in the Settings section set Default root object to index.html. If we do not this we will see a sweet access denied error. Because we are allowing access to all the files inside our bucket YOUR_BUCKET_NAME/ but not the bucket itself. So when we visit CloudFront distribution URL (e.g. https://dfi9s7i5typ2c.cloudfront.net/) CloudFront will not know what does / means. And when we set the default root object, CloudFront will know / means /index.html and it will load the index.html file.

Leave everything else as default, scroll down to bottom and click Create Distribution.

Note: It will take 5-10 minutes to fully deploy the CloudFront distribution.

Configure bucket access

Open S3 Dashboard, go to Permissions tab. Select Edit on the bucket policy section and paste the following policy in the text block. This will allow CloudFront to access the objects while keeping the bucket private.

Replace the YOUR_BUCKET_NAME, YOUR_ACCOUNT_ID and YOUR_CLOUDFRONT_DISTRIBUTION_ID placeholders with correct values and save the policy.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowCloudFrontServicePrincipalReadOnly",
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::YOUR_ACCOUNT_ID:distribution/YOUR_CLOUDFRONT_DISTRIBUTION_ID"
        }
      }
    }
  ]
}

That’s it, your website is live at your CloudFront distribution URL. You can find the URL on the home page of your distribution.
If you are seeing some DNS error, then wait for some time.
Note: It will take 5-10 minutes to fully deploy the CloudFront distribution.

Now, we will add a custom domain in our distribution.

Custom Domain (Optional)

Add Domain to Route 53

To complete this step you will need an existing domain or need to purchase a new one.
Go to Route 53 dashboard and create a hosted zone (it will incur charges) and add your custom domain. Then go to your domain registrar and update the nameserver records, this will make Route 53 your DNS manager.
It will take up to 24 hours to fully propagate the DNS. You can check the status on https://dnschecker.org/.

Create SSL certificate

Open Certificate Manager, request a new certificate. Add your domain name and update your DNS records to validate the ownership.

Keep in mind to add both the root domain (example.org) and the wildcard domain (*.example.org).

Add the domain to CloudFront

To add the domain, go to CloudFront Dashboard and select Edit under General > Settings. In the Settings section, update Alternate domain name (CNAME) and add your domain name. In Custom SSL certificate select your newly created SSL certificate.
To point this domain to CloudFront. Open to your domain settings (in Route 53), click on Create Record and create an A record. Toggle the Alias button and in the Route Traffic To select your CloudFront distribution.
In the same section enable HTTP/2 and HTTP3.

After some time (5-10 minutes) your website will be available at your domain address.

Thanks for reading.
If you have any questions, leave a comment below or drop an email at vikash[at]lorbic[dot]com.

Have a nice day.

• Previous
  Simplifying Search Activation: A Quick Guide with JavaScript
• Next
  Setting Up Llama 2 with Docker on Your Gaming Laptop Using Ollama