# CloudFront

[CloudFront function](https://aws.amazon.com/blogs/aws/introducing-cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale/) |

## Overview

* A CDN (Content Delivery Network) to ***cache*** the web content to ***lower the latency***.
* An service of AWS to provide `edge location` which is the nearest to the users. 
* CloudFront allows you to customize cache behavior based on various request headers. 
  * By setting the *<mark style="color:red;">**cache behavior**</mark>* to cache based on the Accept-Language request header, CloudFront can store and serve language-specific versions of the website content, reducing the need to repeatedly fetch the content from the ALB for users with the same language preference.

<figure><img src="https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/images/how-cloudfront-delivers-content.png" alt=""><figcaption></figcaption></figure>

### Integration

* S3
* EC2
* ELB
* Route53

***

## Features

### Field-level encryption

Security feature allows you to encrypt sensitive data (credit card, email...) at the field level.

1. Client-side encryption: data encrypted using public key provided by CloudFront
2. Data sent to cloudfront
3. CloudFront decrypt the data using private key, then forward to the server
4. Response to client

### Match Viewer

If you choose `Origin Protocol Policy` for Match Viewer, then CloudFront will direct exactly what policy the user is using (HTTP -> HTTP; HTTPS -> HTTPS).

If you `HTTPS only` then every request will go to HTTPS.

### Lambda\@Edge

{% hint style="danger" %}
Make sure that you're in the **US-East-1** (N. Virginia). You must be in this Region to create Lambda\@Edge functions.
{% endhint %}

* service allows dev to run serverless Lambda functions on edge location.
  * To customize the content that CloudFront deliver.
* Use cases:
  * Dynamic content: customized content for each location.
  * Security compliance: enforce security policies (blocking malicious, content filtering)
  * Performance optimization: caching frequently accessed content.
  * Change CloudFront request & response.

### CloudFront function

A little javascript helper running at CloudFront edge.

{% hint style="info" %}
If you want to use key/value pairs, you must use js-2.0 runtime instead of js-1.0.
{% endhint %}

#### vs Lambda\@Edge

<table><thead><tr><th width="258"></th><th width="230">CloudFront function</th><th>Lambda@Edge</th></tr></thead><tbody><tr><td><strong>Execution location</strong></td><td>at CloudFront edge</td><td>at CloudFront edge</td></tr><tr><td><strong>Use cases</strong></td><td>Simple modification:<br>- URL redirect<br>- Header manipulation</td><td>More complex computing<br>- Accessing external resources<br>- Generating responses</td></tr><tr><td><strong>Limit</strong></td><td>lower execution limits <br>1ms, 2MB memory, 10KB total package</td><td><p>5s (viewer trigger)<br>30s (origin trigger)</p><p>128MB, 1MB total package</p></td></tr><tr><td><strong>Network access</strong></td><td>No</td><td>Yes</td></tr><tr><td><strong>File system access</strong></td><td>No</td><td>Yes</td></tr><tr><td><strong>Access to the request body</strong></td><td>No</td><td>Yes</td></tr></tbody></table>

*for more detailed information, refer* [*this article*](https://aws.amazon.com/blogs/aws/introducing-cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale/)*.*

### Signed URL

* Just as you create *<mark style="color:red;">a URL</mark>* to share a file to your friend -> The friend does not need authenticate to access your OneDrive or Google Drive folder, but still be able to access the file only. And this link is *<mark style="color:red;">temporary</mark>*.
* Each signed URL has its own expiration time.
* ***Cons***:
  * Less efficient for bulk access -> You can not manually create every file that you have.
* ***Use cases:***
  * Client does not support cookies.
  * Want to restrict access to single file, installation download only.

### Signed cookie

* Can grant access, expiration time to multiple resources -> more efficient than [Signed URL](#signed-url)
* Send the required `Set-Cookie` headers to the viewer which will unclock the content only to them.
* ***Use case***:&#x20;
  * video content for member-only on streamming service such as Netflix, Amazon Prime, Hulu...
  * you do not want to change the URL

### Viewer Protocol Policy

to require HTTPS for communication between viewers and CloudFront, change the Viewer Protocol Policy setting to `Redirect HTTP to HTTPS`, or `HTTPS Only`

### Origin shield

* Better cache hit
* Better network performance
* Better origin load

***

## Increase Catch hit

1\. Increase the TTL of your objects

2\. Configure the distribution to forward only the required query string parameters, cookies, or request headers for which your origin will return unique objects.

3\. Remove Accept-Encoding header whenMS compression is not needed

4\. Serving Media Content by using HTTP

***

## Pricing

If you use AWS origins such as Amazon S3, Amazon EC2 or ELB, you don’t pay for any data transferred between these services and CloudFront.

***

## Concepts

* ***Edge location***: location where content will be cached.
* ***Origin***: S3 bucket, EC2 instance, ELB....the source of the content to be delivered.
* ***Distribution***: collection of edge locations.
* KeyValuestore:&#x20;

## Trivia

* Unlike ELB, CloudFront has a default SSL certification. To use custom SSL certification, config it in `us-east-1`.
* CloudFront is a global service that is managed from the <mark style="color:red;">**US East (N. Virginia)**</mark> region. All CloudFront configurations and certificates need to be in the same region for management purposes.

<figure><img src="https://2259236002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fuh9xZDZ53qGqmMCM44PU%2Fuploads%2FAOFYC1NHpDrX9aXGOBwh%2Fimage.png?alt=media&#x26;token=8286faad-1b41-4860-8cc4-ae7d63fb87f1" alt=""><figcaption><p>Associate with ACM</p></figcaption></figure>

* cloudfront is **NOT** support WebSocket.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mamawhocode.gitbook.io/aws/services/network/cloudfront.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.