AWS CloudFront S3 Static Website

CloudFront: AWS CloudFront is a web service that delivers contents in the network, also called as Content Delivery Network (CDN) service. CloudFront web service
speeds up distribution of static and dynamic web content like .html, .css .js and images to the user.

• Content delivery network of edge locations.
• Caches static files for lower latency meaning contents is served closer to the request origin. for example when a user requests a content that you are serving with cloudFront, the request is routed to the edge location(world wide network of data centers) that provides lowest latency.
• Offloads websites by caching stuffs.
• Integrates well with AWS S3
• Offers HTTPS

Lets see how we can use that in the Static Web site:

What is Static Web site: Static web site is a website with fixed content and all viewers will see same content. Example of static web site is like if i just need to show my art work and my content info, if anyone like my artwork can email me. Pretty straight forward, upload images to website and that it.

• 1. Create a S3 bucket

• Create bucket

• Enable public access by uncheck Block all public access, and select acknowledge as shown in following screen shot.

• Enable static Website hosting: Once bucket is created , go to property, scroll down to "Static website hosting" and click on Edit -> click on enable, checked off Host a static website, add name of main html and the error html. Click on Save Changes.

• Once you save these changes, scroll down and you can see a S3 Website URL. This URL can be accessed publicly, and contains s3 bucket name but it is not s3 bucket URL.

If you click this URL it will give you 403 forbidden error , because we did not attached a bucket policy to this s3 bucket.

• Enable right policy for your bucket- object hosted by the website bucket must be publicly readable, which means s3:GetObject allowed on it. Following screen shot shows the policy.

• Upload an object to s3, so create a simple HTML file and upload to s3. Now click the link again, go to property tab of s3 , scroll down n click on the URL again.

• No server-side code execution

• Only client-side scripting and web pages can be hosted.

• CloudFront > - Open CloudFront and click on "Create distribution" or "Create a CloudFront distribution" > - Origin Name: select S3 website endpoint , > - Select all default values and click on "Create Distribution" > - Wait for this to be deployed and mean while update the S3 policy as follows, add your , and

{
    "Version": "2012-10-17",
    "Id": "Policy1673481402657",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipalReadOnly",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<Bucket-name>/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::<AWS-Account#>:distribution/<dis-ID>"
                }
            }
        }
    ]
}

• Hit the URL > - Once distribution is deployed it will give you a link under "Distribution domain name", that is your new URL to host your Static Website.