Skip to content

deployment-aws-amplify.md

Latest commit

 

History

History
556 lines (406 loc) · 12.3 KB

deployment-aws-amplify.md

File metadata and controls

556 lines (406 loc) · 12.3 KB

Deploying to AWS Amplify

AWS Amplify is Amazon's solution for hosting static sites and full-stack applications. It offers excellent performance with CloudFront CDN, generous free tier, and seamless AWS integration.

Prerequisites

  • An AWS account (free tier available) - Sign up at aws.amazon.com
  • Your code in a Git repository (GitHub, GitLab, Bitbucket, or AWS CodeCommit)
  • Credit card required for AWS account (but deployment can be free)

Cost

FREE tier includes (12 months):

  • 1,000 build minutes/month
  • 15GB data transfer out/month
  • 5GB stored data

After free tier:

  • Build minutes: $0.01/minute
  • Hosting: $0.15/GB stored per month
  • Data transfer: $0.15/GB served

For most landing pages: Expect $0-5/month after free tier expires.

Method 1: Deploy from Git Repository (Recommended)

Automatic deployments with CI/CD pipeline.

Step 1: Access AWS Amplify Console

  1. Log in to AWS Console
  2. Search for "Amplify" in the services search bar
  3. Click "AWS Amplify"
  4. Click "Get Started" under "Amplify Hosting"

Step 2: Connect Your Repository

  1. Select your Git provider:

    • GitHub
    • Bitbucket
    • GitLab
    • AWS CodeCommit

  2. Click "Continue"

  3. Authorize AWS Amplify to access your repositories

  4. Select your repository from the dropdown

  5. Select the branch to deploy (usually main or master)

  6. Click "Next"

Step 3: Configure Build Settings

Amplify will try to auto-detect your build settings. Verify or update:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

App name: Choose a name for your app (e.g., "my-landing-page")

Environment variables (if needed): Add any build-time environment variables

Click "Next"

Step 4: Review and Deploy

  1. Review all settings

  2. Click "Save and deploy"

  3. Amplify will:

    • Clone your repository
    • Install dependencies
    • Run build command
    • Deploy to CloudFront CDN

  4. First deployment takes 3-5 minutes

You'll get a URL like: https://main.d1a2b3c4d5e6f7.amplifyapp.com

Step 5: Automatic Deployments

Every push to your connected branch automatically triggers a new deployment!

Method 2: Manual Deployment (Drag & Drop)

Deploy without Git repository.

Step 1: Build Locally

npm run build

Step 2: Deploy to Amplify

  1. In AWS Amplify Console, scroll down to "Manual Deploy"
  2. Click "Get Started"
  3. App name: Enter a name
  4. Environment name: production
  5. Drag and drop your dist folder
  6. Click "Save and deploy"

Your site is live in 1-2 minutes!

Note: Manual deployments don't support automatic updates. You'll need to upload the dist folder each time.

Method 3: AWS Amplify CLI

For advanced users and automation.

Step 1: Install Amplify CLI

npm install -g @aws-amplify/cli

Step 2: Configure Amplify

amplify configure

Follow the prompts:

  1. Sign in to AWS Console
  2. Create an IAM user
  3. Enter access key and secret key
  4. Choose a region (e.g., us-east-1)

Step 3: Initialize Amplify in Your Project

amplify init

Answer the prompts:

  • App name: (enter your app name)
  • Environment: production
  • Default editor: (choose your editor)
  • App type: javascript
  • Framework: none
  • Source directory: src
  • Distribution directory: dist
  • Build command: npm run build
  • Start command: npm start

Step 4: Add Hosting

amplify add hosting

Choose:

  • "Hosting with Amplify Console" (recommended)
  • "Manual deployment"

Step 5: Publish

amplify publish

Your site is deployed!

Adding a Custom Domain

Step 1: Add Domain in Amplify Console

  1. In your Amplify app, click "Domain management"
  2. Click "Add domain"
  3. Enter your domain name (e.g., yourdomain.com)
  4. Click "Configure domain"

Step 2: Configure Subdomains

Amplify will show options:

  • yourdomain.com (root/apex domain)
  • www.yourdomain.com (www subdomain)

Select which you want to use and click "Save"

Step 3: Configure DNS

Option A: Use Amazon Route 53 (Easiest if you use AWS)

  1. If your domain is in Route 53, click "Update DNS records"
  2. Amplify automatically updates your Route 53 hosted zone
  3. Click "Save"

Option B: External DNS Provider

Amplify will show DNS records to add at your domain registrar:

For apex domain (yourdomain.com):

Type: ANAME or ALIAS
Name: @
Value: (provided by Amplify)

For www subdomain:

Type: CNAME
Name: www
Value: (provided by Amplify)

For DNS providers without ANAME/ALIAS support:

Type: A
Name: @
Value: (IP addresses provided by Amplify)

Step 4: Verify SSL Certificate

  1. Amplify automatically requests SSL certificate from AWS Certificate Manager
  2. For certificate validation, add the CNAME records shown
  3. Wait for validation (can take 10 minutes to 48 hours)
  4. Once validated, your custom domain is live with HTTPS!

Branch Deployments

Deploy multiple branches to different URLs:

Step 1: Connect a New Branch

  1. Go to your Amplify app
  2. Click "Branch deployments"
  3. Click "Connect branch"
  4. Select branch from dropdown (e.g., develop, staging)
  5. Click "Save and deploy"

Step 2: Access Branch Deployments

Each branch gets its own URL:

  • main: https://main.d1a2b3c4d5e6f7.amplifyapp.com
  • develop: https://develop.d1a2b3c4d5e6f7.amplifyapp.com

Perfect for testing before production!

Environment Variables

Add build-time environment variables:

  1. Go to "Build settings" → "Environment variables"
  2. Click "Add variable"
  3. Enter key and value
  4. Choose which branches use this variable
  5. Click "Save"

Variables are available during build as process.env.VARIABLE_NAME

Build Settings

Customize your build configuration:

  1. Go to "Build settings"
  2. Click "Edit"
  3. Modify the amplify.yml file:
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Advanced options:

  • Node version: Specify in build commands 
    preBuild:
  commands:
    - nvm use 22
    - npm ci

Access Control

Protect your site with password or restrict access:

Password Protection

  1. Go to "Access control"
  2. Click "Manage access"
  3. Select "Password protection"
  4. Enter username and password
  5. Choose which branches to protect
  6. Click "Save"

Great for staging environments!

IP Address Restrictions

  1. Go to "Access control"
  2. Enable "IP address restriction"
  3. Enter allowed IP addresses/ranges
  4. Click "Save"

Performance Optimizations

Amplify automatically provides:

  • CloudFront CDN: Global edge locations
  • HTTP/2: Faster multiplexed connections
  • Gzip/Brotli compression: Smaller file sizes
  • Automatic caching: Optimized cache headers
  • Asset optimization: Minification and compression

Custom Headers

Add custom headers:

  1. Go to "Rewrites and redirects"
  2. Add custom headers:
[
  {
    "source": "/<*>",
    "status": "200",
    "headers": [
      {
        "key": "Cache-Control",
        "value": "public, max-age=31536000, immutable"
      }
    ]
  }
]

Redirects and Rewrites

Handle SPA routing and redirects:

  1. Go to "Rewrites and redirects"
  2. Add rules:
Source: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>
Target: /index.html
Type: 200 (Rewrite)

This ensures all routes serve your index.html for SPA routing.

Monitoring and Logs

Build Logs

  1. Click on any deployment in the "Deployments" tab
  2. View detailed build logs
  3. Debug build failures

Access Logs

  1. Go to "Monitoring"
  2. View metrics:
    • Requests
    • Data transfer
    • Errors
  3. CloudWatch integration for advanced monitoring

Notifications

Get notified of deployment status:

  1. Go to "Notifications"
  2. Connect SNS topic or email
  3. Receive alerts for:
    • Build success
    • Build failures
    • Custom events

Pull Request Previews

Automatically deploy preview for every pull request:

  1. Go to "Build settings" → "Pull request previews"
  2. Enable previews
  3. Choose if you need password protection
  4. Click "Save"

Now every PR gets a unique preview URL!

Monorepo Support

If your landing page is in a monorepo:

  1. Go to "Build settings"
  2. Set "Build root directory" to your app's path
  3. Update amplify.yml:
version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - cd landing-page
            - npm ci
        build:
          commands:
            - npm run build
      artifacts:
        baseDirectory: landing-page/dist
        files:
          - '**/*'

Rollback Deployments

Rollback to a previous version:

  1. Go to "Deployments" tab
  2. Find the previous working deployment
  3. Click "Redeploy this version"
  4. Confirm rollback

Previous version is live in minutes!

Cost Optimization

Tips to Stay in Free Tier

  1. Optimize images: Reduce build artifact size
  2. Cache dependencies: Speeds up builds and saves minutes
  3. Limit branches: Only deploy essential branches
  4. Use manual deployment: For low-traffic test sites

Monitoring Costs

  1. Go to AWS Billing Dashboard
  2. Check "Free Tier" usage
  3. Set up billing alerts

Troubleshooting

Build Fails

  1. Check build logs in deployment details
  2. Test build locally: npm run build
  3. Verify Node version matches your development environment: 
    preBuild:
  commands:
    - nvm use 22
    - npm ci
  4. Check environment variables

404 Errors on Routes

Add rewrite rule:

  1. Go to "Rewrites and redirects"
  2. Add:
    • Source: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>
    • Target: /index.html
    • Type: 200 (Rewrite)

Custom Domain Not Working

  • Verify DNS records at your registrar
  • Wait 24-48 hours for DNS propagation
  • Check certificate validation CNAME records
  • Use dig yourdomain.com to verify DNS

Slow Builds

  • Enable caching in amplify.yml
  • Remove unnecessary dependencies
  • Use npm ci instead of npm install

CLI Commands Cheat Sheet

# Initialize new project
amplify init

# Add hosting
amplify add hosting

# Publish changes
amplify publish

# Check status
amplify status

# View console
amplify console

# Delete app
amplify delete

Comparison: When to Choose AWS Amplify

Choose AWS Amplify if you:

  • Already use AWS services
  • Need powerful build customization
  • Want enterprise-grade CDN (CloudFront)
  • Need access control and IP restrictions
  • Plan to add backend features later

Choose alternatives if:

  • You want simpler setup (Vercel, Netlify)
  • You want unlimited free bandwidth (GitHub Pages)
  • You want to avoid AWS complexity

Next Steps

  • Set up custom domain for professional branding
  • Enable PR previews for team collaboration
  • Set up password protection for staging branches
  • Configure monitoring and alerts
  • Integrate with other AWS services (if needed)

Cost Summary

Free tier (first 12 months):

  • Build minutes: 1,000 minutes/month
  • Hosting: 15GB served + 5GB stored
  • Cost: $0/month (for typical landing page)

After free tier (typical landing page):

  • Builds: ~100 minutes/month = $1/month
  • Hosting: 5GB served = $0.75/month
  • Total: ~$2-5/month

Deployment Time: 3-5 minutes per deployment Difficulty: Medium 🟡 (AWS setup required) Performance: Excellent (CloudFront CDN) ⭐⭐⭐⭐⭐