Welcome to Day 18. Serving a site directly from S3 works, but it lacks HTTPS and caching. Let's fix that.
The Architecture
User -> 🔒 HTTPS -> CloudFront (Edge) -> 🔒 OAC -> S3 Bucket (Private)
Key Configurations
Origin Access Control (OAC): The modern way to restrict S3 access. We create a Control Setting in CloudFront and update the S3 Bucket Policy to allow cloudfront.amazonaws.com.
Redirect HTTP to HTTPS: Never allow unencrypted traffic.
The React "Gotcha": Since React handles routing in the browser, if a user visits /dashboard, S3 will return a 404 (because that file doesn't exist). Fix: In CloudFront "Error pages", map 403/404 errors to respond with /index.html and a 200 OK status. This lets React Router take over without breaking the user experience.
Now our frontend is fast, secure, and ready for the world.
Top comments (0)