Hosting your static website in S3 by leveraging cloudfront

#aws

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

in the buckets permission tab click on edit, disable the block public access

Deactivate the feature, this is temporary

Type confirm

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

navigate down and save changes.

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

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

create CloudFront a distribution

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

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

scroll down to the Web Application Firewall do not enable protection

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

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.