What is CloudFront? CloudFront is a CDN (Content Delivery Network). The CloudFront retrieves data from the Amazon S3 bucket and distributes it to multiple datacenter locations. The data that delivers through a network of data centers is called edge locations. The nearest edge location is routed when the user requests for data, so we will get some benefits like the lowest latency, low network traffic, fast access to data, etc. A picture will help you to clarify how this actually works, so take a look at the image shown below. We have stored our content or data in an S3 bucket located in a region in N.Virginia(us-east-1), and we have users located around the world who access that content. As the arrows show, whenever a user requests content, the request must go over the public internet to the source location–the S3 bucket in N.Virginia(us-east-1). Depending on the user’s location, content delivery can take a long time. The delays in the response or in content delivery might even cause some user requests to bounce and return an error from the page. Now imagine that we set up CloudFront in front of the S3 bucket. In the following image, you can see that there are no longer requests traversing the globe to get to our content. Instead, requests are routed to the ones that are closest in terms of delivery speed. These are also called “least latent” Edge Location. As shown with the green arrows, CloudFront then quickly serves cached content directly to the requesting user nearby. CloudFront retrieves the content from the S3 bucket origin if it is not cached with an edge server. Instead of the public internet, the content traverses the AWS private network and CloudFront optimizes the TCP handshake. Hence, the request and content return are still much faster than access across the public internet. So by using CloudFront will fetch data from CloudFront data centers instead of S3. The following Image is showing us the same thing. Let’s start the creation of CloudFront distribution. 1. Steps for creating a CloudFront distribution Sign in to the AWS Management Console and in the you can see a search box in that type cloud and choose . Find Services, CloudFront You should for the region at the top right. Global Click . Create Distribution Under click . Web Get Started For once you place the cursor in there you should see your available S3 buckets. Origin Domain Name Note: I already created S3 bucket in AWS so If you don’t have any website on S3 bucket then plz create it first Pick the website bucket you created. If it’s not listed type it in: e.g 2020–05–21-mybucket.s3.amazonaws.com that is nothing but your bucket name. Leave blank. Origin Path The should have been pre-populated when you choose your bucket. Origin ID Click to . Yes Restrict Bucket Access Under select . Origin Access Identity Create a New Identity It will pre-populate the and append the bucket name. Comment For on Bucket choose options . [This will update the bucket policy for us]. Grant Read Permissions Update Bucket Policy Leave the blank. Origin Custom Headers For the section: Default Cache Behavior Settings Under select option . Viewer Protocol Policy Redirect HTTP to HTTPS For choose . Allowed HTTP Methods GET, HEAD Leave blank. Field-level Encryption Config Leave for . GET, HEAD (Cached by default) Cached HTTP Methods For leave it as the defaul Cache Based on Selected Request Headers t none (Improves Caching). For also leave it as the default . Object Caching Use Origin Cache Headers Under leave it as . Forward Cookies None (Improves Caching) Also for leave as Query String Forwarding and Caching None (Improves Caching). For select . Smoothing streaming No For select . Restrict Viewer Access (Use Signed URLs or Signed Cookies) No Leave as . Compress Objects Automatically No Leave as the default. Lambda Function Associations Scroll down to . Distribution Settings For leave the default . Price Class Use All Edge Locations (Best Performance) We will not be using WAF, so for leave it as . AWS WAF Web ACL, None Leave blank. Alternate Domain Names (CNAMEs) We will also use the for Default CloudFront Certificate SSL Certificate. For leave as . Supported HTTP Versions HTTP/2,HTTP/1.1,HTTP/1.0 Under type . Default Root Object index.html We can leave set to . Logging Off Leave checked. Enable IPv6 Finally set the to . Distribution State Enabled Click . Create Distribution Click on at the top left to see the status of CloudFront distribution being built or not. Distributions This can take 15–20 minutes to complete. 2. Restrict our S3 bucket policy to Cloud Front Click at the top left and type in S3 or select it from History. Services Click on your Bucket name . 2019-mm-dd-xx-mybucket IMPORTANT: Your bucket will have a different name. Click . Permissions Select . Bucket Policy We can see that CloudFront has added what we call an “Origin Access Identity” to the policy. { "Version": " – – ", "Statement": [ { "Sid": "AddPerm", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3::: – – -mybucket/*" }, { "Sid": " ", "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E2V8GJ8FKJPGFQ" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3::: – – -mybucket/*" } ] } 2012 10 17 2020 05 21 2 2020 05 21 Remove the public s3 section so it looks like following { "Version": " – – ", "Statement": [ { "Sid": " ", "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E2V8GJ8FKJPGFQ" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3::: – – -mybucket/*" } ] } 2012 10 17 2 2020 05 21 This will only allow our specific CloudFront distribution access to our S3 bucket which is what we want. Click Save. 3. Steps for testing that we successfully locked down S3 from public view Browse to your S3 endpoint: Example: http://2020-05-21-mybucket.s3-website-us-east-1.amazonaws.com You will see a because we removed public access from the bucket policy. 403 Forbidden Click on the . (The blue hyperlink) CloudFront distribution ID Copy the URL under . Domain Name Browse to that URL and you should now see the index.html page. And your CloudFront is ready. Happy Coding 😃
![featured image - Creating an Amazon CloudFront Distribution [A Step-by-Step Guide]](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FJTw2M3rQabaxNg3EFoNIxjmC1ZB3-7o1v3yiu.webp?alt=media&token=ac885d7c-c3ef-449b-8623-8062ebe43398&auto=format&fit=max&w=1920)
![Building User Interfaces with React [A How-To Guide]](https://hackernoon.imgix.net/drafts/pj2c3024.jpeg?auto=format&fit=max&w=3840)
