How to Deploy Frontend Apps on AWS: Complete Step by Step Guide to 6 Services
By Braincuber Team
Published on March 7, 2026
A D2C brand we consult for spent $2,340/month on an EC2 instance to host a static React storefront. No server-side rendering. No dynamic API calls. Just HTML, CSS, and a JavaScript bundle. They could have used S3 + CloudFront for $4.70/month. That's $28,000/year burned because someone on the team "knew EC2" and never evaluated alternatives. We moved them to S3 in an afternoon. This complete tutorial walks you through all 6 AWS frontend deployment services so you pick the right one the first time.
What You'll Learn:
- How to evaluate which AWS service fits your frontend stack (static, SSR, full-stack)
- Step by step deployment approach for each of the 6 services
- Real cost differences — from $0.023/GB on S3 to $150+/month on EC2
- Why AWS over Vercel or Netlify when you're past the hobby tier
- The exact scenarios where each service wins (and where it'll bleed money)
- Integration patterns with CloudFront, DynamoDB, Cognito, and API Gateway
Why AWS Instead of Vercel or Netlify
Everyone defaults to Vercel for Next.js and Netlify for static sites. And for side projects, that's fine. But when your D2C store is doing $3M+/year and you're pushing 47,000 monthly visitors through a React frontend, the math changes fast.
Global Infrastructure
AWS has data centers in 33 regions worldwide. Your D2C customers in Dubai, London, and New York all get sub-100ms load times. Vercel's edge network is good, but AWS CloudFront has 450+ edge locations. When your checkout page loads 200ms faster, conversion rates jump 1.3%.
Security Out of the Box
Every AWS service comes with IAM, encryption at rest, DDoS protection via Shield. When you're storing customer PII and processing payment data through your frontend, "Netlify handles it" isn't good enough for SOC 2 audits. AWS gives you the compliance paper trail.
Auto-Scaling That Works
Black Friday traffic spike? AWS scales automatically without the "you've exceeded your plan" emails. We had a client's Shopify-connected React app handle 14x normal traffic during a flash sale on Amplify. Zero downtime. Vercel would have throttled them at that tier.
Full Ecosystem Integration
Your frontend connects to DynamoDB, API Gateway, Cognito, Lambda, and SQS without leaving the AWS console. Try connecting Vercel to a DynamoDB table — you'll be wrestling with VPC peering and IAM cross-account roles. On AWS, it's 3 clicks and an IAM policy.
The 6 AWS Services for Frontend Hosting (And When to Use Each)
| Service | Best For | Starting Cost | Complexity |
|---|---|---|---|
| Amazon S3 | Static sites, SPAs, portfolios | ~$0.50/month | Low |
| Elastic Beanstalk | Full-stack (Next.js, Nuxt.js) | ~$18/month | Medium |
| Amazon EC2 | Custom setups, full control | ~$8.50/month | High |
| AWS Amplify | Modern frameworks + CI/CD | ~$0.01/build min | Low |
| AWS LightSail | Small apps, freelancers | $3.50/month | Low |
| AWS App Runner | Containerized SSR apps | ~$5/month | Low-Medium |
Step by Step: How to Choose and Deploy on Each Service
Amazon S3 — The $0.50/Month Static Host
S3 stores your HTML, CSS, JavaScript, images, and videos. Upload your build folder to a bucket, enable static website hosting, set the bucket policy to public, and you're live. Pair it with CloudFront for CDN caching and HTTPS. Connect a custom domain via Route 53. Total cost for a D2C storefront with 50,000 monthly visitors? Under $5/month. The catch: zero backend capability. No server-side rendering, no form handling, no database connections. If your React app is a pure SPA that calls external APIs, S3 is the answer. If you need SSR — keep reading.
Elastic Beanstalk — The Managed Full-Stack Option
Beanstalk handles provisioning, load balancing, auto-scaling, and health monitoring. Upload your Next.js or Nuxt.js app, Beanstalk creates the EC2 instances, configures the load balancer, and sets up CloudWatch monitoring. It integrates with RDS for databases and CloudWatch for logs. The tradeoff: more complex setup than Amplify or S3, and you're paying for the underlying EC2 instances even during low-traffic hours. We use it for clients running server-rendered storefronts that need tight backend coupling — not for static marketing pages.
Amazon EC2 — Full Control, Full Responsibility
EC2 gives you a virtual server. Install Nginx, configure SSL, deploy your app however you want. You control the OS, the ports, the firewall rules, the cron jobs. It's like renting a bare-metal machine in the cloud. You're responsible for security patches, scaling, load balancing, and uptime. Most D2C brands don't need this for a frontend. But if your frontend and backend are tightly coupled, you're running custom build tools, or you need specific server configurations that managed services can't handle — EC2 is the escape hatch. Just don't use it to host a static React app. *(We've seen $2,340/month EC2 bills for sites that belong on S3.)*
AWS Amplify — The Modern Developer's Pick
Amplify is built for React, Vue, Angular, and Next.js teams. Connect your GitHub repo, Amplify auto-detects the framework, builds, and deploys on every push. Git-based CI/CD out of the box. It bundles Cognito for authentication, AppSync for GraphQL APIs, and DynamoDB for data storage. Create preview environments per Git branch. HTTPS and custom domains are automatic. The downside: more expensive than S3 for simple static sites, and you lose the fine-grained infrastructure control that EC2 gives you. For most D2C frontend teams shipping React apps with user auth and API calls, Amplify is the fastest path to production.
AWS LightSail — EC2's Simpler, Cheaper Cousin
LightSail is the beginner-friendly option. Pre-configured environments for Node.js, LAMP, WordPress, and more. Fixed monthly pricing starting at $3.50 — no surprise bills. Think of it as a simplified EC2 with guardrails. Perfect for freelancers hosting a client's portfolio site or a small D2C blog. The limitation: not built for scale. If your traffic spikes beyond the instance capacity, you're stuck. No auto-scaling, fewer customization options than EC2, and you'll eventually outgrow it. Use it as a launchpad, not a long-term home for a growing store.
AWS App Runner — Containers Without the Kubernetes Headache
App Runner takes your source code or container image and handles everything else: build, deploy, scale, load balance. Connect your GitHub repo or push an image to ECR. App Runner provisions the infrastructure, configures HTTPS, and auto-scales based on traffic. No Dockerfiles to debug at 2 AM *(unless you want to)*. Ideal for SSR Next.js apps or containerized frontends. The catch: overkill for static HTML/CSS sites (use S3), and you get less infrastructure control than EC2 or ECS. But if you're shipping a containerized frontend that needs server-side processing, App Runner is the lowest-friction path.
The Decision Matrix: Which Service Fits Your Stack
Static React/Vue SPA = Amazon S3 + CloudFront (~$5/month) Next.js with SSR = AWS Amplify or App Runner (~$15-25/month) Full-stack app (frontend + backend) = Elastic Beanstalk (~$18-50/month) Custom server setup needed = EC2 (~$8.50-150/month) Small portfolio/blog = LightSail ($3.50/month) Dockerized frontend = App Runner (~$5-20/month)
The #1 Mistake We See
Teams pick EC2 because "we might need server access later." Then they spend 37 hours/month maintaining the instance — patching the OS, rotating SSL certs, debugging Nginx configs — instead of shipping features. Start with the simplest service that fits your architecture. Migrate up only when you actually hit the ceiling, not when you imagine you might.
Real-World Deployment: S3 + CloudFront for a D2C Storefront
Here's exactly how we deployed a React-based D2C product catalog for a client doing $4.7M/year. The entire frontend was a Vite-built SPA that pulled product data from a Shopify Storefront API. Zero server-side logic.
# Step 1: Create the S3 bucket
aws s3 mb s3://your-store-frontend --region us-east-1
# Step 2: Enable static website hosting
aws s3 website s3://your-store-frontend \
--index-document index.html \
--error-document index.html
# Step 3: Build your React/Vite app
npm run build
# Step 4: Sync the build output to S3
aws s3 sync dist/ s3://your-store-frontend --delete
# Step 5: Set bucket policy for public read access
aws s3api put-bucket-policy --bucket your-store-frontend \
--policy file://bucket-policy.json
Adding CloudFront for CDN + HTTPS
S3 alone doesn't give you HTTPS on a custom domain. You need CloudFront in front of it. Create a distribution, point the origin to your S3 bucket, request a free ACM certificate, and attach your custom domain. Total setup time: 23 minutes. The result? Global CDN caching, HTTPS, and your static site loads in under 1.2 seconds from anywhere in the world. Monthly cost for 50,000 visitors: $4.70.
Real-World Deployment: Amplify for a Next.js D2C App
For clients running Next.js with server-side rendering, dynamic API routes, and user authentication, we default to Amplify. Here's the step by step process we follow.
# Step 1: Install Amplify CLI
npm install -g @aws-amplify/cli
# Step 2: Configure Amplify with your AWS account
amplify configure
# Step 3: Initialize Amplify in your Next.js project
amplify init
# Step 4: Add hosting
amplify add hosting
# Select: Hosting with Amplify Console
# Select: Continuous deployment
# Step 5: Connect your GitHub repository in the Amplify Console
# Every push to main auto-deploys
# Step 6: Add authentication (optional)
amplify add auth
# Step 7: Push all changes
amplify push
Amplify Pricing Trap
Amplify charges $0.01 per build minute. Sounds cheap. But a Next.js app with heavy dependencies can take 8-12 minutes per build. Push 15 times a day during sprint week? That's $6-18/day just in build costs. Add SSR request charges at $0.0000009/request and data transfer at $0.15/GB. We've seen Amplify bills hit $127/month for apps that could have been static on S3 for $5. Know your architecture before you commit.
Head-to-Head: When Each Service Beats the Others
| Scenario | Winner | Why |
|---|---|---|
| Static marketing site | S3 + CloudFront | Cheapest, fastest, zero maintenance |
| Next.js store with SSR | AWS Amplify | Git CI/CD, auto-scaling, built-in auth |
| Full-stack app (FE + BE) | Elastic Beanstalk | Manages both layers, load balancing included |
| Custom Nginx + cron jobs | EC2 | Full OS-level control, install anything |
| Freelancer client site | LightSail | Predictable $3.50/month, pre-configured stacks |
| Dockerized SSR frontend | App Runner | Zero server management, auto-scales from container |
Frequently Asked Questions
Can I host a React app on S3 for free?
AWS Free Tier gives you 5GB of S3 storage and 20,000 GET requests/month for 12 months. A typical React SPA build is 2-5MB. So yes, a low-traffic React app is essentially free for the first year. After that, expect $0.50-$5/month depending on traffic.
Is AWS Amplify better than Vercel for Next.js?
Vercel is faster to set up and optimized specifically for Next.js. But Amplify wins when you need deep AWS ecosystem integration — Cognito auth, DynamoDB, Lambda functions, and SQS queues — all within the same account and VPC. Past $50/month spend, Amplify is usually 20-30% cheaper.
How do I add a custom domain to an S3 static site?
Create a CloudFront distribution pointing to your S3 bucket. Request a free SSL certificate via ACM (us-east-1 region). Add your custom domain as an alternate domain name (CNAME) in CloudFront. Update your DNS with a CNAME or ALIAS record pointing to the CloudFront distribution URL.
Should I use EC2 or App Runner for a containerized frontend?
App Runner if you want zero infrastructure management — it handles scaling, load balancing, and HTTPS automatically. EC2 if you need OS-level control, custom networking, or specific server configurations. App Runner costs less for typical workloads and saves 15-20 hours/month in DevOps time.
What's the cheapest way to deploy a frontend on AWS?
S3 + CloudFront for static sites. Under $5/month for most D2C storefronts with up to 100,000 monthly visitors. Free Tier covers the first year almost entirely. Avoid EC2 and Elastic Beanstalk unless you actually need server-side processing — they'll cost 10-50x more for the same static content.
Still Running Your Frontend on the Wrong AWS Service?
We've audited AWS accounts where D2C brands were spending $2,340/month on EC2 instances for static React sites that belong on S3 at $4.70/month. That's $28,000/year burned on infrastructure you don't need. We'll audit your current setup, recommend the right service for your architecture, and migrate you in under a week. No consulting fluff — just the move that saves you money.