How to Deploy a Website with AWS Amplify (Step-by-Step Tutorial)

Introduction

AWS Amplify Hosting is Amazon’s hosting solution for modern web apps. It’s perfect for React, Vue, Angular, Next.js, and static sites.

In this guide, we’ll deploy a template on AWS Amplify step by step.

Why Use AWS Amplify?

• Free tier includes 5GB hosting + 1,000 build minutes
• Optimized for frontend frameworks
• Free HTTPS and custom domain support
• Built-in CI/CD with GitHub/GitLab/Bitbucket

Step 1: Sign in to AWS

1. Go to AWS Amplify Console.
2. Log in with your AWS account.

Step 2: Connect Your Repository

1. Click New app → Host web app
2. Choose your Git provider (GitHub, GitLab, Bitbucket).
3. Select the repository containing your template.

Step 3: Configure Build Settings

Amplify auto-detects your framework, but check the build:

• React (CRA)
  • Build Command: npm run build
  • Output Directory: build
• Next.js
  • Build Command: npm run build
  • Output Directory: .next
• Static HTML
  • No build needed — just ensure index.html exists.

Click Save and Deploy.

Step 4: Visit Your Website

After the build finishes, Amplify gives you a live URL like:

https://main.randomstring.amplifyapp.com

Step 5: Add a Custom Domain

1. In Amplify Console, go to Domain Management.
2. Connect your domain (AWS Route 53 or external provider).
3. Amplify sets up SSL automatically.

Troubleshooting

• Build failed? Run the same build locally to confirm.
• App not loading routes? For SPAs, enable redirects:
  • Add a rule to redirect /* → /index.html.
• Costs? The free tier is good, but watch usage if your site grows.

Conclusion

AWS Amplify is powerful and beginner-friendly for frontend projects. With free SSL, CI/CD, and easy Git integration, it’s a strong choice for modern apps.

Coming up in Hosting Academy, we’ll explore Google Cloud Hosting.