Deploy the Frontend Securely with CloudFront or Amplify
Understand the tradeoffs between CloudFront and Amplify for secure static hosting and learn why S3 website endpoints are only for development.
This lesson is purely conceptual — no AWS usage required.
Learning Outcomes
By the end of this lesson, you will be able to:
- Explain why the S3 website endpoint is not the best final deployment target for a real dashboard.
- Choose between CloudFront + S3 and Amplify Hosting for a secure frontend deployment.
- Understand how HTTPS, custom domains, and certificates fit into the deployment path.
- Explain why a private S3 bucket plus CloudFront OAC is stronger than leaving a website bucket public.
Why this lesson is next
Your dashboard now has uploads, file viewing, deletes, and authentication. The next step is deployment hardening.
The main issue is that Amazon S3 website endpoints do not support HTTPS. AWS explicitly recommends using Amplify Hosting or CloudFront when you want secure static website hosting.
The Deployment Decision
You now have two good deployment paths for the frontend:
| Path | Best for | HTTPS | Custom Domain | Bucket Privacy |
|---|---|---|---|---|
| CloudFront + S3 | Learning deeper AWS infrastructure | Yes | Yes | Bucket can stay private |
| Amplify Hosting | Fastest secure deployment | Yes | Yes | Managed for you |
Recommended Rule
Use this rule for your project:
- Choose Amplify Hosting if you want the easiest secure deployment path.
- Choose CloudFront + S3 if you want to understand the lower-level AWS building blocks behind secure static hosting.
Path A: CloudFront + Private S3 Bucket
This is the stronger "learn AWS architecture" path. AWS recommends keeping S3 Block Public Access enabled and using CloudFront Origin Access Control (OAC) to serve a private bucket over HTTPS.
Important Details:
- OAC: Lets CloudFront access a private S3 origin securely so viewers do not access the bucket directly.
- ACM Certificate: For CloudFront custom domains, the certificate must be requested in the us-east-1 Region.
- Website Endpoints: If you use an S3 website endpoint as the origin, you cannot use OAC, and the bucket must be public.
Path B: Amplify Hosting
This is the easier "ship it securely" path. Amplify manages the CDN, SSL certificates, and custom domain routing for you.
Why choose Amplify?
- Zero Config: No need to manually manage CloudFront distributions or OAC policies.
- Managed Certificates: Amplify handles the renewal of your SSL/TLS certificates automatically.
- Deep Integration: Easily connects to your source control (GitHub/GitLab) for CI/CD.
Browser/API Reminder
No matter which frontend deployment path you choose, your backend pattern stays the same:
- The frontend still calls API Gateway.
- Cognito still handles sign-in.
- Your API CORS settings still need to allow the frontend origin.
- Your authenticated requests still send the bearer token in
Authorization.
Lab Checklist
| Step | Success Condition |
|---|---|
| Choose Path | Decision made between Amplify or CloudFront |
| Enable HTTPS | Site is accessible via a secure protocol |
| OAC Configuration | (If CloudFront) S3 bucket remains private |
| DNS Setup | Domain (custom or AWS-provided) points to the CDN |
| CORS Verification | API still accepts requests from the new origin |
Micro-activity 1: Reflection
Think about it
Which path will you use: CloudFront or Amplify? Is your goal "learn lower-level AWS" or "deploy faster"? Do you want the frontend bucket to stay private? Will you use a custom domain now or later?
Summary
The plain S3 website endpoint is fine for learning, but not the best final home for a secure dashboard because it does not support HTTPS. Moving to CloudFront or Amplify Hosting provides the encryption and performance required for professional applications.