Back to notes
• 4 min read

Deploy Any Frontend to AWS with CloudFormation

You have a frontend app. React, Astro, Vue, plain HTML. You want it on AWS with a custom domain, HTTPS, and a CDN. This series builds that entire stack from scratch using CloudFormation templates that live in their own infra repos and deploy themselves when you push.

What We’re Building

The architecture has seven pieces. Each post in the series covers one.

ACM (AWS Certificate Manager) provisions a free SSL certificate for your domain. It validates ownership through DNS records in your hosted zone and auto-renews forever.

Route 53 manages your domain’s DNS. Alias records point your domain and any subdomains to CloudFront so traffic reaches the right place.

S3 stores your built site files. The bucket stays private. Nobody accesses it directly.

CloudFront sits in front of S3 as a CDN. It serves your site globally over HTTPS using the ACM certificate. An Origin Access Control restricts the S3 bucket so only CloudFront can read from it.

IAM defines a role scoped to exactly the permissions CloudFormation needs. Nothing more. Each post adds permissions for the resources it introduces.

CodePipeline automates the full deploy cycle in three stages: pull source from GitHub, build with CodeBuild, and deploy the output to S3. CodeBuild runs your framework’s build command (npm run build, npx astro build, etc.) and invalidates the CloudFront cache. If your site is plain HTML with no build step, you can skip the build stage and deploy straight to S3.

CodeConnections links your GitHub repo to AWS so CloudFormation can watch for changes and deploy automatically.

How It Gets Deployed

Every resource in this series is defined in a CloudFormation template. Each stack gets its own Git repo containing the template and a deployment file.

Sync from Git connects your repo to CloudFormation through a CodeConnection. When you push a change to a template, CloudFormation detects it, builds a change set, and deploys. No CLI commands, no console clicking, no CI pipeline to maintain.

The IAM role controls what CloudFormation is allowed to provision. It starts minimal and grows as the series adds resources. You always know exactly what permissions your infrastructure has.

Deploy everything in us-east-1. CloudFront requires the ACM certificate to be in that region. If you split resources across regions, the cross-stack imports will fail because CloudFormation can only import values within the same region. Keeping all stacks in us-east-1 avoids that entirely.

What It Deploys

Any framework that outputs static files works with this setup.

React, Preact, Vue, Svelte, Astro, Next.js (static export), Vite, or plain HTML/CSS/JS. The infrastructure doesn’t care what tool built the files. It only cares that they exist in the S3 bucket.

Plain HTML sites can go straight to S3. Everything else runs through CodeBuild first to produce the output files.

If your app needs a server at runtime (standard Next.js with SSR, Remix, SvelteKit in non-static mode), that requires a different architecture like Fargate or Lambda. This series focuses on static output.