Effortlessly Host Your Static Website on AWS S3: A Step-by-Step Guide

In today's digital age, having a reliable and fast-loading website is crucial. Whether you're a developer, a business owner, or a hobbyist, hosting your static site on AWS S3 can provide you with a cost-effective and scalable solution. This step-by-step guide will walk you through the process of setting up your static site on AWS S3, ensuring that your content is always available and delivered quickly to your users. Let's dive in and get your site up and running in no time!

Cloud computing on AWS provides access to technology services, such as computing power, storage, and databases. Resources are available on demand, and you pay only for what you use. You can choose from hundreds of AWS services to help build your solutions. With AWS, you can deploy resources, such as servers, in minutes and at a fraction of the cost of traditional resources. With this type of flexibility, you can transform your operations.
I have created a fictional scenario: A coastal city's public digital team wants a solution to make their beach wave size prediction webpage more reliable.

Problem: The city's technical infrastructure is hosted in an on-premises data center, but it takes months to procure and set up data center resources.

As solutions architects, we should ask questions like, "Does your beach wave webpage include any scripts that must run on the web server?" These are known as server-side scripts. If your website doesn't run server-side scripts, it's a static website. Because you are running a static website, we can migrate your webpage to an Amazon S3 bucket and use the static website hosting feature. This move to Amazon S3 will get you back up and running quickly and make your site more resistant to failure. We can start by creating a new S3 bucket to hold your webpage content. In Amazon S3, any type of file, and any metadata that describes that file, is called an object. Objects are stored in S3 containers, called buckets.

Using Amazon S3, you can store any type or amount of data and retrieve it from anywhere. After we upload your data into the S3 bucket, we can enable the static website hosting feature on the bucket. Amazon S3 is a fully managed service, so you don’t need to deploy or manage any servers. S3 buckets are automatically replicated across multiple AWS data centers for high resiliency. Also, any website hosted on Amazon S3 can automatically scale to handle thousands of concurrent requests.

Solution Request
Migrate an existing website to static website hosting on Amazon S3 to improve reliability.

Technical Solution Requirements

1. Create a bucket in Amazon S3.

2. Enable static website hosting on the S3 bucket.

3. Test access to the webpage hosted on Amazon S3.

Architecture Diagram

This solution uses an S3 bucket to host a static website. In Amazon S3, the static website can sustain any conceivable level of traffic, at a very modest cost, without the need to set up, monitor, scale, or manage any web servers.

Along with an HTML file, files that support webpage functionality, such as client-side scripts and style sheets, are uploaded to the S3 bucket. Any S3 buckets can be configured to host a static website.

When an S3 bucket is configured for website hosting, the bucket is assigned a URL. When requests are made to this URL, Amazon S3 returns the HTML file, known as the root object, that was set for the bucket.

For others to access the S3 bucket, or specific objects in it, permissions must be configured to allow that access. A bucket policy can be created to configure these permissions.

A bucket policy defines who can access the bucket and what type of operations can be performed. Bucket policies are written in JSON format.

City residents visit the city web portal for beach wave information, which invokes a GET request from the portal to the URL of the static webpage. The initial root object is named index.html.

Let's dive into how to implement the solution described above.

Navigate to the AWS console and search for S3 service.

The AWS Management Console is a web interface to access and manage the broad collection of services provided by Amazon Web Services (AWS).

Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance. Customers of all sizes and industries can use Amazon S3 to store and protect any amount of data for a range of use cases, such as data lakes, websites, mobile applications, backup and restore, archive, enterprise applications, IoT devices, and big data analytics.

These files contain the contents of the static webpage. As you might have noticed the error.html file. This file contains the code for the error page, which opens whenever something goes wrong.

A bucket is a container for objects stored in Amazon S3. Every object is contained in a bucket. Amazon S3 offers a range of storage classes for the objects that you store. You choose a class depending on your use case scenario and performance access requirements. Amazon S3 provides storage classes for frequently accessed, infrequently accessed, and archive access objects.

You can choose the geographical AWS Region where Amazon S3 stores the buckets that you create. You might choose a Region to optimize latency, minimize costs, or address regulatory requirements. Objects stored in an AWS Region never leave the Region unless you explicitly transfer or replicate them to another Region. For example, objects stored in the Europe (Ireland) Region never leave it. However, Amazon S3 redundantly stores objects on multiple devices across a minimum of three Availability Zones in an AWS Region. An Availability Zone is one or more discrete data centers with redundant power, networking, and connectivity in an AWS Region.

Using Amazon S3, you can upload objects up to 5 GB in size with a single PUT operation. For larger objects, up to 5 TB in size, use the multipart upload API.

Turning off "Block all public access" is necessary for static web hosting through your S3 bucket. Now you might have a question like What is the purpose of the bucket policy in this solution? The bucket policy in this solution is used to configure the permissions to allow public read access to the S3 bucket hosting the static website. This is necessary to make the website publicly accessible.

By default, all Amazon S3 resources (buckets, objects, and related subresources) are private. Only the resource owner can access them. The resource owner can optionally grant access permissions to others by writing an access policy.

You can grant permissions to your Amazon S3 resources through bucket policies and user policies. Both options use JSON-based access policy language. An Amazon Resource Name (ARN) uniquely identifies AWS resources.

{
    "Version": "2012-10-17",
    "Id": "StaticWebPolicy",
    "Statement": [
        {
            "Sid": "S3GetObjectAllow",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::website-bucket-632a2990/*"
        }
    ]
}

This policy allows public access to the S3 bucket. Effect says this policy will Allow access. Principal defines who has access. In this case, * represents anyone. Action defines what users can do to objects in the bucket. In this case, users can only retrieve data with GetObject. Resource specifies that this policy applies to only this bucket. Generally, to safeguard against unintentional data exposure, AWS recommends strict S3 bucket permissions in production.

Click the Properties tab to enable the Static website hosting feature for the S3 bucket.

To host a static website on Amazon S3, configure your bucket for static website hosting, set permissions, and add an index document. Available options include redirects, logging, and error documents.

After saving the changes static website hosting tab might look like this. Review to ensure that the Hosting type is set to Bucket hosting. Under Bucket website endpoint, click the copy icon to copy the provided endpoint.

Amazon S3 supports virtual-hosted-style URLs and path-style URLs.

A virtual-hosted-style URL looks like: https://bucket-name.s3.Region.amazonaws.com/key

A path-style URL looks like: https://s3.Region.amazonaws.com/bucket-name/keyname

To load the Beach Wave Conditions webpage, in a new browser tab (or window) address bar, paste the bucket website endpoint that you just copied, and then press Enter.

Now, let's rename index.html in the S3 bucket to waves.html, and then update the S3 bucket settings to use the renamed root object.

Conclusion

Hosting a static website on AWS S3 is a powerful and cost-effective solution for ensuring high availability and scalability. By following the steps outlined in this guide, you can quickly migrate your static site to S3, benefiting from its robust infrastructure and ease of management. This approach not only enhances the reliability of your website but also simplifies the process of handling large volumes of traffic without the need for extensive server management. Whether you're a developer, business owner, or hobbyist, AWS S3 provides a seamless way to host your static content efficiently.