Hosting Static Websites on AWS
If you have a static website and would love to host it on AWS at a low cost while giving your end-users the best experience then you are at the right place!
In this post, I would show you how to host a static website on AWS using just two services; Amazon S3 and Amazon CloudFront. First, let us have a look at each of these services.
Amazon S3
Amazon S3 is a service that provides you with the ability to store and retrieve any amount of data from anywhere. The data can be in any form, it can be in the form of images, videos, and any kind of files, be it text files, HTML files, or CSS files. All the related data, for example, all files that make up the static website, will be stored in a bucket.
At this point, you might have guessed it that you would be using Amazon S3 service to store all the files and folders that would make up your website. But why Amazon S3?
- Amazon S3 is designed for 99.999999999% of data durability because it automatically creates and stores copies of all S3 objects across multiple systems. In short, you would never lose any file or folder that you have uploaded to S3.
- You can easily scale your storage resources up and down without upfront payments. So whenever you have new files to add to your website, you would easily be able to add them without having to reserve space beforehand.
- If you try to achieve the above-mentioned benefits by spinning up servers on AWS, you would end up paying a lot. Using S3 to host your website is cost-effective than using servers.
Amazon CloudFront
Amazon CloudFront is a fast content delivery network (CDN) service that would securely deliver your website to the end-users. Amazon has a worldwide network of mini-data centers known as Edge locations. When a user requests some content that is configured to get delivered via the CloudFront service, the content is first fetched from the edge location which is close to the user base. If the content is not present in that particular edge location, then the content is pulled from its original place of storage and cached in the edge location. Next time, a user who is close to that edge location, would be able to access your website at a faster rate.
Although I have already mentioned some of the benefits of using CloudFront service in the above paragraph, I would go through them again in bullet format:
- CDN service speeds up the delivery of static and dynamic web content like web pages, images, CSS, javascript files by caching the files in an edge location which is close to the user base.
- Amazon CloudFront is a highly-secure CDN that provides both network and application level protection.
Uploading Your Website To A Bucket
Now that we know that our website contents would be held in Amazon S3 bucket and it would be served by Amazon CloudFront, let us go ahead and actually configure these two services to serve our static website!
Step 1: Create a bucket
Before we go any further, let us create a bucket through our AWS management console. Under the services section, select (or search) for the S3 service.
After heading into the service, you would see a Create bucket button. Click on it. You will now be taken to another page where you will need to enter a name for the bucket and adjust some configurations. The name must be unique and should not contain spaces or uppercase letters. You will also need to uncheck Block all public access checkbox because you want your website to be accessible by everyone on the internet.
Click Create bucket button, which will be found on the bottom of the page.
Step 2: Upload static website contents
At this point, you will be able to see your bucket which you created in step 1. Select your bucket and hit the Upload button.
You will now be able to drag the files over there or add them via the Add files button.
Step 3: Configure the bucket for static website hosting
Next, select the Properties tab, then choose Static website hosting, and then select Use this bucket to host a website. Under Index document, enter the name of your HTML file that would serve as the landing page, in most cases, it should be index.html. As for the Error document, enter the name of the document that would be served if there are any 4XX class errors. If you do not specify a custom error document and an error occurs, Amazon S3 returns a default HTML error document. As for me, I would leave the Error document field blank. Don’t forget to hit the Save button!
Step 4: Add bucket policy
In Step 1, when we were creating the bucket, we unchecked the Block all public access checkbox so that the users who are trying to access our website do not get blocked. We will now add a bucket policy to grant public read access to the bucket. When we grant public read access, anyone on the internet will be able to access our website.
Under the Permissions tab, select Bucket policy. To grant public read access for your website, copy the following bucket policy, and paste it in the Bucket policy editor.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::your-bucket/*"
]
}
]
}In the above policy, replace your-bucket with the name of your bucket.
Hit the Save button!
This is it for configuring our bucket to be able to serve our website through the internet! Next, we would configure the CloudFront service to serve our website so that users can access the website at higher speeds!
Configuring CloudFront Service
Step 1: Create CloudFront Distribution
From the services section, select CloudFront service which is found under the Networking & Content Delivery section (or you can type it out in the search box)
On the CloudFront page, under Distributions section, click on the Create Distribution button.
As for the delivery method, select Web by clicking on the Get Started button under the Web section.
Under Origin Domain Name, select the S3 bucket that you created in the previous step, and under Origin Path type / to indicate the root level. You can leave the rest of the options as default (you may as well explore them).
Scroll to the bottom and hit the Create Distribution button.
NOTE: It may take up to 10 minutes for the CloudFront Distribution to be created.
Access Your Website!
Once the status of your distribution changes from In Progress to Deployed, copy the endpoint URL for your CloudFront distribution found under the Domain Name column.
Open a web browser of your choice and paste the endpoint URL in the URL bar and append /index.html to access the index page.
Before I end this article, I would like to let you know that you can route the traffic to the distribution using your own domain name by using Route53 service. Although I will not be going through the Route53 service, I will leave you a link that you can follow and configure Route53 to route the traffic to your distribution via your domain name: https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/routing-to-cloudfront-distribution.html
This is it friends! I hope you enjoyed reading the post and are now able to host your own static website on AWS!
