Amplify Hosting

AWS Amplify Hosting deploys frontends straight from Git with builds, previews, and HTTPS built in.

If wiring S3, CloudFront, ACM, and Route 53 by hand feels like a lot, AWS Amplify Hosting does it all for you. Connect a Git repository and Amplify builds, deploys, and serves your frontend on every push.

What you get for free

  • Automatic builds on every commit.
  • A global CDN and HTTPS out of the box.
  • Pull-request preview environments with their own URLs.
  • Simple custom-domain setup.

Amplify reads a small amplify.yml that describes how to build your app. It is the fastest path from a Git repo to a live, HTTPS frontend.

Example

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

When to use it

  • A React developer connects their GitHub repository to Amplify Hosting so every push to main deploys automatically with no YAML to write.
  • A team uses Amplify branch-based deployments to get a live preview URL for every pull request so reviewers can test UI changes immediately.
  • A startup uses Amplify to host their Next.js app with server-side rendering without managing any EC2 instances or containers.

More examples

Create an Amplify app from GitHub

Creates an Amplify Hosting app linked to a GitHub repository, enabling automatic deploys on push.

Example · bash
aws amplify create-app \
  --name my-frontend \
  --repository https://github.com/myorg/my-frontend \
  --platform WEB \
  --oauth-token $GITHUB_TOKEN

Connect a branch for auto-deploy

Connects the main branch to Amplify so every commit triggers a build and deploys to the branch's URL.

Example · bash
aws amplify create-branch \
  --app-id d1example \
  --branch-name main \
  --enable-auto-build \
  --framework 'React'

Amplify build settings file

Defines the Amplify build spec — install, build, and publish the dist folder with node_modules cached between builds.

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

Discussion

  • Be the first to comment on this lesson.