Effortless Global Content Delivery: Hosting a Static Website with Amazon S3, CloudFront, and Route 53

Introduction?

In this article, We will explore the benefits of using an S3 bucket to host a static website and its limitations. One powerful solution for hosting a static website is leveraging the combination of Amazon S3, CloudFront, and Route 53 provided by Amazon Web Services (AWS). This trio of services offers a seamless infrastructure that ensures optimal performance, global content delivery, and enhanced security. We will discuss the benefits of this combination of services, such as scalability, cost efficiency, and high availability. By the end of this guide, you will have a clear understanding of how to harness the power of Amazon S3, CloudFront, and Route 53 to create a robust infrastructure for your static website.

So, if you're ready to take your website to the next level and provide an exceptional user experience to your visitors, let's dive in and learn how to host a static website in Amazon S3 with CloudFront and Route 53.

Hosting a website in Amazon S3:

Amazon Simple Storage Service (Amazon S3) can host static websites without the need for a web server. The website is highly performant and scalable at a fraction of the cost of a traditional web server. Amazon S3 is storage for the cloud, providing you with secure, durable, highly scalable object storage.

A simple web services interface allows you to store and retrieve any amount of data from anywhere on the web. Each S3 object can be zero bytes to 5 TB in file size, and there’s no limit to the number of Amazon S3 objects you can store.

Benefits of using AWS S3 for web hosting:

• Cost-effective: S3 offers a pay-as-you-go model, which means you only pay for the storage and bandwidth used. This can be significantly cheaper than traditional web hosting providers, especially for websites with low traffic.
• Scalability: S3 automatically scales to handle any amount of traffic and storage, eliminating the need to worry about capacity planning.
• High availability: S3 provides 99.999999999% durability, ensuring your website is always available to your users.
• Easy to use: S3 has a simple and intuitive web interface, making it easy to create and manage your website.
• Security: S3 supports encryption at rest and in transit, ensuring your website data is secure.

Amazon S3 is easy to set up and use and is designed to store and retrieve any number of files or objects from anywhere on the internet. However, there are several limitations to using Amazon S3 to host a static website.

Limitations of using AWS S3 for web hosting:

• Limited scalability: While Amazon S3 can handle a large amount of traffic, it may not be able to handle extremely high traffic spikes.
• Limited caching: S3 doesn't have the same level of caching as traditional web hosting providers, which can result in slower website performance.
• Limited access control: S3 has limited access control options, which can make it difficult to restrict access to certain parts of your website.
• Limited customization: S3 doesn't support custom error pages, making it difficult to provide a professional-looking error page to your users.
• Using Amazon S3 to host a static website incurs several costs, including:Storage costs: You are charged for the storage of your website files in S3. This cost depends on the amount of data stored and the storage class chosen (Standard, Intelligent-Tiering, etc.). The pricing varies based on the AWS region and the storage class selected.Data transfer costs: Amazon S3 charges for data transferred out of the bucket. This includes both data transfer to internet users accessing your website and data transfer between AWS regions if your website receives traffic from different regions.Requests costs: S3 charges for requests made to your objects, such as GET requests to retrieve files or PUT requests to upload files. These costs depend on the number and type of requests made.Transfer acceleration (optional): If you choose to enable Amazon S3 Transfer Acceleration for faster content delivery, additional costs may apply based on the amount of data transferred using this feature.

Factors contributing to page load latency

To explore factors that contribute to latency, we use the example of a user in Singapore visiting a web page hosted from an Amazon S3 bucket in the US West (Oregon) Region in the United States. From the moment the user visits a web page to the moment it shows up in the browser, several factors contribute to latency:

• FACTOR (1) Time it takes for the browser (Singapore) to request the web page from Amazon S3 (US West [Oregon] Region).
• FACTOR (2) Time it takes for Amazon S3 to retrieve the page contents and serve up the page.
• FACTOR (3) Time it takes for the page contents (US West [Oregon] Region) to be delivered across the Internet to the browser (Singapore).
• FACTOR (4) Time it takes for the browser to parse and display the web page. This latency is illustrated in the following figure.

Solution

Hosting a static website in Amazon S3 with CloudFront and Route 53 is one of the best solutions for optimizing our application’s latency, performance, and security.

Cloud Front

Amazon CloudFront is a web service that speeds up the distribution of your static and dynamic web content, such as .html, .css, .js, and image files, to your users. CloudFront delivers your content through a worldwide network of data centers called edge locations. When a user requests content that you're serving with CloudFront, the request is routed to the edge location that provides the lowest latency (time delay), so that content is delivered with the best possible performance.

CloudFront has edge servers in locations all around the world, as you can see from the following map:

Cloud Front also offers features such as SSL/TLS encryption, access controls, and real-time metrics.

Route 53

Route53 is a highly available and scalable cloud-based DNS service offered by AWS. It allows you to route traffic to resources such as CloudFront, EC2 instances, S3 buckets, and Elastic Load Balancers.

You can use Route 53 to perform three main functions: domain registration, DNS routing, and health checking without coding requirements using the AWS Management Console.

AWS Certificate Manager

AWS Certificate Manager (ACM) is a service by AWS that makes it easy to provision, manage, and deploy SSL/TLS certificates for use with AWS services and your applications.

SSL/TLS certificates are used to establish a secure connection between a web browser and a web server and to protect sensitive information like credentials and payment details by encrypting the data.

How CloudFront delivers content to your users

The following figure describes how CloudFront delivers content to users when users request objects:

1. A user accesses your website or application and sends a request for an object, such as an image file or an HTML file.
2. Route 53 routes the request to the nearest CloudFront edge location.
3. CloudFront checks its cache for the requested object. If the object is in the cache, CloudFront returns it to the user. If the object is not in the cache, CloudFront does the following:a. CloudFront compares the request with the specifications in your distribution and forwards the request to your Amazon S3 origin for the corresponding object.b. The origin server sends the object back to the edge location.c. CloudFront begins to forward the object to the user and also adds the object to the cache for the next time someone requests it.

Hosting a static website with Amazon S3, CloudFront, and Route 53

The following figure shows our deployment architecture.

This architecture provides a reliable, scalable, and secure infrastructure for delivering our website's content globally while maintaining cost efficiency and ease of management.

Here are the general steps to create our deployment architecture to host a static website:

1. Register a custom domain name. (example.com) Please refer to https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/domain-register.html to register a domain with Route53.
2. Create a certificate for your domain.: Create an SSL/TLS certificate in AWS Certificate Manager (ACM), and attach it to the CloudFront distribution. This certificate enables the distribution to serve your domain’s website securely with HTTPS. Note: Make sure you create the certificate in the US East (N. Virginia) Region.
3. Prepare your static website files. (HTML, CSS, and JavaScript files)
4. Create two Amazon S3 buckets. one for the root domain(example.com) and the other one for your subdomain(www.example.com). Upload website files to your subdomain bucket. configure your root domain bucket for website hosting and redirect all requests to the subdomain. (all requests for example.com to be redirected to www.example.com).
5. Create CloudFront distribution: ?Create a CloudFront distribution for your subdomain with the origin domain as a subdomain bucket (www.example.com), to enable your website to use HTTPS so people can view it securely.
6. Create a CloudFront distribution for your root domain with the origin domain as the website endpoint, to have it use HTTPS when its URL is redirected to the subdomain.
7. Wait for CloudFront distribution deployment: It may take some time for the CloudFront distribution to deploy across the edge locations. Wait until the distribution status changes to "Deployed."
8. Create a Route 53 hosted zone: When you registered your domain, Amazon Route 53 automatically created a hosted zone with the same name. In the Route 53 console, create a hosted zone for your domain and subdomain. Note down the nameservers provided by Route 53 for later use.
9. Create a record set: Add a record set in your Route 53 hosted zone to associate your domain and subdomain with your CloudFront distributions. Choose "Alias" as the routing policy and select your CloudFront distribution as the target.
10. Update DNS settings: Update the DNS settings of your domain or subdomain with the nameservers provided by Route 53. This ensures that DNS queries for your website are routed to Route 53.
11. Wait for DNS propagation: DNS changes may take some time to propagate globally. It could take anywhere from a few minutes to several hours for the changes to take effect.
12. Test your website: Once the DNS propagation is complete, visit your domain or subdomain in a browser to verify that your static website is accessible via CloudFront and Route 53.

To verify that the website is working correctly, open a web browser and browse to the following URLs:

• https://www.your-domain-name, for example, www.example.com – Displays the index document in the www.your-domain-name bucket
• https://your-domain-name for example, example.com – Redirects your request to the www.your-domain-name bucket

Hosting a static website in Amazon S3 with CloudFront and Route 53 offers several benefits:

1. Scalability and Global Content Delivery: Amazon S3 combined with CloudFront allows for global content delivery through an extensive network of edge locations. This reduces latency and improves the website's performance for visitors worldwide.
2. High Availability and Redundancy: Amazon S3 provides high durability and availability for your static website's files. CloudFront and Route 53 further enhance availability by distributing traffic across multiple edge locations and providing automatic failover capabilities.
3. Cost Efficiency: Amazon S3 offers cost-effective storage for your static website's files, and CloudFront's pay-as-you-go pricing model means you only pay for the data transfer and edge location usage. Route 53's pricing is based on the number of hosted zones and DNS queries, which are typically low-cost components.
4. Security: Amazon S3 supports access control mechanisms such as bucket policies and access control lists (ACLs) to manage access to your static website's files. By using CloudFront, we can set up additional access restrictions like OAI, geo-restrictions, signed URLs, and signed cookies.
5. Custom Domain and SSL/TLS Support: Route 53 allows you to use custom domain names for your static website, providing a more professional and branded experience. You can easily configure SSL/TLS certificates through AWS Certificate Manager to enable secure HTTPS communication for your website.
6. Easy Setup and Integration: Amazon S3, CloudFront, and Route 53 offer seamless integration within the AWS ecosystem. They can be easily configured and managed using AWS Management Console, AWS CLI, or SDKs. Route 53 integrates well with other AWS services, making it straightforward to connect your static website with other AWS resources if needed.
7. Analytics and Monitoring: CloudFront provides detailed access logs and real-time metrics, allowing you to gain insights into your website's traffic and performance.?

Conclusion

Hosting a static website in Amazon S3 with CloudFront and Route 53 offers numerous advantages, including improved performance, scalability, cost efficiency, and security. In this blog, you have learned how to leverage this powerful combination of AWS services to host your own static website.

With Amazon S3, you can store and manage your website files with ease, while CloudFront enables global content delivery through its network of edge locations. Route 53 provides DNS management, allowing you to associate your website with a custom domain or subdomain.

By utilizing these services together, you can achieve high availability, low latency, and enhanced user experience for your website visitors around the world. Additionally, the cost-efficient pricing models of S3, CloudFront, and Route 53 ensure that you only pay for the resources you use.