Hosting a website in AWS S3
Tags: aws, cloud, webdev, beginners
Published: 2020-09-01 05:44:11

AWS is one of the big cloud providers. Whichever service you can imagine AWS surely has it.
**S3** stands for Storage Service, it can store large amount of data(such as files) for diverse uses.
In this post we will see how to host a website in S3. :cloud:

###**In AWS**###

After successfully login to AWS, we could find S3 service under Storage section:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mwhd03irkwp2sw5shbcl.png)

It will redirect you to the S3 management console, which in my case, it indicates me that I don't have any S3 bucket yet.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c8dak212ont3ip3p4a8h.png)

The following window will be prompted:
Notice that bucket name has to be unique. 
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2zbm4p461swoki9ed5af.png)

Once it's done we will see our recently created bucket in S3 panel.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h0faul9y66igc9twjfej.png)



###**Uploading website files**###

Our bucket is ready to us by clicking on its name. At first, we will start uploading our website's files dependencies.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2nudteslq1zze24qjeb7.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tidk98gbqcmcvjyhflnk.png)

My files are displayed.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xlxfjygx1uzovnlmvpaw.png)

###**Configuring S3 Bucket**###

At this moment our files are just stored, we need to configure our bucket and indicate it that it will be used for static website hosting.
> *Click on Properties tab.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fyc85t4snu80dqxtvjgo.png)

See it is disabled.

> *Click on Static web hosting option.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/skqdogdu8io1foeqwzkx.png)

Note here that AWS is telling us the endpoint for our bucket.
> *Select the 'Use this bucket to host a website' radio button.*
> *Enter the index file name.*
> *Save*

The service is now running.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xixjb32w8v1s9ifzhyrd.png)

###**Configuring Policies**###

By default buckets block public access, we will change it choosing Permissions tab.

> *Click on edit.*
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a7xzoltbylsvs71d3mfj.png)

> *Uncheck block all public access.*
> *Save*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9ub6obmlsu8fb3iwxhtr.png)

Confirm the changes.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w79ivu8lo77utqiotncd.png)

###**That is not all! - S3 Bucket Policies**###

Apparently that is all, but when trying to access throught the endpoint.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/45e0mh2cglf28iwsnmna.png)

Because, additional configuration for our bucket is required. S3 bucket policies will control actions and access to our files.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jq8dgkbb39zn26b2gjv5.png)

We will use AWS Policy generator tool.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3qfzelv0wiw2klzq59sh.png)

The following page will be displayed.

> *Select S3 Bucket Policy.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iw5bbumkj1doipcquvxu.png)

> *Select Get Object.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/err1l6dxfbdnzdfi4ai2.png)

In order to fill ARN field we need to check the previous “Bucket Policy” page. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gnpc3o9zwlbq7k3yr3pz.png)

Finally, our policy details should be as follow:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fa8qhu083o5jyh2z2c4n.png)

> *Click on Generate Policy*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/802sauv3x38gt4050fel.png)

The Policy JSON document will be prompted.

 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/txhzffdze7cnzqj847h1.png)

```
{
  "Id": "Policy1598507824707",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt1598507726767",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::rsh-awsbucket",
      "Principal": "*"
    }
  ]
}
```

Copy all the text and paste it on the Bucket policy editor.
**Very Important** Here we need to add '*' character at the end of the resource value.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uoxu6yzpuyeow2tammtc.png)

*Now, it is ready to take off!!* :rocket:

Our website is ready and published. We can access to it by writing the endpoint in our browser.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k6s47txw5e9xufyxijqy.png)


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nt67magjl68nzgvs1kl5.png)

Thanks for reading!! :smiley_cat: