Overview
In today’s fast-paced digital world, establishing an online presence has become essential for businesses, bloggers, and individuals looking to share their content with the world. When it comes to hosting a website, various options are available. Still, for those seeking a simple, cost-effective, and highly available solution, Amazon S3 (Simple Storage Service) is an outstanding choice combined with CloudFront. This article explores the process of hosting a static website using Amazon S3, focusing on the benefits and use cases for this approach.
Use Case Scenario:
Consider you are a small business owner, a blogger, or a creative professional looking to create an online portfolio or showcase your work. You want to establish a web presence to reach a wider audience, promote your brand, or share your creative endeavors. In such scenarios, hosting a static website provides numerous advantages:
Cost-Effective Hosting:. Amazon S3 offers a cost-effective alternative, enabling you to host your website at a fraction of the cost, which is especially appealing for individuals and small businesses with budget constraints.
Easy Maintenance: Static websites are simpler than dynamic ones as they don’t rely on databases or server-side processing.
Scalability: Amazon S3 is designed for scalability, ensuring that your website can handle traffic spikes and growth without the need for complicated infrastructure adjustments.
High Availability: Your static website stored in the Amazon S3 can be combined with CloudFront to provide excellent reliability and uptime, reducing the chances of downtime affecting your website’s accessibility globally.
Security: S3 offers robust security features, including data encryption, access controls, and restricting access to specific users or groups. Your website and its content will be protected from unauthorized access.
Global Content Delivery: Leveraging Amazon CloudFront, you can ensure fast and efficient content delivery to users around the world, enhancing the user experience for international visitors.
So What is S3?
S3 is short for Simple Storage Service, which is an object-based storage system, that allows users to store, retrieve, and manage data such as files, images, videos, or other documents in a scalable, secure, and highly available manner. It uses Object-based storage rather than a file system for efficiency.
The key component of AWS S3 :
Bucket — It is a container in S3 that stores the object in it. Each bucket is unique in the whole AWS cloud.
Object — It is nothing but a package that contains Data and the unique ID (Key-value pair) associated with that object.
Key-value pair — These are just additional information regarding the Bucket, the user creates during the development of the bucket.
CloudFront?
CloudFront is a content delivery network (CDN) service offered by AWS (Amazon Web Services). It allows you to securely and efficiently deliver content, videos, applications, and APIs to your users globally by caching your content in edge locations close to your customers. This reduces latency, improves page loading times, and enhances the overall user experience.
How It's done?
We'll use Terraform (an IaC tool) to automate the whole process of Creating of bucket, making it public, and changing the Bucket policy to publicly accessible. Also enabling the Static website hosting permission for the Bucket to use S3 bucket solely for hosting static website.
Let's begin.
1. Terraform using AWS provider
terraform {
required_providers {
aws = {
source = "hashicorp/aws"
version = "~> 5.0"
}
}
}
provider "aws" {
region = "ap-south-1"
# Here add your credentials, or use AWS CLI to automatically detect it
}
This code snippet will tell Terraform to download the necessary plugin for creating resources for the AWS platform and deploy my resources in the Mumbai region (ap-south-1).
Terraform init
2. Creating AWS S3 bucket
resource "aws_s3_bucket" "static_website_bucket" {
bucket = "manishportfolio-20"
}
This resource module will create a basic S3 bucket
resource "aws_s3_bucket_public_access_block" "website_bucket_access" {
bucket = aws_s3_bucket.static_website_bucket.id
block_public_acls = false
block_public_policy = false
ignore_public_acls = false
restrict_public_buckets = false
}
This resource module will make the S3 bucket public.
resource "aws_s3_bucket_policy" "read_access_policy" {
bucket = aws_s3_bucket.static_website_bucket.id
policy = <<POLICY
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"${aws_s3_bucket.static_website_bucket.arn}",
"${aws_s3_bucket.static_website_bucket.arn}/*"
]
}
]
}
POLICY
}
This one will change its bucket policy to make it publicly accessible.
S3 Bucket Done!
3. Enabling Static website hosting in S3 bucket.
resource "aws_s3_bucket_website_configuration" "enabling" {
bucket = aws_s3_bucket.static_website_bucket.id
index_document {
suffix = "index.html"
}
error_document {
key = "error.html"
}
routing_rule {
condition {
key_prefix_equals = "docs/"
}
redirect {
replace_key_prefix_with = "documents/"
}
}
}
Now, this resource module will make our bucket compatible with hosting Static websites. Also, mention the index.html in index_document and error.html in the error_document so that S3 gets to know which HTML file (index.html) to run when somebody accesses the domain URL over the internet, and if something goes wrong which HTML file to execute (error.html)
- Upload the Necessary files Once you are able to see your publicly accessible bucket name in the dashboard. Now, upload the necessary HTML, CSS, and JAVA script files.
- Configure The CloudFront Distribution
The last final step is to Configure the CloudFront distribution and link our static website endpoint to CloudFront.
Add Static website endpoint URL in the origin domain and leave the rest, if you have created an SSL/TLS certificate then mention it in the Custom SSL certificate option. Once you create the Distribution it will take a couple of minutes to enable and once it is ready to use, click on the created CloudFront distribution copy the Distribution domain name, and paste it over the search engine.
Result
Now, once you are done with all these steps, copy the Distribution domain name, and paste it over the search engine and it enter and you will be redirected to your up and live static website with lightning-fast speed.
There you have it, your website up and running over the S3 bucket.
Conclusion
In conclusion, hosting a static website with Amazon S3 is a powerful and practical choice for anyone seeking to establish an online presence. It empowers individuals and businesses to showcase their content to a global audience without the financial burden or technical complexity often associated with web hosting. By following the step-by-step guide provided in this article, you can harness the capabilities of Amazon S3 to bring your website to life and connect with a diverse and growing audience globally using CloudFront distribution.
Please take a moment to share your valuable feedback, which will assist me in identifying the areas where I need to focus for improvement. Till then…
Happy Learning😊
Feel free to connect-
LinkedIn — Manish
Till then stay consistent & be happy!
Top comments (0)