The Old Way: S3 + CloudFront (The Hard Way)

Remember when deploying a static website on AWS meant:

Step 1: Create S3 Bucket

aws s3 mb s3://my-website-bucket
aws s3 website s3://my-website-bucket --index-document index.html

Step 2: Configure Bucket Policy

Create a JSON policy file, set public read access, worry about security...

Step 3: Create CloudFront Distribution

Navigate through 20+ configuration options:

  • Origin settings
  • Cache behaviors
  • SSL certificate (request in ACM first!)
  • Custom error responses
  • Origin Access Identity
  • Price class selection
  • Wait 15-20 minutes for deployment...

Step 4: Configure DNS

Add CNAME records, wait for propagation...

Step 5: Upload Files

aws s3 sync . s3://my-website-bucket/

Step 6: Invalidate Cache (Every Time!)

aws cloudfront create-invalidation --distribution-id XXXXX --paths "/*"

Total Time: 2-4 hours for first deployment, 10-15 minutes for updates

Complexity: High - requires deep AWS knowledge

Maintenance: Manual cache invalidation, certificate renewal, policy updates

The New Way: AWS Amplify (The Easy Way)

AWS Amplify handles all of this automatically. Here's the entire process:

Step 1: Install Amplify CLI

npm install -g @aws-amplify/cli

Step 2: Initialize Your Project

amplify init

Answer a few questions (project name, environment, AWS profile). Done.

Step 3: Add Hosting

amplify add hosting

Select "Hosting with Amplify Console" and choose "Manual deployment"

Step 4: Deploy

amplify publish

That's it! Amplify automatically:

  • Creates S3 bucket (private, secure)
  • Sets up CloudFront distribution
  • Configures SSL certificate (free!)
  • Handles cache invalidation
  • Provides a custom domain (amplifyapp.com)
  • Sets up CI/CD if connected to Git
  • Enables atomic deployments
  • Provides instant rollback

Total Time: 5 minutes for first deployment, 2 minutes for updates

Complexity: Low - simple CLI commands

Maintenance: Automatic - Amplify handles everything

Side-by-Side Comparison

Feature S3 + CloudFront AWS Amplify
Setup Time 2-4 hours 5 minutes
SSL Certificate Manual (ACM) Automatic
Cache Invalidation Manual command Automatic
CI/CD Manual setup Built-in
Rollback Complex One-click
Preview Deployments Not available Automatic
Cost $5-20/month $0.15/GB (similar)

Complete Amplify Deployment Guide

Prerequisites

  • Node.js installed
  • AWS account
  • AWS CLI configured

Step-by-Step Tutorial

1. Install Amplify CLI

npm install -g @aws-amplify/cli
amplify configure

2. Navigate to Your Project

cd my-website

3. Initialize Amplify

amplify init

Answer the prompts:

  • Project name: my-website
  • Environment: prod
  • Default editor: (your choice)
  • App type: javascript
  • Framework: none
  • Source directory: .
  • Distribution directory: .
  • Build command: (leave empty)
  • Start command: (leave empty)

4. Add Hosting

amplify add hosting

Select:

  • Hosting with Amplify Console
  • Manual deployment

5. Publish Your Site

amplify publish

Amplify will:

  • Build your site (if needed)
  • Upload files to S3
  • Configure CloudFront
  • Set up SSL certificate
  • Provide you with a live URL

Your site is live!

Updating Your Site

Made changes? Just run:

amplify publish

Amplify handles everything - upload, cache invalidation, atomic deployment. No manual steps required.

Adding a Custom Domain

In the Amplify Console:

  1. Go to your app
  2. Click "Domain management"
  3. Add your domain
  4. Amplify automatically:
    • Requests SSL certificate
    • Provides DNS records
    • Configures CloudFront
    • Sets up redirects (www → non-www)

CI/CD with Git Integration

Want automatic deployments? Connect your Git repository:

amplify add hosting
# Select: Hosting with Amplify Console
# Select: Continuous deployment

Now every push to your main branch automatically deploys. Pull requests get preview URLs!

Advanced Features

Environment Variables

Set environment-specific variables in the Amplify Console. Perfect for API keys, feature flags, etc.

Password Protection

Protect staging environments with basic auth - just toggle it on in the console.

Redirects & Rewrites

Create an amplify.yml file:

version: 1
frontend:
  phases:
    build:
      commands:
        - echo "No build needed"
  artifacts:
    baseDirectory: /
    files:
      - '**/*'
  customHeaders:
    - pattern: '**/*'
      headers:
        - key: 'Strict-Transport-Security'
          value: 'max-age=31536000; includeSubDomains'

Performance Monitoring

Built-in metrics show:

  • Page load times
  • Traffic patterns
  • Error rates
  • Bandwidth usage

When to Use Each Approach

Use AWS Amplify When:

  • You want fast, simple deployment
  • You need CI/CD out of the box
  • You want preview deployments for PRs
  • You're building a modern web app
  • You want automatic cache invalidation
  • You need easy rollback capabilities

Use S3 + CloudFront When:

  • You need fine-grained control over every setting
  • You're integrating with complex existing infrastructure
  • You have specific compliance requirements
  • You want to use Infrastructure as Code (CloudFormation/Terraform)
  • You need custom Lambda@Edge functions

Cost Comparison

S3 + CloudFront:

  • S3 storage: $0.023/GB
  • CloudFront: $0.085/GB (first 10TB)
  • Requests: $0.0075 per 10,000
  • Typical cost: $5-20/month

AWS Amplify:

  • Storage: Included
  • Data transfer: $0.15/GB
  • Build minutes: $0.01/minute (if using CI/CD)
  • Typical cost: $5-25/month

Costs are similar, but Amplify includes CI/CD, preview deployments, and automatic cache management!

Real-World Example

Let's deploy a React app:

Traditional Way (45 minutes):

  1. Build: npm run build
  2. Create S3 bucket with website hosting
  3. Configure bucket policy
  4. Upload build folder
  5. Create CloudFront distribution
  6. Wait 15 minutes for CloudFront
  7. Configure custom domain
  8. Test and debug

Amplify Way (5 minutes):

  1. amplify init
  2. amplify add hosting
  3. amplify publish
  4. Done!

Troubleshooting Common Issues

Issue: "amplify: command not found"

Solution: Install globally: npm install -g @aws-amplify/cli

Issue: Build fails

Solution: Check your build command in amplify.yml

Issue: 404 errors on routes

Solution: Add redirects in Amplify Console for SPA routing

Migration from S3+CloudFront to Amplify

Already have a site on S3+CloudFront? Here's how to migrate:

  1. Initialize Amplify in your project: amplify init
  2. Add hosting: amplify add hosting
  3. Publish: amplify publish
  4. Update DNS to point to new Amplify URL
  5. Test thoroughly
  6. Delete old S3 bucket and CloudFront distribution

Migration time: 15-30 minutes

Conclusion

AWS Amplify has dramatically simplified static website deployment. What used to require deep AWS knowledge and hours of configuration now takes just minutes with simple CLI commands.

For most use cases, Amplify is the clear winner:

  • 10x faster deployment
  • Simpler workflow
  • Built-in CI/CD
  • Preview deployments
  • Easy rollbacks
  • Similar cost

Unless you have specific requirements that demand fine-grained control, we recommend AWS Amplify for all new static website deployments.

Next Steps

  • Try deploying a simple HTML site with Amplify
  • Explore the Amplify Console features
  • Connect your Git repository for CI/CD
  • Add a custom domain
  • Set up preview deployments for PRs

Need help migrating your infrastructure to modern deployment practices? We can help!