Understanding Amazon CloudFront
Published: 2023-08-30 22:18:58

# What is Amazon CloudFront?

- As per Amazon Web Services (AWS)
- "Amazon CloudFront is a web service that speeds up distribution of your static and dynamic web content, such as .html, .css, .js, and image files, to your users. CloudFront delivers your content through a worldwide network of data centers called edge locations. When a user requests content that you're serving with CloudFront, the request is routed to the edge location that provides the lowest latency (time delay), so that content is delivered with the best possible performance."

- "If the content is already in the edge location with the lowest latency, CloudFront delivers it immediately."

- "If the content is not in that edge location, CloudFront retrieves it from an origin that you've defined—such as an Amazon S3 bucket, a MediaPackage channel, or an HTTP server (for example, a web server) that you have identified as the source for the definitive version of your content."

Please visit my **[GitHub Repository for S3 articles](https://github.com/awsmine/S3_projects)** on various topics being updated on constant basis.


_**Let’s get started!**_

# Objectives:

**1.** Sign in to AWS Management Console

**2.** Create an S3 Bucket

**3.** Upload a file to the S3 bucket.

**4.** Create Custom Error pages.

**5.** Make the objects public.

**6.** Create a new Amazon CloudFront distribution.

**7.** Accessing images through Cloudfront.

**8.** Configuring custom Error Page

**9.** Restricting the Geographic Distribution of your content.


# Pre-requisites:
- AWS user account with admin access, not a root account.


# Resources Used:
[What is Amazon CloudFront?](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html)

# Steps for implementation to this project:


### 1. Sign in to AWS Management Console
- Make sure you're in the N. Virginia (us-east-1) region

### 2. Create an S3 Bucket

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


- Object Ownership: Select ACLs enabled option and choose Object writer as Object owner


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

- Uncheck the Block all Public Access and acknowledge the change.

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

- take all defaults
- Create bucket


### 3. Upload a file to the S3 bucket.


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


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


### 4. Create Custom Error pages.

- These pages will be displayed when you get an HTTP 4xx or 5xx error. 
- Create ***custom-errors*** folder


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


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

- Create folder

- create 001-error.html

```
<html><h1>This is Error Page</h1></html>

```

- create 001-block.html

```
<html><h1>This content is blocked in your location!!!</h1></html>

```

- upload ***error.html and block.html*** files to the ***custom-errors*** folder


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



### 5. Make the objects public.

- Copy the Object URL and paste it into a new tab.

```
https://mys3bucket123456.s3.amazonaws.com/001-Community-Builder.png
```


- ***AccessDenied*** message, meaning the ***object is not publicly accessible***

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

- Create bucket policy to give access the object
```
{
   "Version": "2012-10-17",
   "Statement": [
       {
           "Effect": "Allow",
           "Action": ["s3:ListBucket"],
           "Principal": {"AWS": "*"},
           "Resource": "<YOUR_BUCKET_ARN>"
       },
       {
           "Effect": "Allow",
           "Action": ["s3:GetObject", "s3:PutObject"],
           "Principal": {"AWS": "*"},
           "Resource": "<YOUR_BUCKET_ARN>/*"
       }
   ]
}
```

- copy the S3 ARN
```
arn:aws:s3:::mys3bucket123456
```

- click the Permissions tab, edit
- Copy and paste the below policy and save the policy.
```
{
   "Version": "2012-10-17",
   "Statement": [
       {
           "Effect": "Allow",
           "Action": ["s3:ListBucket"],
           "Principal": {"AWS": "*"},
           "Resource": "arn:aws:s3:::mys3bucket123456"
       },
       {
           "Effect": "Allow",
           "Action": ["s3:GetObject", "s3:PutObject"],
           "Principal": {"AWS": "*"},
           "Resource": "arn:aws:s3:::mys3bucket123456/*"
       }
   ]
}
```

- Open the Image Object URL again or refresh the one already open

- you can see the object image


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


### 6. Create a new Amazon CloudFront distribution.

- Navigate to Cloudfront
- Create a CloudFront distribution 
- Origin Domain Name: Select your S3 bucket - ***mys3bucket123456.s3.us-east-1.amazonaws.com***

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


- Do not enable security protections under Web Application Firewall(WAF).


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

- take defaults
- Create distribution, takes 4-5 minutes to complete
- The domain name that Amazon CloudFront assigns to your distribution appears in the list of distributions.


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


### 7. Accessing images through Cloudfront.

- Amazon CloudFront is now pointed to Amazon S3 bucket origin and you know that the domain name is associated with the distribution. - You can create a link to the image in the Amazon S3 bucket with that domain name.

- For testing your distribution, copy your domain name and append your image name after the domain name. 

```
https://<Domain name>/<object image>

https://d2hnyt6s1otxz8.cloudfront.net/001-Community-Builder.png
```

- Open the CloudFront URL in a new tab. You can see your uploaded image.

- You can see how much faster the CloudFront URL image loads as compared to the S3 URL. 
- When end users request an object using a CloudFront domain name, they are automatically routed to the nearest edge location for high-performance delivery of your content.


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


### 8. Configuring custom Error Page - ***This is Error Page***

-  On to the CloudFront Dashboard and select the distribution created.

- Select the Error pages tab.
- Click on the Create custom error response button.

- set up our custom error page


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

- Create custom error response

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


- back to Distributions and wait for your distribution to complete state to change Deploy.
- **Note:** This process will take around 5-10 minutes.

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

- Once the state has been changed to Deploy, we will test the error page. 


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


- Enter the URL of an image that does not exist in your S3 bucket with the CloudFront domain name.

```
https://d2hnyt6s1otxz8.cloudfront.net/noimage.png
```

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


### 9. Restricting the Geographic Distribution of your content.

- need to prevent users in some countries from accessing your content 
- you can specify either 
- a whitelist (countries where they can access your content) or 
- a blacklist (countries where they cannot) by using restrictions.

- On the distribution settings page, select Geographic locations tab and click on Edit button.

- Restriction Type: Select Block list

- Select the country where you are currently and click on it to check this option.

- On enabling this option, the request from the specified country which is "Blacklisted", will not be displayed and a default error message is displayed.

- Save changes


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

- Go to the distribution list and wait for your distribution to complete the state changed to deployed.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akewzpl71l0jw3czrkkz.png)
- takes about 4-5 minutes


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


- test the restriction through CloudFront in the browser.
```
https://d2hnyt6s1otxz8.cloudfront.net/001-Community-Builder.png
```

- You can see the following error message:

- 403: Error The Amazon CloudFront distribution is configured to block access from your country.??


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

- configure a custom error page - ***This content is blocked in your location!!!***

- Navigate back to CloudFront Dashboard and select the distribution you have created.

- On the settings page, select Error pages tab.
- Click on the Create custom error response button.

- set up our custom error page:


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


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

- Go to the distribution list and wait for your distribution to complete the state changed to deployed.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akewzpl71l0jw3czrkkz.png)
- takes about 4-5 minutes

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

- Once the state has been changed to Deploy, we will test the restriction through CloudFront in the browser.

```
https://d2hnyt6s1otxz8.cloudfront.net/001-Community-Builder.png
```

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


# Cleanup

- Delete S3 bucket
- Delete Cloudfront Distribution


# What we have done so far
- We have successfully 
- created an Amazon CloudFront distribution and published an image through CloudFront.

- configured Custom Error Pages for CloudFront Distribution.

- configured restrictions based on Geo-location.