How to host static website on S3 [Step-by-Step]

In this tutorial, we will learn that how we can host static website on s3 and we will also use cross-origin resource sharing(CORS) on our website.

Instead of running Web servers such as Apache or Nginx on EC2 instances, Amazon S3 supports hosting a static website content over Amazon S3 buckets. It is much easier rather than installing, running, and managing your web servers on your own because all you need to do is to create a bucket, add a website configuration to your bucket, apply a bucket policy, and upload your contents, plus configure a custom domain if you want to use your own domain.

But, before moving ahead we can have a look at the prerequisite of this tutorial.

 

Advantages of hosting static website on AWS S3

The benefits of hosting a static website on Amazon S3 are as follows:

• Low cost: The charges are data storing and data transfer fees
• Reliable routing: This allows you to map a custom domain and route customers to your website with Route53
• Low latency: This delivers the content from the closest location to the customer by caching the content in the edge location over the world with CloudFront
• Low maintenance: Amazon S3 consists of an automatic self-hearing infrastructure and is designed with 99.999999999 percent durability and 99.99 percent availability of objects over a given year by synchronously storing your data across multiple facilities

 

S3 website overview

We can use Amazon S3 to host static website that has web pages that include static content but note that it does not support server-side scripting.

For more details please check out the official website of AWS.

Now we will head straight to the implementation part.

 

Host static website on S3 - Hands-on

Step-1: Create AWS S3 Bucket

First, we will log in to our AWS account and click S3 under the Services tab. After that, we will create an S3 bucket as discussed in this tutorial.

Since we have already covered this part in our previous article with the steps to create AWS S3 Bucket. So I will skip this part here.

 

Step-2: Upload website files

We will upload two files for our website named index.html and error.html.

The HTML code for index.html is as follows.

The HTML code for error.html is as follows.

 

Step-3: Block public access

In the previous tutorial, we blocked public access to our bucket. Now we will enable public access since we are hosting a static website. For that, we will click on Edit.

 

Now we will uncheck Block all public access and click on Save changes.

 

Step-3: Modify S3 Bucket Policy

Now we will define a bucket policy in which we will allow GetObject actions for this bucket for everyone. First, we will click on Policy Generator.

This will lead us to this screen. Here we will select Type of Policy to be S3 Bucket Policy. Then for the statement, we will do the following steps.

• Set Effect to Allow.
• Set Principal to *.
• Set Actions to GetObject.
• Set ARN to the ARN we saw on the previous screen in our case it will be arn:aws:s3:::test-s3-tutorial-bucket. Here will append /* to the ARN.
• Then we will click on Add Statement.

 

 

Then we will click on Generate Policy.

 

This is the JSON document of the policy we just defined. Now we will copy it and save it in our Bucket Policy.

 

Step-5: Enable Static website hosting

In the Properties tab, Static website hosting is Disabled by default. We will click on Edit and Enable it.

 

After that, we will provide the name of the files we just uploaded to our S3 bucket.

 

Step-5: Verify access to your first static website

In Properties under Static website hosting, we can find the Bucket website endpoint. We will copy it and paste it into the browser. Our website is working perfectly fine.

 

 

Step-6: How this works (and how to use custom domain name)

When an S3 static website is configured, an Amazon S3 website endpoint is automatically generated for the bucket. It is called Website Endpoints and the website endpoints do not support HTTPS, only HTTP.

As the website endpoints are bucket names and region-specific, you cannot change or specify the endpoint, but you can use CNAME for the endpoint to access with your custom domain such as http://www.yourdomain.com/.

 

S3 CORS overview

According to the official website of AWS.

Cross-origin resource sharing (CORS) defines a way for client web applications that are loaded in one domain to interact with resources in a different domain. With CORS support, you can build rich client-side web applications with Amazon S3 and selectively allow cross-origin access to your Amazon S3 resources.

 

You can add Cross-Origin Resource Sharing (CORS), which will grant certain web sites to access the resources. This helps to provide access to all requests coming from the mentioned web site

Let's see how we can use CORS on our website.

 

S3 CORS - Hands-on

Step-1: Upload files

Now we will create a second bucket and access its object from the first bucket. The process of creation of the bucket will remain the same. Here we can see both of our buckets enlisted.

 

Now we will upload secondpage.html in our bucket.

 

The HTML code for secondpage.html is as follows.

The second page has been successfully loaded

In our first bucket, we will update our index.html so that it fetches secondpage.html which resides insides our second bucket.

Now if we enter the URL of the first bucket, we will get the following error.

 

Step-2: Edit CORS

In order to resolve the error shown above, we will define CORS configuration in the Permissions tab that allows GET methods on our second bucket from the first bucket.

 

Step-3: Testing

Now everything works fine when we enter the URL of the first bucket in the browser.

Conclusion

With this, we have come to the end of our tutorial. In this tutorial, we learned that how to host static website on S3. Along with this we also learned about cross-origin resource sharing(CORS) and used it on our website.

Feel free to ask any queries or give any feedback in the comments section. Stay tuned for some more informative tutorials coming ahead.

Happy learning!