🖼️ See the drawing + lab 🏠 Course home 🌿 Branch on GitHub ✏️ View source

🖼️ आकृती आणि labThe drawing + lab पूर्ण पानावर उघडा ↗Open full page ↗

🌍 धडा 03 — UI साठी CloudFront + S3: प्रत्येक दारावर झेरॉक्स प्रती

📍 तुम्ही इथे आहात: 13 पैकी धडा 03 · मागे: lesson-02-measuring-load · पुढे: lesson-04-dynamic-at-the-edge

📦 या ब्रँचमध्ये काय आहे

धडे 01–02, आणि त्याशिवाय पहिला tier: UI. Pages, scripts, styles आणि चित्रे Amazon S3 मध्ये राहतात आणि Amazon CloudFront ती देतो — प्रत्येक भेट देणाऱ्याजवळच्या edge locations वर ठेवलेल्या प्रती. वेगवेगळ्या TTLs साठी तुम्ही hit ratio मोजता, आणि invalidation व versioned file names पाहता. scale/demo.py मधले cdn() प्रत्येक गोष्ट दाखवते.

🧒 5 वर्षांच्या मुलाला समजावल्यासारखे

जत्रेचे एकच office आहे, शाळेच्या मधोमध. जत्रेचा नकाशा हवा असलेला प्रत्येक पालक office पर्यंत चालत जातो, थांबतो, आणि एक प्रत घेतो. निकालाच्या दिवशी office भरून जाते.

म्हणून दीपिका प्रत्येक फाटकावर एक झेरॉक्स टेबल 📄🚪 ठेवते. प्रत्येक टेबलावर नकाशाच्या प्रती असतात. पालक जवळच्या फाटकावर विचारतो आणि लगेच प्रत मिळवतो — हा hit. फक्त जेव्हा एखाद्या टेबलावर प्रतच नसते, किंवा ती प्रत खूप जुनी असते, तेव्हाच एक मदतनीस नवी प्रत आणायला office कडे धावतो — हा miss.

प्रत्येक प्रतीवर "इतक्या वेळपर्यंत चालेल" अशी वेळ लिहिलेली असते — हा TTL. 1 सेकंद चालणारी प्रत म्हणजे दर सेकंदाला office कडे एक फेरी. 10 सेकंद चालणारी प्रत म्हणजे दहापट कमी फेऱ्या.

नकाशा बदलला की दीपिका प्रत्येक फाटकाला ओरडून सांगू शकते "जुने नकाशे फेकून द्या!" (invalidation). किंवा — त्याहून चांगले — ती नवा नकाशा नव्या नावाने छापते: "नकाशा, version 2". कोणत्याच टेबलावर अजून version 2 ची प्रत नाही, म्हणून प्रत्येक टेबल ती एकदाच आणते, आणि कुणीही चुकून जुना नकाशा देत नाही.

🗺️ आकृती

flowchart LR
    u1["👪 parent in Pune"] --> e1["📄 edge location<br/>Mumbai"]
    u2["👪 parent in Delhi"] --> e2["📄 edge location<br/>Delhi"]
    e1 -->|"miss"| rec["🗄️ regional edge cache"]
    e2 -->|"miss"| rec
    rec -->|"miss"| s3["🪣 S3 bucket (origin)<br/>private · OAC"]
    e1 -.->|"hit: answer at once"| u1
    ttl["⏲️ TTL 0 s → 3,000 to S3<br/>TTL 1 s → 359<br/>TTL 10 s → 36<br/>TTL 60 s → 6"]

🗺️ काढलेली आकृती + एक lab: https://school-edh.pages.dev/scaling/lesson-diagrams.html#l03

❓ काय

CDN (content delivery network) — तुमच्या files च्या अनेक प्रती, users जवळ ठेवलेल्या. Amazon CloudFront हा AWS चा CDN आहे.
Edge location — users जवळचे CloudFront चे ठिकाण, जगभरात शेकडो जागी. ते प्रती ठेवते आणि त्यांतूनच उत्तर देते.
Regional edge cache — edge locations आणि तुमच्या origin मधला एक मोठा cache. Edge वर miss झाला की आधी त्याला विचारले जाते, त्यामुळे origin पर्यंत कमी requests पोहोचतात.
Origin — खऱ्या files जिथे राहतात ती जागा: UI साठी S3 bucket, किंवा तुमचा API (धडा 04).
Cache hit / miss — hit ला प्रतीतून उत्तर मिळते; miss आणखी मागे जातो. Hit ratio = hits ÷ सगळ्या requests. 99% hit ratio ला origin ला load चा फक्त 1% दिसतो.
TTL (time to live) — एक प्रत किती वेळ चालते. CloudFront तो origin च्या Cache-Control header मधून घेतो (max-age, किंवा CloudFront सारख्या shared caches साठी s-maxage), cache policy च्या minimum / maximum TTL च्या आत ठेवून.
Cache key — दोन requests ना "एकच file" ठरवणारी गोष्ट: default म्हणजे path. एखादी cache policy query strings, headers किंवा cookies जोडू शकते. प्रत्येक जादा भाग cache ला जास्त प्रतींमध्ये विभागतो आणि hit ratio कमी करतो.
Invalidation — TTL संपण्याआधीच प्रती टाकून द्यायला CloudFront ला सांगणे. दर महिन्याचे पहिले 1,000 paths मोफत, त्यानंतर प्रत्येक path चे पैसे लागतात (wildcard /* एक path म्हणून मोजला जातो).
Versioned file names — app.js ऐवजी app.3f9c.js. नवी release म्हणजे नवी cache key, म्हणून invalidate करायला काहीच उरत नाही. Build tools (Vite, webpack) हे तुमच्यासाठी करतात.
OAC (origin access control) — फक्त तुमच्या CloudFront distribution लाच S3 bucket वाचू देते. Bucket private राहते; कुणीही CDN ला वळसा घालू शकत नाही.

🤔 का

कारण निकालाच्या दिवशी बहुतेक requests त्याच मोजक्या files साठी असतात: home page, script, style sheet, शाळेचा logo. त्या एकाच origin वरून देणे म्हणजे तो वाया घालवणे; प्रत्येक पालकाजवळच्या edges वरून देणे त्यांना जलद आणि तुमच्या servers वरचा भार कमी करते. UI tier scale करायला सर्वात सोपा आहे: त्याचा बहुतेक भाग सगळीकडे copy करता येतो.

🔧 कसे (या repo मध्ये)

scale/sim.py मधले EdgeCache(ttl) म्हणजे एक edge location. get(path, t) कडे ttl सेकंदांपेक्षा नवी प्रत असेल तर ते HIT परत करते; नाहीतर ते नवी प्रत घेते (MISS, origin ला एक request). fair_traffic(60, 50, PAGES) एका मिनिटाचे traffic बनवते — 6 pages वर 50 req/s, जिथे लोकप्रिय pages खूप जास्त वेळा मागितली जातात (Zipf सारखे वाटप). cdn() ते TTL 0, 1, 10 आणि 60 ला पुन्हा चालवते, मग /app.js ची एक दिवसाची प्रत, एक invalidation, आणि versioned-name ची कल्पना दाखवते.

🧪 करून पाहा

python3 scale/demo.py cdn
python3 - <<'EOF'
import sys; sys.path.insert(0, "scale"); from sim import EdgeCache, fair_traffic; from demo import PAGES
from collections import Counter
traffic = fair_traffic(60, 50, PAGES)
for p, n in Counter(p for _, p in traffic).most_common(): print(f"{p:<24} {n:>4} requests")
for ttl in (2, 5, 30, 300):
    e = EdgeCache(ttl)
    for t, p in traffic: e.get(p, t)
    print(f"TTL {ttl:>3} s → hit ratio {e.hit_ratio():6.1%} · origin sees {e.misses:>4}")
e = EdgeCache(31536000)
print("app.3f9c.js:", e.get("/app.3f9c.js", 0), e.get("/app.3f9c.js", 60), "· new release app.7b21.js:", e.get("/app.7b21.js", 61))
EOF

✅ तपासा — तुम्हाला काय दिसायला हवे

cdn हे print करते:

── 3,000 requests in one minute for 6 pages, popular pages asked far more
   TTL   0 s → hit ratio   0.0% · origin (S3) sees 3,000 requests
   TTL   1 s → hit ratio  88.0% · origin (S3) sees   359 requests
   TTL  10 s → hit ratio  98.8% · origin (S3) sees    36 requests
   TTL  60 s → hit ratio  99.8% · origin (S3) sees     6 requests
── /app.js cached for a day: MISS then HIT; new release → invalidate → MISS

तुमचा snippet आधी वाटप print करतो — / 1190 requests, /results 645, /results/3A 416, /app.js 287, /style.css 252, /photos/sports-day.jpg 210 — मग:

TTL   2 s → hit ratio  94.0% · origin sees  180
TTL   5 s → hit ratio  97.6% · origin sees   72
TTL  30 s → hit ratio  99.6% · origin sees   12
TTL 300 s → hit ratio  99.8% · origin sees    6
app.3f9c.js: MISS HIT · new release app.7b21.js: MISS

🏁 तुम्ही आत्ताच काय सिद्ध केले

Cache नसताना (TTL 0) origin ला सगळ्या 3,000 requests दिसतात. 1 सेकंदाची प्रतच त्यांपैकी 88% काढून टाकते; 10 सेकंद 98.8% काढतात. सुमारे 60 s नंतर वक्र सपाट होतो — 6 misses म्हणजे प्रत्येक page साठी एक, ते पहिल्यांदा मागितले जाते तेव्हा. आणि नवे file name आपोआपच miss असते: invalidation ची गरज नाही.

⚠️ नेहमीच्या चुका

CloudFront + OAC मागच्या private bucket ऐवजी public S3 bucket (website endpoint)
index.html एक वर्षासाठी cache केलेले — त्यात versioned files ची नावे असतात, म्हणून ते कमी वेळच राहिले पाहिजे (no-cache किंवा लहान max-age); फक्त versioned files ना max-age=31536000, immutable मिळते
versioned names वापरण्याऐवजी प्रत्येक deploy ला /* invalidate करणे
प्रत्येक header आणि cookie cache key मध्ये टाकणे — प्रत्येक जण cache विभागतो आणि hit ratio घसरतो
एक edge location म्हणजे एक cache हे विसरणे: lab मध्ये एक आहे; खऱ्या distribution मध्ये शेकडो असतात, प्रत्येकाचे स्वतःचे misses (धडा 04 आणखी edges जोडतो)

🏭 प्रत्यक्ष वापरात

On a real account — build योग्य headers सह upload करा: versioned files एक वर्षासाठी, index.html तपासल्याशिवाय कधीच cache नाही:

aws s3 sync dist/ s3://school-ui-prod/ --exclude index.html \
    --cache-control "public, max-age=31536000, immutable"
aws s3 cp dist/index.html s3://school-ui-prod/index.html --cache-control "no-cache"
aws cloudfront create-invalidation --distribution-id E1A2B3C4D5E6F7 --paths "/index.html"

Terraform — एक private bucket, OAC, आणि AWS managed CachingOptimized cache policy वापरणारे distribution:

resource "aws_cloudfront_origin_access_control" "ui" {
  name                              = "school-ui-oac"
  origin_access_control_origin_type = "s3"
  signing_behavior                  = "always"
  signing_protocol                  = "sigv4"
}

resource "aws_cloudfront_distribution" "ui" {
  enabled             = true
  default_root_object = "index.html"
  origin {
    domain_name              = aws_s3_bucket.ui.bucket_regional_domain_name
    origin_id                = "s3-ui"
    origin_access_control_id = aws_cloudfront_origin_access_control.ui.id
  }
  default_cache_behavior {
    target_origin_id       = "s3-ui"
    viewer_protocol_policy = "redirect-to-https"
    allowed_methods        = ["GET", "HEAD"]
    cached_methods         = ["GET", "HEAD"]
    compress               = true
    cache_policy_id        = "658327ea-f89d-4fab-a63d-7e88639e58f6"   # Managed-CachingOptimized
  }
  restrictions { geo_restriction { restriction_type = "none" } }
  viewer_certificate { cloudfront_default_certificate = true }
}

Bucket policy फक्त याच distribution ला वाचू देते (AWS:SourceArn म्हणजे distribution चा ARN):

{
  "Version": "2012-10-17",
  "Statement": [{
    "Effect": "Allow",
    "Principal": { "Service": "cloudfront.amazonaws.com" },
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::school-ui-prod/*",
    "Condition": { "StringEquals": {
      "AWS:SourceArn": "arn:aws:cloudfront::111122223333:distribution/E1A2B3C4D5E6F7" } }
  }]
}

🏭 प्रत्यक्ष वापरात हे का महत्त्वाचे: CloudFront console मध्ये distribution चा cache hit rate पाहा. Static UI 90% च्या बऱ्याच वर असायला हवा. नसेल, तर cache key (query strings, cookies, headers) आणि तुमचा build पाठवतो तो Cache-Control तपासा.

⏭️ पुढे

कधीच न बदलणाऱ्या files सोप्या आहेत. पण शिक्षिकेने grade save केली की /results/3A बदलते. Live page ची सुद्धा फाटकावर प्रत ठेवता येईल का? काही सेकंदांसाठी — हो.

git checkout lesson-04-dynamic-at-the-edge

🌍 Lesson 03 — CloudFront + S3 for the UI: photocopies at every gate

📍 You are here: Lesson 03 of 13 · Previous: lesson-02-measuring-load · Next: lesson-04-dynamic-at-the-edge

📦 What's in this branch

Lessons 01–02, plus the first tier: the UI. The pages, scripts, styles and pictures live in Amazon S3 and are served by Amazon CloudFront — copies kept at edge locations close to each visitor. You measure the hit ratio for different TTLs, and see invalidation and versioned file names. cdn() in scale/demo.py shows each one.

🧒 Explain like I'm 5

The fair has one office, in the middle of the school. Every parent who wants the fair map walks to the office, waits, and gets a copy. On results day the office is full.

So Dipika puts a photocopy desk at every gate 📄🚪. Each desk keeps copies of the map. A parent asks at the nearest gate and gets a copy at once — that is a hit. Only when a desk has no copy, or its copy is too old, does a helper run to the office for a fresh one — that is a miss.

Each copy has a "good until" time written on it — the TTL. A copy that is good for 1 second means a run to the office every second. A copy good for 10 seconds means ten times fewer runs.

When the map changes, Dipika can shout "throw away your old maps!" to every gate (invalidation). Or — better — she prints the new map with a new name: "map, version 2". No desk has a copy of version 2 yet, so every desk fetches it once, and nobody hands out the old one by mistake.

🗺️ Diagram

flowchart LR
    u1["👪 parent in Pune"] --> e1["📄 edge location<br/>Mumbai"]
    u2["👪 parent in Delhi"] --> e2["📄 edge location<br/>Delhi"]
    e1 -->|"miss"| rec["🗄️ regional edge cache"]
    e2 -->|"miss"| rec
    rec -->|"miss"| s3["🪣 S3 bucket (origin)<br/>private · OAC"]
    e1 -.->|"hit: answer at once"| u1
    ttl["⏲️ TTL 0 s → 3,000 to S3<br/>TTL 1 s → 359<br/>TTL 10 s → 36<br/>TTL 60 s → 6"]

🗺️ Drawn version + a lab: https://school-edh.pages.dev/scaling/lesson-diagrams.html#l03

❓ What

CDN (content delivery network) — many copies of your files, kept close to users. Amazon CloudFront is AWS's CDN.
Edge location — a CloudFront site near users, in hundreds of places around the world. It keeps copies and answers from them.
Regional edge cache — a larger cache between the edge locations and your origin. An edge miss asks it first, so fewer requests reach the origin.
Origin — where the real files live: an S3 bucket for the UI, or your API (lesson 04).
Cache hit / miss — a hit is answered from the copy; a miss goes further back. Hit ratio = hits ÷ all requests. At a 99% hit ratio the origin sees 1% of the load.
TTL (time to live) — how long a copy is good. CloudFront takes it from the origin's Cache-Control header (max-age, or s-maxage for shared caches such as CloudFront), kept inside the minimum / maximum TTL of the cache policy.
Cache key — what makes two requests "the same file": by default the path. A cache policy can add query strings, headers or cookies. Every extra part splits the cache into more copies and lowers the hit ratio.
Invalidation — tell CloudFront to drop copies before their TTL ends. The first 1,000 paths each month are free, then each path is charged (a wildcard /* counts as one path).
Versioned file names — app.3f9c.js instead of app.js. A new release is a new cache key, so there is nothing to invalidate. Build tools (Vite, webpack) do this for you.
OAC (origin access control) — lets only your CloudFront distribution read the S3 bucket. The bucket stays private; nobody can go around the CDN.

🤔 Why

Because on results day most requests are for the same few files: the home page, the script, the style sheet, the school logo. Serving them from one origin wastes it; serving them from edges near each parent makes them fast and takes them off your servers. The UI tier is the easiest one to scale: most of it can be copied everywhere.

🔧 How (in this repo)

EdgeCache(ttl) in scale/sim.py is one edge location. get(path, t) returns HIT when it has a copy younger than ttl seconds; otherwise it takes a fresh copy (MISS, one origin request). fair_traffic(60, 50, PAGES) makes one minute of traffic — 50 req/s over 6 pages, where popular pages are asked for far more often (a Zipf-like spread). cdn() replays it at TTL 0, 1, 10 and 60, then shows a one-day copy of /app.js, an invalidation, and the versioned-name idea.

🧪 Try it

python3 scale/demo.py cdn
python3 - <<'EOF'
import sys; sys.path.insert(0, "scale"); from sim import EdgeCache, fair_traffic; from demo import PAGES
from collections import Counter
traffic = fair_traffic(60, 50, PAGES)
for p, n in Counter(p for _, p in traffic).most_common(): print(f"{p:<24} {n:>4} requests")
for ttl in (2, 5, 30, 300):
    e = EdgeCache(ttl)
    for t, p in traffic: e.get(p, t)
    print(f"TTL {ttl:>3} s → hit ratio {e.hit_ratio():6.1%} · origin sees {e.misses:>4}")
e = EdgeCache(31536000)
print("app.3f9c.js:", e.get("/app.3f9c.js", 0), e.get("/app.3f9c.js", 60), "· new release app.7b21.js:", e.get("/app.7b21.js", 61))
EOF

✅ Verify — what you should see

cdn prints:

── 3,000 requests in one minute for 6 pages, popular pages asked far more
   TTL   0 s → hit ratio   0.0% · origin (S3) sees 3,000 requests
   TTL   1 s → hit ratio  88.0% · origin (S3) sees   359 requests
   TTL  10 s → hit ratio  98.8% · origin (S3) sees    36 requests
   TTL  60 s → hit ratio  99.8% · origin (S3) sees     6 requests
── /app.js cached for a day: MISS then HIT; new release → invalidate → MISS

Your snippet prints the spread first — / 1190 requests, /results 645, /results/3A 416, /app.js 287, /style.css 252, /photos/sports-day.jpg 210 — then:

TTL   2 s → hit ratio  94.0% · origin sees  180
TTL   5 s → hit ratio  97.6% · origin sees   72
TTL  30 s → hit ratio  99.6% · origin sees   12
TTL 300 s → hit ratio  99.8% · origin sees    6
app.3f9c.js: MISS HIT · new release app.7b21.js: MISS

🏁 What you just proved

With no cache (TTL 0) the origin sees all 3,000 requests. A 1-second copy already removes 88% of them; 10 seconds removes 98.8%. After about 60 s the curve is flat — 6 misses is one per page, the first time it is asked. And a new file name is a miss by itself: no invalidation needed.

⚠️ Common mistakes

a public S3 bucket (website endpoint) instead of a private bucket behind CloudFront + OAC
index.html cached for a year — it names the versioned files, so it must stay short (no-cache or a small max-age); only the versioned files get max-age=31536000, immutable
invalidating /* on every deploy instead of using versioned names
adding every header and cookie to the cache key — each one splits the cache and the hit ratio falls
forgetting that one edge location is one cache: the lab has one; a real distribution has hundreds, each with its own misses (lesson 04 adds more edges)

🏭 In production

On a real account — upload the build with the right headers: versioned files for a year, index.html never cached without checking:

aws s3 sync dist/ s3://school-ui-prod/ --exclude index.html \
    --cache-control "public, max-age=31536000, immutable"
aws s3 cp dist/index.html s3://school-ui-prod/index.html --cache-control "no-cache"
aws cloudfront create-invalidation --distribution-id E1A2B3C4D5E6F7 --paths "/index.html"

Terraform — a private bucket, OAC, and a distribution that uses the AWS managed CachingOptimized cache policy:

resource "aws_cloudfront_origin_access_control" "ui" {
  name                              = "school-ui-oac"
  origin_access_control_origin_type = "s3"
  signing_behavior                  = "always"
  signing_protocol                  = "sigv4"
}

resource "aws_cloudfront_distribution" "ui" {
  enabled             = true
  default_root_object = "index.html"
  origin {
    domain_name              = aws_s3_bucket.ui.bucket_regional_domain_name
    origin_id                = "s3-ui"
    origin_access_control_id = aws_cloudfront_origin_access_control.ui.id
  }
  default_cache_behavior {
    target_origin_id       = "s3-ui"
    viewer_protocol_policy = "redirect-to-https"
    allowed_methods        = ["GET", "HEAD"]
    cached_methods         = ["GET", "HEAD"]
    compress               = true
    cache_policy_id        = "658327ea-f89d-4fab-a63d-7e88639e58f6"   # Managed-CachingOptimized
  }
  restrictions { geo_restriction { restriction_type = "none" } }
  viewer_certificate { cloudfront_default_certificate = true }
}

The bucket policy lets only this distribution read (AWS:SourceArn is the distribution ARN):

{
  "Version": "2012-10-17",
  "Statement": [{
    "Effect": "Allow",
    "Principal": { "Service": "cloudfront.amazonaws.com" },
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::school-ui-prod/*",
    "Condition": { "StringEquals": {
      "AWS:SourceArn": "arn:aws:cloudfront::111122223333:distribution/E1A2B3C4D5E6F7" } }
  }]
}

🏭 Why this matters in production: watch the distribution's cache hit rate in the CloudFront console. A static UI should be well above 90%. If it is not, look at the cache key (query strings, cookies, headers) and at the Cache-Control your build sends.

⏭️ Next

Files that never change are easy. But /results/3A changes when a teacher saves a grade. Can a live page be copied at the gate too? For a few seconds — yes.

git checkout lesson-04-dynamic-at-the-edge

← Previousmeasuring load Next →dynamic at the edge

This page is the lesson's README from the lesson-03-cloudfront-s3 branch, shown here so the whole School stays on one site. Code files open on GitHub at the same branch.