How do you serve a React build and user images from S3 through CloudFront while keeping the bucket private?

Put CloudFront in front of the bucket and turn on origin access control (OAC). OAC means CloudFront signs its requests to S3, so only CloudFront can read the files.

Steps:

• Create a CloudFront distribution with the S3 bucket as its origin (the place CloudFront fetches files from).
• Enable OAC on that origin.
• In the bucket policy, allow s3:GetObject for the cloudfront.amazonaws.com service principal. Add a condition that AWS:SourceArn matches your distribution, so no other distribution can use it.
• Keep Block Public Access on. Users can then reach files only through CloudFront.

What CloudFront adds:

• It caches files at edge locations near users.
• It serves over HTTPS with your certificate from ACM (AWS Certificate Manager).
• It reduces the number of requests to S3.

For the React SPA (single-page app):

• Set the default root object to index.html.
• Map 403 and 404 errors to /index.html, so client-side routing works on deep links.
• Give built files content-hashed names with long cache times.
• Give index.html a short TTL (cache lifetime), or invalidate it on each deploy.

OAC replaces the older origin access identity (OAI). OAC also supports buckets encrypted with SSE-KMS.