Thi Notes
AboutNotesBlogTopicsToolsReading
About|Sketches |Cooking |Cafe icon Support Thi
🚀

Deploy Next.js on AWS Amplify instead of Vercel

Deploy Next.js on AWS Amplify instead of Vercel

Anh-Thi Dinh
new
AWS
Web Dev
Next.js
One day, Vercel emailed me saying my website was using too many resources (500% over limit). They paused my account—yes, my entire account—and all my projects stopped working. That's when I decided to switch to AWS Amplify.
Here are step-by-step notes for migrating deployment from Vercel to AWS Amplify.
  1. Get the environment variables from Vercel
    1. 1npm install -g vercel
      2vercel login
      3vercel env pull --environment=production .env.production.local
      4vercel env pull --environment=preview .env.preview.local
  1. Create amplify.yml (see an example from my dinhanhthi.com site)
      • Note: When setting environment variables on AWS, they can be used during the build phase or at runtime. Many variables are needed at runtime—for example, those required for search functionality. That's why amplify.yml includes many env | statements to expose them at runtime. Without these, runtime features that need environment variables won't work.
  1. You don't need to add GitHub Actions for AWS deployment. When you connect AWS to GitHub in the AWS Console, it automatically links and detects changes to deploy. However, if you have existing GitHub Actions workflows, you can modify them to detect AWS deployment status—for example, see warm-cache-after-deploy.yml.
  1. Set up AWS Amplify (I won't cover creating an AWS account)
    1. When you connect your Amplify app to GitHub, you can add all the variables you downloaded earlier before clicking Save and Deploy. You can add them later, but the first build may fail without these variables.
    2. You must input the variables one by one—there's no bulk upload option.
    3. After deployment, your URL will look something like https://aws.xxx.amplifyapp.com.
    4. If there are failures, go to Amplify → your app → Deployments and download the logs.
  1. Set up a custom domain with AWS and Cloudflare
    1. First, remove all Vercel-related records on Cloudflare:
      1. A record pointing to 76.76.21.21
      2. CNAME record pointing to cname.vercel-dns.com
      3. TXT records pointing to Vercel
      4. Search for "vercel" and remove all results.
      5. Don't forget to remove the custom domain on the Vercel site as well.
    2. Go to Amplify → your app → Hosting → Custom domains.
    3. When adding a new custom domain, choose "Manual configuration".
    4. Copy the DNS records provided by AWS and add them to Cloudflare.
        • ⚠️ Important: Don't enable Proxied. Use "DNS only" for all records, otherwise SSL won't work!
        • ⚠️ Also important: On Cloudflare, go to SSL/TLS (left sidebar) → Overview → "SSL/TLS encryption" → Configure → Custom SSL/TLS → Full (Strict) (yes, with "(Strict)") → Save.
        • You may need to wait anywhere from a few minutes to several hours for AWS verification to complete.
        • Tip: You can always go to Hosting → Custom domains → Actions → View DNS records to see the records again.
        • To add a subdomain like sub.dinhanhthi.com, click Domain Configuration (next to Actions) and add the subdomain there. Then open View DNS to see that you need to create another CNAME for dev that points to the same destination as @ and www. on Cloudflare.
        • To test if the DNS record works, run this command in Terminal:
          • 1nslookup -q=cname _6f754xxx4d011e0dc.dinhanhthi.com
  1. Monitor costs: Search for "Billing and Cost Management," then select "Budgets" in the left sidebar. Add a budget there.
  1. To view logs in real time (like on Vercel), search for "CloudWatch" → Logs → Log Management.
    1. You can also use AWS CLi to see it locally, real time
      1brew install awscli
      2aws --version
      3aws login
      4
      5aws logs tail /aws/amplify/<your-app-id> --follow
  1. Bonus: you may need to uninstall the integration of Vercel on Github repository, otherwise, it continue to show its badges and workflow their. Go to repository settings → Github Apps → Configure next to Vercel app → uninstall.
  1. If you want to prevent AWS Amplify from auto-deploying on every push, go to your app → Build settings → Disable auto build. This is useful if you want to trigger deployments manually or through custom workflows.