Empower Your Website: A Step-by-Step Guide to Building a Secure and Blazing-Fast AWS S3 Website
Objective
Welcome to an exciting journey into the world of AWS as we unveil the secrets to building a highly secure and incredibly fast static website using AWS S3, Route 53, CDN, and SSL. In this comprehensive guide, we’ll walk you through two approaches: one using Terraform for quick setup and another taking a deep dive into the manual approach. By the end of this tutorial, you’ll have a fully functional website deployed on AWS, delivering an unforgettable user experience!
Prerequisites
Before diving in, let’s ensure you have the following prerequisites in place:
- An AWS account: To follow along, you’ll need access to an AWS account with the necessary permissions to create resources like S3 buckets, CloudFront distributions, and Route 53 hosted zones.
- Basic familiarity with AWS services: While we’ll provide detailed instructions, some familiarity with AWS services will be beneficial.
- A custom domain: Make sure you have a registered custom domain that you want to use for your website. This could be your personal blog domain or a new domain you wish to acquire.
Step 1: Terraform Approach (Quick Setup)
If you’re eager to get started quickly, the Terraform approach is your perfect match. We’ve prepared a Terraform module in our GitHub repository that simplifies the setup process. Simply grab the code, follow our brief instructions, and you’ll have your website up and running in no time!
Find the Terraform module here: https://github.com/AmanPathak-DevOps/Terraform-for-AWS/tree/master/Non-Modularized/S3-Static-Website
Step 2: Manual Approach (Deep Dive)
For those seeking a thorough understanding of each component, the manual approach will be your treasure trove. We’ll embark on a step-by-step journey, starting from creating an S3 bucket for hosting, configuring static website hosting, setting up a CloudFront CDN, securing your website with SSL using ACM, and finally, configuring Route 53 to link your custom domain. By the end of this section, you’ll be an AWS pro, capable of customizing every aspect of your website!
Click on ‘Create bucket’.
Provide the bucket name(try to give the bucket name the same as the domain name with the www. prefix).
It would be best practice for DevOps persons.
Keep the Bucket private by checking the below box and other things keep it as it is and click on ‘Create bucket’.
Here, We have uploaded our Static website content to the created bucket.
To host the static website, you need to enable the ‘Static website hosting’ option.
Click on ‘Properties’.
Click on ‘Edit’.
Select ‘Enable’ radio button and provide the files according to your website code.
Here, We have enabled the Static website hosting and We will try to check whether the hosting is successful or not by clicking on ‘Bucket website endpoint’.
Now, We have got an error message 403 Forbidden.
We are getting this error because our Bucket is private.
Let’s move to another AWS Service Route53 to assign the domain name to our Static website.
Click on ‘Create hosted zone’.
Provide the domain name according to your domain name and keep the things remaining the same and click on ‘Created hosted zone’.
After creating, We will get two records only.
The NS type host will be needed to link our main domain which is from get.tech domain provider to Route53 AWS Service.
Now, copy the NS type from Route53 Service paste it into your Name server section according to your domain account, and click to update them.
Now, We need to provide the SSL/TLS certificate to our Static website to make it secure(Connection Secure).
To do that, click on ‘Request’.
As we are hosting our website publicly, choose the first option and click on ‘Next’.
Now, provide the normal domain name and if your domain name does not include www in the prefix(example.com), provide one more domain name with the www prefix(www.example.com) keep the things as it is, and click on create certificate.
Here, We got Pending validation status because we have to link our certificate with our domain name.
To do that, Click on ‘Certificate ID’.
Click on ‘Create records in Route53’ which will create two more records in the created Route53 hosted zone.
Click on ‘Create records’.
As you can see here, the two Record names have been reflected in the Route53 Hosted zone.
Now, the two new records will validate the domain name with the help of NS type record because the Name servers are attached to the main domain provider.
Here, Amazon has issued the Certificate after completing the Validation of our domain.
Let’s create AWS CloudFront because we have to host our website with low latency. So anyone can access our website from any corner of the world with low latency.
Click on ‘Create distribution.
In the ‘Origin domain’, We are providing the bucket name where our Static website content is stored.
In origin access’, select Legacy access identities and click on ‘Create new OAI’ which will create a bucket policy to access the S3 bucket by CloudFront having a Public access block.
Don’t forget to select ‘Yes, update the bucket policy’. Otherwise, you have to update the bucket policy on your own which is not a beginner’s task.
For the AWS WAF, disable it for now.
You can set the class according to you, I have selected all edge locations one for the least latency.
Add the domain name with the www prefix and without the www prefix as well in ‘Alter domain name(CNAME)’.
Now, Provide the Custom SSL certificate that we have created through AWS Certificate Manager.
Now, provide the main content file of your website in ‘Default root object’. I have added index.html according to my website content and clicked on ‘Create distribution’,click
Once you try to access your Static website through CloudFront domain name. You will get this error.
If yes, then give it 3 to 5 minutes. If it’s still getting the same, then try to create a CloudFront distribution again because you have misconfigured something.
After some time, My Static website hosting was done.
Now, I am expecting the same content from my main domain as well.
To do that, you have to route the application from your domain to the Cloudfront domain.
Click on ‘Create record’.
Here, we are routing traffic to CloudFront distribution. So provide the CloudFront distribution domain name and keep the things that remain the same according to your domain name and click on ‘Define simple record’.
Now, I have created a new record for my domain name with www prefix(www.example.com). So do the same thing except Record name and click on ‘Define simple record’.
Click on ‘Create records’.
You have to wait some minutes or an hour according to your domain provider.
Here, I am browsing my website without the www prefix(example.com) domain name and getting the content of my website.
Here, I am browsing my website www prefix(www.example.com) domain name and getting the content of my website.
Congratulations!!!! You have successfully deployed your Static Website on the AWS S3 bucket by providing the Connection secure and domain name. Also, don’t forget that your application can be accessed faster than the other 69% of applications.
Just kidding, I don’t know but the application provides the content with extremely low latency.
Conclusion
Congratulations on mastering the art of building a lightning-fast, secure AWS S3 website! With this newfound knowledge, you’re now empowered to share your stories, products, or ideas with the world. Whether you prefer the quick Terraform approach or the in-depth manual journey, your website is now ready to shine.
Remember to regularly update your website with fresh content and maintain its security with SSL certificate renewals. If you encounter any issues along the way, don’t hesitate to explore AWS’s vast documentation or seek help from the AWS community.
Happy website building! Feel free to share your masterpiece with us, and remember to keep spreading the knowledge.
Follow us for more exciting AWS guides and tutorials!
Disclaimer: The implementation guide for both approaches can be found in the provided GitHub repository. The blog focused on the overall project, prerequisites, and the reasoning behind the choices made. For detailed steps, refer to the repository.
If you have any other queries, feel free to reach out to me on
LinkedIn Profile: https://www.linkedin.com/in/aman-devops/
GitHub Profile: https://github.com/AmanPathak-DevOps
Happy Learning
Aman Pathak
