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.

Advertisement

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.

Advertisement

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.

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

The HTML code for index.html is as follows.
How to host static website on S3 [Step-by-Step]

The HTML code for error.html is as follows.

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

 

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.

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

 

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

Advertisement

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

 

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.

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

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.

 

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

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

 

Then we will click on Generate Policy.

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

 

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

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

 

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.

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

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

 

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

Advertisement

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

 

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.

 

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

 

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.

Advertisement

 

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.

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

 

Now we will upload secondpage.html in our bucket.

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

 

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.

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

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

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

 

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.

Advertisement

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

 

Step-3: Testing

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

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

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!

 

Categories AWS

Didn't find what you were looking for? Perform a quick search across GoLinuxCloud

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

Buy GoLinuxCloud a Coffee

For any other feedbacks or questions you can either use the comments section or contact me form.

Thank You for your support!!

Leave a Comment

X