What is Amazon S3? How to host your react website with Amazon S3?

We will cover the following topics in this tutorial:

1. What is Cloud Storage?
2. Types of storage services offered by AWS.
3. What is S3?
4. How to create a bucket in S3?
5. Host your react website on S3.

When we try to host a website for our organization we come across many problems and storage remains our primary concern. Amazon Web Services(shortly AWS) provides different types of solutions for all of our problems. One of them is cloud storage. Before we go into S3, we will first see what exact cloud storage is.

1. Cloud Storage is a service where your data can be stored, distributed, and easily backed up by the users over the internet.

2.Types of Storage services:

a.S3- Simple Storage System

b.EBS-Elastic Block Store

c.EFS- Elastic File System

d.Glacier

e. Storage Gateway

f.Snowball, Snowball Edge, Snowball Mobile, etc., each type has its way of usage. In this tutorial, we mainly focus on S3.

3. What is Amazon S3?:- Amazon Simple Storage Service is an object storage service that offers Scalability, data availability, security, and performance. Okay, some big words in the definition. In some simple way, it is a storage system for the internet where you can store and retrieve any amount of data, anytime, anywhere.

Wait, what is an object storage service(🤔)? let me quickly explain it to you. Here, the object is nothing but the combination of actual data, metadata(date of creation, modification, size, storage class), and a unique key that S3 is generated when the object is created so that it can be identified easily.

Do you know? The largest object that can be uploaded in a single PUT is 5 gigabytes.

These objects are stored in a container called a bucket. Let’s see how to create a bucket in Amazon S3.

4. How to create a bucket in S3?

Step 1: Create an account here if you don’t have one amazon management console. You need to give your basic details and it costs INR 2rs only.

Step 2: After you logged in, select S3 under the services section.

Step 3: Click “create button” and provide details for your bucket. Remember your bucket name must be unique.

After giving the details, then click “Create” for now. You can do other things later as well(Configure options, Set permissions, and Reviewing your bucket).

Step 4: Now you can upload any number of files each can be of 5TB. Just choose your bucket and click the upload button. You can drag and drop files as well.

Now you have created and uploaded files in Amazon S3. You can retrieve, update, and delete your data anytime, anywhere.

5.Host your static website using S3:

Upload the latest build folder of your website in any of the buckets. Now select index.html file and click the object URL. Now your website is live.

Really? No, I guess. You may get some nasty message like access denied or maybe a blank page. So for that, you need to do some configuration.

First thing, open your bucket and click the properties tab.

There you can see a property with the name “Static website hosting”. Select that. Click the “Use this bucket to host a website” button and enter index.html your index document. Save the changes.

Now we have hosted our website in the bucket. If you get the same error again, as a final step what you have to do is making all the files public. Select all the files and click the actions button and make them public.

That’s it. Now, open your index.html file and you can see your website is live.

I hope you have understood the tutorial and hosted your website on Amazon S3.

Thanks for reading!

Happy hacking!!