# _CloudFront
## What is it?
[[_CloudFront|CloudFront]] is a CDN. It can be used for:
- Static & Dynamic content
- Video Streaming
- Web Sockets

## Benefits
- [[_CloudFront|CloudFront]] can be fronted with [[AWS WAF]] for OWASP's top 10 protection.
- [[_CloudFront|CloudFront]] can stream [[Videos On Demand]] using [[ISS Microsoft Smooth Streaming]]

## Core components
**Origin**: Location where all original files are located. Examples include: S3, EC2, ELB, Route53.
**Edge Locations**: Compute located strategically close to end users.
**Regional Caches**: Compute located in board geographical locations to speed up requests for edge locations.
**Distribution**: A collection of Edge locations and Regional Cache that defines how cached content should behave. 
  
## [[Lambda@Edge]] and [[CloudFront Functions]]
The order that the functions trigger within CloudFront is:
| Order | Stage | L@E | CF Fns |  Description | Example Use Cases |
|--|---|---|---|---|--|
| 1 |  Viewer Request |  ✔️ |  ✔️ |  When CloudFront receives a request from the viewer. | Redirection (`HTTP` -> `HTTPS`), Cookie Inspection for Auth, Modify Headers for A/B Testing  |
| 2 |  Origin Request |  ✔️ |  ❌ |  Before CloudFront forwards the request to the origin. | Add security headers (CSP/HSTS), set cookies for client side tracking, customise error messages |
| 3 |  Origin Response |  ✔️ |  ❌ |  After CloudFront receives the request from the origin. | Rewrite URLs for SEO or routing, inject headers for origin authentication, selective content serving based on user agent (desktop/mobile mode). |
| 4 |  Viewer Response |  ✔️ |  ✔️ |  Before CloudFront returns the response to the viewer. | Modify headers to control caching, update URLs in HTML for versioning, customise error responses from origin.  |

```mermaid
sequenceDiagram
    participant Viewer
    participant Edge
    participant Origin

    Viewer->>Edge: Viewer Request
    Edge->>Origin: Origin Request
    Origin->>Edge: Origin Response
    Edge->>Viewer: Viewer Response
```