Skip to main content

CloudFront

Amazon CloudFront is the AWS content delivery network. It caches files at edge locations close to users and terminates HTTPS there. The Web App Blueprint uses it to serve the React single-page application from a private S3 bucket.

What it does​

A CloudFront distribution has one or more origins (an S3 bucket, a load balancer, any HTTP server), a set of cache behaviors, a certificate and one or more alternate domain names. Requests hit the nearest edge; cached responses are served there, and cache misses go back to the origin. Origin Access Control (OAC) lets the distribution read a bucket that blocks all public access.

How BuiltForProd uses it​

The frontend-cdn unit in acme-aws-blueprint-webapp-infra builds the whole front end path with two registry modules, terraform-aws-modules/s3-bucket/aws 5.16.1 and terraform-aws-modules/cloudfront/aws 6.7.1:

  • A private bucket acme-usw2-dev-frontend with every public-access block on, versioning and server-side encryption. Its bucket policy allows s3:GetObject only to the CloudFront service, and only for this distribution's ARN.
  • A distribution with alias blueprint-app.dev.company.com, IPv6 on, PriceClass_100, HTTPS redirect, the managed CachingOptimized cache policy and compression. Any 403 or 404 from S3 returns /index.html with status 200, so client-side routes work on a direct load.
  • The certificate comes from the acm-certificate unit, which issues a second copy of the stage's wildcard certificate in us-east-1 because CloudFront requires it there. Minimum protocol is TLSv1.2_2021.
  • The DNS alias record is written in the DNS account's public zone through the acme-route53-cross-account role.

The unit publishes the bucket name and distribution id to Parameter Store at /acme/usw2/dev/frontend/bucket_name and /acme/usw2/dev/frontend/cloudfront_distribution_id. The cd-frontend.yml workflow in acme-aws-blueprint-webapp-code reads them, builds the app with npm run build, syncs dist/ to the bucket and invalidates the distribution. The cd-release.yml workflow does the same for staging and prod behind GitHub Environments. The browser then calls the API at blueprint-api.dev.company.com, which is the ALB, not CloudFront.

The distribution is not in the Firewall Manager WAF policy scope; that policy covers the ALBs.

Terms you will see​

TermMeaning
DistributionOne CloudFront configuration: origins, behaviors, certificate and domain names.
Origin Access ControlThe signed-request mechanism that lets CloudFront read a private bucket.
InvalidationA request to drop cached objects so the next request fetches the new build.
Price classThe set of edge regions a distribution uses; PriceClass_100 is the cheapest.
Alias recordThe Route 53 record that points the custom host name at the distribution.

Where to read more​