“How to serve a Static Website using CloudFront hosted on an Amazon S3 Bucket”

Let’s begin with “How to host Static Website on AWS S3 bucket”

In this article, I am going to talk about how you can deploy a static website on AWS by uploading your website content into an S3 bucket and then serving it using AWS CloudFront.

Now, I’d like to give a brief description of some terminologies that I am going to use in this article.

❓What is Amazon S3?

Amazon S3 ( Simple Storage Service) is an object storage service that stores data as objects within buckets. An object is a file and any metadata that describes the file. A bucket is a container for objects. To store data in Amazon S3, we first need to create a bucket and specify a bucket name and AWS Region.

❓What are the benefits of using an S3 bucket?

• Each object can contain up to 5TB of Data
• A resource can only be accessed by the owner until permission is granted to others by the owner which makes it more secure.
• Back up and restore critical data
• Archive data at the lowest data
• Very low cost
• All-time availability
• The simplicity of management
• We can enable Multi-Factor Authentication (MFA) to delete an S3 bucket to prevent accidental deletions and unintentional data loss.

❓What is Amazon CloudFront?

Amazon CloudFront is a content delivery network (CDN) service offered by AWS. CloudFront is used to speed up content delivery and can be integrated with Amazon S3. If you want to know more about it, click here.

Prerequisites:

• You need an AWS account. You can sign up here and follow this tutorial in setting it up.
• You need a static website. If you don’t have one, you can clone this demo project.

Contents:

1. Create an S3 bucket
2. Upload web files to an S3 bucket
3. Secure S3 bucket through IAM policies
4. Configure S3 buckets
5. Serve content from the S3 bucket using CloudFront

Let’s begin. 😃

Step1: Create an S3 bucket

We need to create an S3 bucket to put our website’s files and folders for the static website. Now go to the ASW management console and on the search icon type S3 and click on the S3, it will go to the S3 dashboard. Then click on the create bucket.

Bucket name should be unique, the name you choose must be globally unique (for best practice, attach your AWS account ID to the name).

Next, choose your preferred AWS Region from the drop-down.

Then, under Block Public Access settings, uncheck Block all public access and accept the acknowledgment. Now our bucket is accessible to the public and once we host our static website, people can see it. 🆒

Now keep everything as it is like, Bucket Versioning disable

Add tag and Default encryption disable

Now click Create bucket.

Step 2: Upload files into the S3 bucket

Currently, the bucket is empty. We need to upload files for the static website.

Click on the upload button and upload files to the bucket.

I have uploaded the index.html file into the bucket. After successfully added file, scroll down and click upload. Please don't refresh the page or close the page until you see the upload succeeds:

Step 3: Configure IAM policies to secure the bucket

Now, we have to add some policies to secure our bucket from unauthorized access.

From the S3 dashboard, click on the name of the bucket, then click on the Permissions tab. Scroll down to the Bucket policy section and click on its Edit button.

Now add the following bucket policy and make sure to replace bucket-name it with the name of your bucket. My bucket name is static-website-bucket-672569216574

{
“Version”: “2012–10–17”,
“Statement”: [
{
“Sid”: “PublicRead”,
“Effect”: “Allow”,
“Principal”: “*”,
“Action”: [
“s3:GetObject”,
“s3:GetObjectVersion”
],
“Resource”: “arn:aws:s3:::static-website-bucket-672569216574/*”
}
]
}

Now scroll down and click on Save changes. Your bucket has access to the public, as shown below.

Step 4: Configure the S3 bucket

Now we have specified the default page and error page for our website.

Go to S3 dashboard ➡ name ➡ Properties tab

Then scroll down to the Static website hosting section ➡Edit button ➡ select Enable for Static website hosting ➡ Host a static website for the Hosting type.

Enter the file for your Index document and Error document. The Error document is optional. I put index.html for both the Index document and the Error document.

Scroll down and click on Save Changes.

Once you save, you can click on the bucket website endpoint, it would display your website.

My Static Website S3 bucket URL is http://static-website-bucket-672569216574.s3-website-us-east-1.amazonaws.com

🎉🎉🎉🎉🎉 👏👏👏👏 Congratulations!!

You have hosted your Static Website on the AWS S3 bucket 🆒

http://static-website-bucket-672569216574.s3-website-us-east-1.amazonaws.com

Yay!🎉 That’s it!

The hosted zone for your site will cost $0.50 per month on the AWS S3 bucket. Amazing! You can get more information here.

Now Step 5: Serve content from the S3 bucket using CloudFront

From the Services drop-down, type CloudFront, it will take you to the CloudFront dashboard. Click on Create Distribution.

Now, under the origin settings section, click on the Origin Domain Name field, and from the drop-down select the S3 bucket that we have created. and then from the drop-down select the S3 bucket name. Also, for S3 bucket access select “Yes use OAI(bucket can restrict access to only CloudFront) and from the Bucket Policy, select Yes, update the bucket policy. And follow the below screenshots.

In the Default cache behavior section, keep HTTP and HTTPS, and others as it is. And finally, click on Create Distribution.

Once you click Create Distribution it will create Distribution and you will see the last modified option is Deploying. It might take 10–15 minutes to finish the deployment. You will see the last modified option has a date once the deployment is finished like below.

Now, click on the Distribution that just we created and copied the Distributed domain name, and put it on your favorite browser, you will see your Static Website. My one is https://d211cs2jdqzmn9.cloudfront.net/

🎉🎉🎉🎉🎉 👏👏👏👏 Congratulations!!

🎉🎉🎉🎉🎉 👏👏👏👏 You did it 😃. I hope this article helped you for setting up your Static Website, host it on the S3 bucket, and finally helped you Serve the content from the S3 bucket using CloudFront.

Learning from the error::

=>1st Error: Cloudfont “access denied”

-added the IAM user into the admin group

-provided IAM users full permission to CloudFront that’s fixed the access denied issue.

=> 2nd error: Cloudfont site is not getting CSS file. I have removed the files for now and will work on the CSS file later but put all the CSS code in the index.html file for now, 😃.

Happy Learning!! Thanks for following up and making time to read the article.