Voiced by Amazon Polly |
Overview
In this blog, we embark on a user-friendly exploration of creating a static website hosting solution on AWS, blending simplicity with powerful tools. Amazon S3 takes center stage, offering secure and scalable storage for our website’s content. Paired with Amazon CloudFront, the global content delivery network, we optimize performance by bringing our website closer to users worldwide. Adding a touch of magic is Terraform, our trusty tool for turning infrastructure into code. This guide aims to demystify the process of making static website hosting on AWS an accessible and efficient endeavor.
Pioneers in Cloud Consulting & Migration Services
- Reduced infrastructural costs
- Accelerated application deployment
Introduction
In today’s digital landscape, establishing an online presence is paramount, and the foundation of any successful website lies in its hosting infrastructure. This blog delves into the seamless orchestration of a static website hosting solution on Amazon Web Services (AWS) using a powerful combination of Amazon S3 for storage and Amazon CloudFront for content delivery. Leveraging the efficiency of Terraform, a leading infrastructure as a code tool, we embark on a journey to create a robust and scalable architecture. Whether you’re a seasoned cloud engineer or a newcomer to AWS, this guide aims to demystify the process and empower you to deploy and manage your static website effortlessly and with precision. So, let’s dive into the nuts and bolts of this seamless orchestration and discover how these tools redefine the landscape of hosting in the AWS cloud when combined.
Architecture
At the heart of our static website hosting solution on AWS lies Amazon Simple Storage Service (S3), a powerhouse in scalable and durable object storage.
This dynamic duo— Amazon S3 and Amazon CloudFront—ensures high availability and low-latency access and streamlines the deployment and scaling of our static website. Let’s explore how this powerful combination, coupled with the power of Terraform, shapes the landscape of our AWS-based static website.
Creating the Terraform script
To create the static website hosting, we need to create some resources on AWS. This should be in a sequence. We need to do the following:
- Create an Amazon S3 bucket and block public access
- Create an Amazon CloudFront origin access control for the Amazon S3 bucket
- Create an Amazon CloudFront distribution
- Create an Amazon S3 bucket policy to allow access to objects from Amazon CloudFront
Step-by-Step Guide
Create an Amazon S3 bucket and block public access
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
variable "bucket" { default = { name = "some-website-hosting-bucket-876431" } } resource "aws_s3_bucket" "static_webiste_bucket" { bucket = var.bucket.name tags = { Name = var.bucket.name } } resource "aws_s3_bucket_public_access_block" "static_webiste_bucket_block_public_access" { bucket = aws_s3_bucket.static_webiste_bucket.id block_public_acls = true block_public_policy = true ignore_public_acls = true restrict_public_buckets = true } |
Create an Amazon CloudFront origin access control for the Amazon S3 bucket
1 2 3 4 5 6 |
resource "aws_cloudfront_origin_access_control" "s3_oac" { name = "s3_oac" origin_access_control_origin_type = "s3" signing_behavior = "always" signing_protocol = "sigv4" } |
Create an Amazon CloudFront distribution
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
resource "aws_cloudfront_distribution" "s3_distribution" { origin { domain_name = aws_s3_bucket.static_webiste_bucket.bucket_regional_domain_name origin_id = "static_bucket" origin_access_control_id = aws_cloudfront_origin_access_control.s3_oac.id } enabled = true is_ipv6_enabled = true default_root_object = "index.html" default_cache_behavior { allowed_methods = ["DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT"] cached_methods = ["GET", "HEAD"] target_origin_id = "static_bucket" viewer_protocol_policy = "allow-all" min_ttl = 0 default_ttl = 3600 max_ttl = 86400 forwarded_values { query_string = false cookies { forward = "none" } } } price_class = "PriceClass_200" restrictions { geo_restriction { restriction_type = "whitelist" locations = ["IN"] } } viewer_certificate { cloudfront_default_certificate = true } } |
Create an Amazon S3 bucket policy to allow access to objects from Amazon CloudFront
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
resource "aws_s3_bucket_policy" "allow_s3_access_policy" { bucket = aws_s3_bucket.static_webiste_bucket.id policy = data.aws_iam_policy_document.allow_s3_access_policy_document.json } data "aws_iam_policy_document" "allow_s3_access_policy_document" { statement { sid = "access_s3_from_cloudfront" principals { type = "Service" identifiers = ["cloudfront.amazonaws.com"] } actions = ["s3:GetObject"] resources = ["${aws_s3_bucket.static_webiste_bucket.arn}/*"] condition { test = "StringEquals" variable = "AWS:SourceArn" values = [aws_cloudfront_distribution.s3_distribution.arn] } } } |
If you want to view the full working code, please visit this GitHub link.
Note: After running the Terraform script successfully, put a file named “index.html” in your Amazon S3 bucket. This will be your default home page for the static website.
Conclusion
In wrapping up, our adventure in making a static website on AWS was like putting together puzzle pieces for a smooth online experience. Amazon S3 securely held our website’s stuff, while Amazon CloudFront made it load faster for people worldwide. Using Terraform was like having a magic wand that made everything fall into place. As a Cloud Engineer with GCP and AWS badges, you’ve shown how to make tech work effortlessly. So, as you step into the world of AWS hosting, it may be easy and scalable and take your online presence to new levels.
Drop a query if you have any questions regarding Amazon S3 or Amazon CloudFront and we will get back to you quickly.
Making IT Networks Enterprise-ready – Cloud Management Services
- Accelerated cloud migration
- End-to-end view of the cloud environment
About CloudThat
CloudThat is an award-winning company and the first in India to offer cloud training and consulting services worldwide. As a Microsoft Solutions Partner, AWS Advanced Tier Training Partner, and Google Cloud Platform Partner, CloudThat has empowered over 850,000 professionals through 600+ cloud certifications winning global recognition for its training excellence including 20 MCT Trainers in Microsoft’s Global Top 100 and an impressive 12 awards in the last 8 years. CloudThat specializes in Cloud Migration, Data Platforms, DevOps, IoT, and cutting-edge technologies like Gen AI & AI/ML. It has delivered over 500 consulting projects for 250+ organizations in 30+ countries as it continues to empower professionals and enterprises to thrive in the digital-first world.
FAQs
1. Why choose AWS for hosting a static website?
ANS: – AWS provides a robust infrastructure with services like Amazon S3 and Amazon CloudFront, offering scalability, reliability, and a global reach for your static website.
2. How does Amazon CloudFront improve website performance?
ANS: – Amazon CloudFront is a content delivery network (CDN) that caches static content at edge locations globally. This reduces latency and accelerates content delivery to users, enhancing the overall performance of your website.

WRITTEN BY Avinash Kumar
Avinash Kumar is a Senior Research Associate at CloudThat, specializing in Cloud Engineering, NodeJS development, and Google Cloud Platform. With his skills, he creates innovative solutions that meet the complex needs of today's digital landscape. He's dedicated to staying at the forefront of emerging cloud technologies.
Comments