Hosting your static website in S3 by leveraging cloudfront
Tags: aws
Published: 2024-01-27 17:48:13

 S3 as a service can be linked from on-premise and other cloud services like Amazon Ec2 a computing services that allows to 'rent' servers in AWS. We will be hosting a static website in s3, this does not require compute

Before we setup the environment we need to understand that when adapting to cloud we should have a secure first approach.

We will leverage another AWS service know a Cloud Front. It is a  web service that enhances and  distributes your static and dynamic web content faster. It leverages its self from a worldwide network of data centers. It delivers the content on http and https adding 
a secure and encrypted against a normal protecting against common cyber attacks.

From the s3 bucket we had created, upload your website by selecting all files and folders.

After a successful upload your console should provide a green success message at the top

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tbxgterx3vair6yyhnb.png)
in the buckets permission tab click on edit, disable the  block public access

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xc48oed1pn99gpmvawqe.png)

Deactivate the feature, this is temporary


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5gtlw4et3i15qdzpqi5.png)
Type confirm

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zbmow6t2rmaj48n2d2c.png)

navigate down to bucket policy and click edit

image...

paste this policy 

	`"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "PublicReadGetObject",
			"Effect": "Allow",
			"Principal": "*",
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::bucket-name/*"
		}
	]
}`
Replace the bucket name with your bucket name, it should like follows

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgbznrqiq5bo3nlb6lj6.png)

navigate down and save changes.

Click on properties in the bucket profile settings and scroll down to static website hosting


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xh61r3jpqmtgoq9pgix9.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/py1k0fs7ithsj3svcoo8.png)

click on the edit button, navigate and enable static web hosting. in the index document add your index.html as the index document, for the error handling file type "error/index.html.

To retrieve the endpoint for your bucket, click the Properties tab, scroll to the bottom, and click the copy icon next to the Bucket website endpoint, copy it to a new tab and it will load your index.html page.

Scroll down and save changes.

Navigate to the search bar and search for CloudFront

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ge82o5jfj8xifhxub4w.png)

create CloudFront a distribution

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwdn0lfl2l2n1vgfdgoa.png)
Do not click at the web endpoint and scroll down to origin access use the origin access control settings, this allows s3 to allow cloudfront to access it.

click on create control settings


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ncx5vowef8cqg28pznb.png)

Name it to mirror your s3 bucket-name you can use your abbreviation of CF to show its cloud-front then click on create.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oy1mu6g2do11k6gl1nr.png)

scroll down to the Web Application Firewall do not enable protection

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53rfp5v95649ml89izo9.png)

Default root object type index.html, leave the other default settings as they are, create the distribution.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3i4csgx7qktjc4td1bh.png)


There will be a splash screen suggesting you to update the policy in your s3 copy policy and navigate to  s3 permissions and click on edit clear the previous policy you had pasted before and pste the new one, navigate below and save changes.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpnwnno6vwwibsb61whj.png)

navigate to the public access settings, click on edit, activate the settings, click on save. Type confirm and click on confirm 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mnxy8cctajd9ebp5rv3.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1pc5ocks43wmg6rkmc2f.png)
Navigate back to CloudFront page and copy the distribution name and paste it to a new tab. your website will be all set up

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pxjlhvojlco4ll8y3lz.png)

Have a try, give me a feed back on how the exercise was