{"id":"l-aws-4-1","courseId":"aws-cloud-foundations","lang":"en","kind":"lesson","summary":"Ship Lantern’s front end from a private S3 bucket through Amazon CloudFront with origin access control, HTTPS on a custom domain, sensible cache headers and invalidations.","html":"

Remember the street-food festival that took Lantern down? Most of those requests were for the same few files: the home page, a stylesheet, JavaScript and one poster. Lantern’s front end is a Vite app that builds to static files, so it doesn’t need a server at all. It needs a place to keep files, Amazon S3, and a global cache in front of it, Amazon CloudFront.

\n

The shape of it

\n
\n A browser requests lantern.example over HTTPS from a CloudFront edge location. On a cache hit the edge answers directly. On a miss, CloudFront signs a request with origin access control to the private S3 bucket, which allows only that distribution.\n \n Browser\n \n CloudFront edge\n cache\n \n S3 bucket\n private, BPA on\n \n HTTPS\n \n cache hit\n \n miss: signed\n Bucket policy: allow s3:GetObject only for this distribution\n
Viewers hit a nearby edge location; only cache misses reach the private bucket
\n

Most requests are cache hits, answered by an edge location near the visitor without touching S3. On a miss, CloudFront fetches the file from the bucket, signing the request with origin access control (OAC). The bucket stays private, with Block Public Access on, and its policy allows reads from that one distribution only.

\n

Step by step

\n

1. Build and create a private bucket

\n
Terminal
npm run build                      # Vite writes dist/\naws s3 mb s3://lantern-site-prod --region eu-west-1
\n

The new bucket is private by default. Do not turn on static website hosting: OAC needs the bucket’s regular endpoint, and the website endpoint only speaks HTTP and requires public access.

\n

2. Upload with the right cache headers

\n

Vite puts a content hash in asset file names (assets/index-4f8a1c.js), so a changed file always gets a new name. Those can be cached for a year. index.html keeps its name, so browsers and CloudFront should always check for a newer one:

\n
Terminal
aws s3 sync dist/ s3://lantern-site-prod/ --delete \\\n  --exclude \"index.html\" \\\n  --cache-control \"public,max-age=31536000,immutable\"\n\naws s3 cp dist/index.html s3://lantern-site-prod/index.html \\\n  --cache-control \"no-cache\"
\n

--delete removes files from the bucket that no longer exist in dist/, so old bundles don’t pile up.

\n

3. Get a certificate in us-east-1

\n

For HTTPS on lantern.example, request a public certificate from AWS Certificate Manager in us-east-1. CloudFront only uses certificates from that Region, whatever Region your bucket is in. Validate it with the DNS record ACM gives you.

\n
Terminal
aws acm request-certificate --region us-east-1 \\\n  --domain-name lantern.example --validation-method DNS
\n

4. Create the distribution

\n

In the CloudFront console, create a distribution with:

\n\n

If the front end uses client-side routes such as /events/street-food, those paths don’t exist as files, and S3 answers through OAC with 403. Add a custom error response that serves /index.html with status 200 for 403 errors, or a small CloudFront Function that rewrites those paths, so that deep links shared on social media open the right page instead of an error.

\n

5. Let only that distribution read the bucket

\n
site-bucket-policy.json
{\n  \"Version\": \"2012-10-17\",\n  \"Statement\": [\n    {\n      \"Sid\": \"AllowCloudFrontServicePrincipalReadOnly\",\n      \"Effect\": \"Allow\",\n      \"Principal\": { \"Service\": \"cloudfront.amazonaws.com\" },\n      \"Action\": \"s3:GetObject\",\n      \"Resource\": \"arn:aws:s3:::lantern-site-prod/*\",\n      \"Condition\": {\n        \"StringEquals\": {\n          \"AWS:SourceArn\": \"arn:aws:cloudfront::111122223333:distribution/E2QWRUHEXAMPLE\"\n        }\n      }\n    }\n  ]\n}
\n

The condition is what makes this safe: without it, any CloudFront distribution in any account could read the bucket.

\n

6. Point DNS and test

\n

Create alias A and AAAA records for lantern.example pointing to the distribution (in Amazon Route 53, or as a CNAME at another DNS host for a subdomain). Then check that https://lantern.example loads, and that the bucket’s own URL returns 403 Access Denied: that 403 proves the bucket is private.

\n

7. On every deploy

\n

Repeat step 2, then invalidate only the file that keeps its name:

\n
Terminal
aws cloudfront create-invalidation \\\n  --distribution-id E2QWRUHEXAMPLE --paths \"/index.html\"
\n\n

Cost and security in one glance

\n

You pay S3 for storage and for requests, and with CloudFront in front, S3 only sees cache misses. Transfer from S3 to CloudFront is not charged; CloudFront bills for requests and data delivered to viewers on pay-as-you-go, or you can choose one of its flat-rate plans that bundle the CDN with AWS WAF, DNS and S3 credits for a fixed monthly price with no overage charges. Either way, the festival spike now lands on edge locations built for it.

\n

Security-wise: one private bucket, one bucket policy with a SourceArn condition, HTTPS only, security headers on. Next you add the dynamic part: the RSVP API.

\n","toc":[{"id":"sec-1","text":"The shape of it","level":2},{"id":"sec-2","text":"Step by step","level":2},{"id":"sec-3","text":"1. Build and create a private bucket","level":3},{"id":"sec-4","text":"2. Upload with the right cache headers","level":3},{"id":"sec-5","text":"3. Get a certificate in us-east-1","level":3},{"id":"sec-6","text":"4. Create the distribution","level":3},{"id":"sec-7","text":"5. Let only that distribution read the bucket","level":3},{"id":"sec-8","text":"6. Point DNS and test","level":3},{"id":"sec-9","text":"7. On every deploy","level":3},{"id":"sec-10","text":"Cost and security in one glance","level":2}],"takeaways":["The bucket stays private; CloudFront reads it through origin access control, and a bucket policy allows only that one distribution.","Origin access control works with the bucket’s regular endpoint, not the S3 static website endpoint.","A certificate for a CloudFront custom domain must live in AWS Certificate Manager in us-east-1, requested or imported there.","Give hashed asset files a long cache lifetime and index.html a short one, so deploys show up without mass invalidations.","Serving from edge locations absorbs traffic spikes and reduces data transfer from the origin."],"further":[{"title":"Restrict access to an Amazon S3 origin","url":"https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html"},{"title":"Get started with a CloudFront standard distribution","url":"https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/GettingStarted.SimpleDistribution.html"},{"title":"Requirements for using SSL/TLS certificates with CloudFront","url":"https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cnames-and-https-requirements.html"},{"title":"Invalidate files to remove content","url":"https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html"}],"quiz":[{"q":"

Why does Lantern keep the site bucket private instead of turning on S3 static website hosting and making it public?

","options":[{"text":"Public buckets cannot serve HTML files.","why":"A public bucket with website hosting serves HTML fine. The reasons are security and control, not capability."},{"text":"CloudFront refuses to cache content from public buckets.","why":"CloudFront can use a public website endpoint as a custom origin. Lantern avoids it because it leaves the bucket open to direct access."},{"text":"S3 static website hosting is no longer available.","why":"Website endpoints still exist. They only serve HTTP, though, and require public read access."},{"text":"With origin access control, visitors can only reach files through CloudFront, over HTTPS, and the bucket never needs public access.","why":"Correct. One bucket policy grants read to one distribution, and Block Public Access stays on."}],"answer":3},{"q":"

You request a certificate for lantern.example in AWS Certificate Manager in eu-west-1, but CloudFront does not list it. Why?

","options":[{"text":"CloudFront only uses certificates issued in the US East (N. Virginia) Region, us-east-1.","why":"Correct. CloudFront is a global service whose certificates must be requested or imported in us-east-1."},{"text":"The certificate needs a few hours to replicate to all Regions.","why":"ACM certificates are never replicated between Regions. A certificate exists only in the Region where you created it."},{"text":"CloudFront requires certificates from a third-party authority.","why":"ACM public certificates work with CloudFront, at no charge for the certificate itself."}],"answer":0},{"q":"

After a deploy, visitors still see the old version of the home page for hours, while new JavaScript files load fine. What is the most likely cause?

","options":[{"text":"S3 sync did not upload the new index.html.","why":"Possible, but the new hashed JS files arrived, so the upload itself ran. The symptom points at caching."},{"text":"CloudFront is serving a cached index.html because it was uploaded with a long cache lifetime.","why":"Correct. Give index.html a short or no-cache header, and invalidate /index.html after each deploy."},{"text":"Browsers never cache HTML, so this must be a DNS problem.","why":"Browsers and CDNs both cache HTML according to the Cache-Control header. DNS does not decide which version of a file is served."}],"answer":1}],"exercise":{"kind":"order","items":["build","bucket","upload","cert","distribution","policy","dns","verify"],"title":"Ship the static site","prompt":"

Put the steps for Lantern’s first production deploy of the front end in a working order. The bucket stays private and the site is served only through CloudFront on https://lantern.example. Finish the build-and-S3 work first, then do the certificate, CloudFront and DNS work.

\n","hints":["You can’t upload files you haven’t built, or into a bucket that doesn’t exist.","The distribution needs the certificate when you attach the custom domain, and the bucket policy needs the distribution’s ARN.","DNS goes last before testing, so visitors never land on a half-configured distribution."],"explanation":"

Build first so there is something to upload, then create the private bucket and sync the files with their cache headers. The certificate must exist (and be validated) in us-east-1 before you can attach lantern.example to the distribution. The distribution must exist before the bucket policy, because the policy’s AWS:SourceArn condition names the distribution’s ARN. Only when CloudFront can read the bucket do you point DNS at it, and the final check proves both halves: the site loads through CloudFront and the bucket refuses direct requests with 403.

\n","checkLabels":{},"itemText":{"build":"Run npm run build to produce the dist/ folder.","bucket":"Create the private lantern-site-prod bucket in Lantern’s Region, with Block Public Access left on.","upload":"Upload dist/ with aws s3 sync, long cache headers for hashed assets and no-cache for index.html.","cert":"Request and DNS-validate an ACM certificate for lantern.example in us-east-1.","distribution":"Create the CloudFront distribution with origin access control, index.html as default root object and the certificate attached.","policy":"Add the bucket policy that allows s3:GetObject for cloudfront.amazonaws.com with an AWS:SourceArn condition for this distribution.","dns":"Create alias A and AAAA records for lantern.example pointing at the distribution.","verify":"Check that https://lantern.example loads and that the bucket’s direct URL returns 403."}},"words":669,"readMinutes":3}