AWS CloudFront S3 Static Website
Tags: aws, beginners, s3, cloudfront
Published: 2023-01-20 19:52:59

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

> ![CreateBucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1bjoqlunpx3cfnzuyt6.png)

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


> ![BlockUncheck](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5l2ploq2g51oc7d1m2k1.png)

> - 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.

> ![S3 Website URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hgjnaawzjw2nhg70mmjq.png)

> 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.


> ![Bucket Policy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igggctqxkwz3u6vewr1q.png)

> - 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 <Bucket-name> , <aws-account#> and <dis-id>

```
{
    "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.