[This post has been revised with new content]
Because of how inexpensive s3 buckets are for storing/retrieving objects, it has become a very attractive option for hosting static websites. Examples of static website are like this blog site, sites with information and so forth.
There are mainly two ways to host a static website in a s3 bucket.
- Scenario 1 : Host static website on s3 bucket and configure your external domain/website with that s3 bucket using route 53
- Scenario 2 : Host static website on s3 bucket and then configure CloudFront to distribute that website content across the content delivery network (CDN) and then configure your external domain/website with the CloudFront domain name.
In this post, I will be explaining both scenarios.
For this scenario to work, the registered domain and the s3 bucket must have the same name.
So if the registered domain was “learntheartofsoftwaretesting.com” then the s3 bucket should be created with the name [learntheartofsoftwaretesting.com].
As shown below, a s3 bucket has been created with the name [learntheartofsoftwaretesting.com]. Please ensure that Block Public Access is disabled/Off, otherwise the static website cannot be viewed by the public.
Once the s3 bucket is created, go to Properties > Static Website section of the s3 bucket and enable static website hosting as below.
This means that you need to create a static website using an index.html file. In this case, I have created am index.html file with an image and used some css style sheet to design the html page. You do need some html knowledge to do this. The content of these files are shown below (very simple actually) for your convenience. You are free to use any advanced tool to create your own website content and files.
Now upload the files into the s3 bucket.
If the upload is successful, then select all the files and click Action> Make public. This makes the files visible to public. Without this action, files will not be available to public for viewing across the world because by default access is denied.
Now the static website should be accessible over its bucket website endpoint.
Click on the bucket website endpoint to view the website.
But you want this website to show up when you type: http://learntheartofsoftwaretesting.com.
To do this, go to Route 53 > Hosted Zones in AWS console and then click on the domain name. In this case, learntheartofsoftwaretesting.com.
Then click on “Create Record” and create a record as below. Few things to note here.
- Under the record name, you could have entered blog.learntheartofsoftwaretesting.com. In that case the url would have been http://blog.learntheartofsoftwaretesting.com. If you leave the first block empty, then the url will be http://learntheartofsoftwaretesting.com.
- Under value/route traffic to, I have selected “Alias to S3 website endpoint”. Now select the proper region. If your s3 bucket has been named properly, then it will show up in the search box (shown here with red rectangle). But if it is not named correctly, then search will not return any value.
- When creating the record set, I selected Simple Routing. You are free to select other forms of routing here. Refer to the routing policy screenshot below.
Once the record set is created, it could take 24 – 32 hours before the changes propagate to all the name servers. In our case, if we now type the url: http://learntheartofsoftwaretesting.com, we will see our static website from the s3 bucket. However no one from the public will realize that the website is hosted on a s3 bucket.
Notice how the url is still HTTP? Well, if you want to host the static website on s3 bucket so that it is only accessible over HTTPS, then you would have to use the solution from scenario 2.
For the purpose of demonstration, I will consider a mock scenario here.
I run a small startup company. Instead of hosting my company website with an Internet Service Provider, I would like to host my website on a S3 bucket and then distribute the content over CloudFront. Using CloudFront means that my website content, especially the large media content can be quickly delivered to global users over the Content Delivery Network (CDN) or edge servers and is accessible only over HTTPS protocol.
The infrastructure is setup as below:
- Create a static website with an html page and an image added to the html webpage (for demo purpose)
- Create an s3 bucket to host the static website in Sydney region (Asia Pacific (Sydney) -ap-southeast-2)
- Copy the html page and image to the s3 bucket
- Now go to s3>Properties and select Static website hosting, properly configure the settings with index document (index.html) and error document (error.html). Also ensure that the objects can be accessed by public. So the url for the static website will be: http://<bucket-name>.s3.<region-name>.amazonaws.com/index.html
- Create a second s3 bucket in a different region and set it up as a backup s3 bucket (Asia Pacific (Singapore) – ap-southeast-1) so that cross region replication can be setup
- Create a CloudFront distribution network and set it up with the s3 bucket origin name
- Once the CloudFront is created, it will be accessible over its domain name
- [Additional Step – if you can register a domain] Setup a hosted zone (a domain you have registered) and then create record sets to configure your registered domain to point to the domain ID of the CloudFront. This way, your domain url will always redirect to the CloudFront url.
- [Additional Step – setup SNS notification to send email in case objects in s3 bucket are deleted] Please refer to below AWS documentation for setting up SNS subscription so that when any object delete related event happens, it sends off an email notification to designated email address. https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/US_SetupSNS.html https://docs.aws.amazon.com/AmazonS3/latest/user-guide/enable-event-notifications.html
For reference on how to setup CloudFront distribution for static website, please refer to AWS documentation: https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-serve-static-website/
Here are the screenshots of what the website looks like when accessed over s3 and over CloudFront.
Static website accessed over s3 bucket:
Static website accessed over CloudFront distribution:
The domain name of CloudFront instance is as below. Observe the SSL certificate in the CloudFront distribution screenshot. Since learntheartofsoftwaretesting.com is a registered domain, it requires a SSL certificate and had to be requested from appropriate certificate authority.
Same as Scenario 1, create a record set in the registered domain and configure it with the CloudFront endpoint as below. Few things to note here.
- Under the record name, I have entered mobile.learntheartofsoftwaretesting.com. This means that I am mapping the s3 bucket static website against the url https://mobile.learntheartofsoftwaretesting.com.
- Under value/route traffic to, I have selected “Alias to CloudFront distribution”.
- Unlike scenario 1, the region for CloudFront will always be North Virginia [us-east-1]. If you go to CloudFront, you will see that all other regions are disabled and only North Virginia is active as a region.
- Similar to scenario 1, I selected Simple Routing. You are free to select other forms of routing here.
Once the record set is created, it could take 24 – 32 hours before the changes propagate to all the name servers. In our case, if we type the url: https://mobile.learntheartofsoftwaretesting.com, we will now see our static website from the s3 bucket, distributed over CloudFront and accessible only over https.
The type of testing that you would want to do here are:
- Configure that the s3 bucket access logs are recorded in the backup s3 bucket. Verify that every time the static website is accessed, logs are recorded and are accessible only by the bucket owner.
- Use vpn to change your location and then access the website, there should be no discernible difference due to use of Edge server, no matter where your traffic originates
- The objects in s3 bucket should be encrypted if encryption is enabled
- Update the static website content in s3 bucket over terminal using CLI command
- Add new content to the static website in s3 bucket and this should be available over CloudFront distribution once the status changed from “In Progress” to “Deployed“
- Check that all objects, cross region replicated to the backup s3 bucket, cannot be accessed over their object url