Host a Static Website Using AWS S3 and AWS CloudFront

This is a beginner’s guide to hosting a static website on AWS using an S3 bucket and CloudFront CDN.

The S3 bucket is an object storage service provided by AWS, S3 stands for simple storage service. The S3 bucket is often used for storing files. S3 bucket is also used for static website hosting and backups.

AWS CloudFront is a CDN (content delivery network) service provided by AWS. A content delivery service helps you deliver content with the help of a network that consists of multiple servers spread across the world. A CDN reduces the load on the main origin server and optimizes latency by caching the website on the edge locations.

Creating an S3 bucket:

First of all, log in to your AWS console and go to the S3 Management console by typing S3 in the search bar. You should see a page similar to this (ignore the created bucket).

Remember that S3 is a global service that’s why it says global under the region selection area. S3 is a global service but the S3 bucket is a regional resource.

To create a bucket click on the create bucket button and you’ll see a similar page to this one (this AWS UI might update over time but the concept will remain the same).

Give your bucket a name. In AWS S3 the name of the bucket must be globally unique because two different buckets with the same name can not exist on AWS even if they are across different AWS accounts or regions. So you need to choose a unique name. After entering the name choose a region for your bucket. In my case, the name of the bucket and region is as follows.

Then go and uncheck the block all public access option and check the ‘I acknowledge that the current settings might result in this bucket and the objects within becoming public’ option like the following.

This will make your bucket publically accessible, which means now anyone with an internet connection can access your bucket’s data. Click on the create bucket button. (Since your bucket is public you shouldn’t store any sensitive data inside your bucket)

Once your bucket is created you can see your bucket in the S3 console like the following.

Uploading static website files:

I have created a simple static website, you can get it from here https://github.com/Affan-7/simple-static-site. Now let’s upload this code to our S3 bucket. To upload the files first click on your bucket and you’ll see something like this.

Click on the upload button and upload the required files and folders. And then click the upload button once again.

Configure the bucket:

Once your files are uploaded go back to your bucket and click on the permissions tab. Inside the permissions tab find the object ownership section and click on the edit button and enable the ACLs like the following, then click on the save button.

After enabling The ACLs go back to the objects tab. Inside the object tab select all objects and under the actions menu click on the ‘make public using ACL’ button.

Now your bucket objects are public, but there is one more thing to do. You need to configure your bucket for static website hosting. To do that go inside the properties tab of your bucket and scroll down to the static website hosting section click on the edit button, enable the static website hosting feature and type index.html inside the index document field then click on the save changes button.

Access your website:

Once your bucket is configured you can access the URL of the bucket. Go to the properties tab and scroll down to the ‘static website hosting’ section and copy the URL.

Paste the URL into the browser or simply click on it and you’ll see the following page.

Now we have the URL of the website but we can also set up a CDN for higher availability and low latency service. Setting up a CDN will also save some costs.

Setting up amazon cloudfront:

To setup a cloudfront distribution go the cloudfront service in AWS. Then click on create a cloudfront distribution button. In the origin domain dropdown menu select the bucket that is hosting your website. And click on use website endpoint button like the following image.

Go to the Web Application Firewall section and click on the ‘Do not enable security protections’ button for the sake of simplicity.

Then scroll down and click on the ‘create distribution’ button. It will take a few minutes for the deployment. You can check the status of your CDN under the ‘General’ tab.

Once the deployment is complete copy the distribution domain name and paste it into the browser. At this point, you should see your website running in your browser. You can also navigate to the different pages by clicking on the links.

Setting up OAI (Origin Access Identity):

You have successfully created a cloudfront distribution. But there is still one more thing to fix. Your bucket is still publically accessible. And your users can access the website directly from the S3 bucket instead of your cloudfront distribution. To fix that we need to implement OAI (Origin Access Identity).

The OAI allows the cloudfornt distribution to access the S3 bucket even if it’s private using S3 bucket policy.

To setup OAI go to your distribution. Go on the origns tab, select the origin and click on the edit button.

Remove your current origin domain then select your bucket.

And this time don’t click on the use website endpoint button.

Scroll down to the origin access section and select the ‘Origin access control settings’ and click on ‘Create control setting’.

Give it a description and click on the sign requests button. Then click on ‘Create’ button.

Once you have created your OAI it will give you an S3 policy. Click on copy policy button.

Go to your S3 bucket’s permission tab. Under the bucket policy section click on edit button, paste the policy and save it. Once you’ve updated the policy you can make your bucket private so only cloudfront can access it through the bucket policy.

Under the bucket permissions tab edit the bucket permissions and select ‘Block all public access’ and save the settings.

Now back to the cloudfront page and click on save changes button.

Go to the cloudfront general tab and edit the settings.

Scroll down to the ‘Default root object’ and type ‘index.html’.

Congratulations 🎉️ on deploying your static website.

Clean up (Optional):

Follow these steps to delete all the resources.

Step 1: Go to cloudfront select your distribution and click on the ‘Disable’ button.

Step 2: Once your distribution is disabled you can delete it by selecting your distribution and clicking on the delete button.

Step3 : In cloudfront dashboard go to origin access section and delete your origin access control.

Step 4: To delete an S3 bucket you need to delete the bucket objects first. Go to your S3 bucket, select all the objects and click on the delete button.

Step 5: Once all of your objects are deleted go to S3 console, select your bucket then click on the delete bucket button.

More content at PlainEnglish.io.

Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.