What will I learn from this astro-integrations tutorial?

Step-by-step guide to integrating AWS Amplify with your Astro website. This comprehensive guide covers all the essential concepts and practical steps you need to master astro-integrations.

Is this astro-integrations tutorial suitable for beginners?

This tutorial is designed to be accessible for learners at various skill levels. We provide clear explanations and step-by-step instructions to help you understand astro-integrations concepts effectively.

How long does it take to complete this astro-integrations tutorial?

This tutorial has an estimated reading time of 5 minutes. However, we recommend taking additional time to practice the concepts and techniques covered to fully master the material.

Where can I find more astro-integrations tutorials and resources?

You can find more astro-integrations tutorials in our astro-integrations category section. We also recommend exploring our related articles and following our blog for the latest updates on astro-integrations techniques and best practices.

/ astro-integrations / How to Use AWS Amplify with Astro: Complete Guide

astro-integrations • February 17, 2026 • 5 min read

How to Use AWS Amplify with Astro: Complete Guide

Step-by-step guide to integrating AWS Amplify with your Astro website.

AWS Amplify is Amazon's full-stack development platform for building and deploying web and mobile apps. For Astro developers, Amplify Hosting is the main draw. It gives you CI/CD from Git, automatic branch previews, custom domains with free SSL, and all of it backed by AWS infrastructure. If your organization already runs on AWS, Amplify keeps everything under one roof without introducing another vendor.

The setup is simpler than most AWS services. You connect a Git repo, Amplify detects the framework, builds your site, and deploys it to a global CDN. It handles both static Astro sites and SSR if you enable server-side rendering.

Prerequisites

Node.js 18+
An Astro project (npm create astro@latest)
An AWS account (free tier available, pay-as-you-go after that)
Your project in a GitHub, GitLab, or Bitbucket repository

Installation

For a static Astro site, no additional packages are needed. Amplify builds and deploys your dist/ output automatically.

For SSR support, install the Amplify adapter (if you are using server-side rendering):

npm install @astrojs/node

Amplify runs your SSR Astro site using Node.js, so the Node adapter works:

// astro.config.mjs
import { defineConfig } from "astro/config";
import node from "@astrojs/node";

export default defineConfig({
  output: "server", // or "hybrid" for mixed static/SSR
  adapter: node({
    mode: "standalone",
  }),
});

For purely static sites, your default Astro config works as-is.

Configuration

Create an amplify.yml build specification file in your project root:

# amplify.yml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*

For SSR deployments, the configuration changes slightly:

# amplify.yml (SSR)
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*
  customHeaders:
    - pattern: "**/*"
      headers:
        - key: X-Frame-Options
          value: DENY
        - key: X-Content-Type-Options
          value: nosniff

Now connect your repository in the AWS Amplify Console:

Go to AWS Amplify in the AWS Console
Click "New app" then "Host web app"
Connect your Git provider and select your repository
Amplify auto-detects Astro and suggests build settings
Review and deploy

You can also do this via the AWS CLI:

aws amplify create-app --name my-astro-site --repository https://github.com/user/repo --access-token YOUR_GITHUB_TOKEN

Basic Usage

Once deployed, Amplify gives you a URL like https://main.d1234abcde.amplifyapp.com. Set up a custom domain through the Amplify Console under Domain management.

Environment variables are set in the Amplify Console under App settings > Environment variables:

# In Amplify Console, add these environment variables
SITE_URL=https://yourdomain.com
API_KEY=your-api-key

Access them in your Astro code normally:

---
// src/pages/index.astro
const siteUrl = import.meta.env.SITE_URL;
---

<html>
  <head>
    <link rel="canonical" href={siteUrl} />
  </head>
  <body>
    <h1>Deployed on AWS Amplify</h1>
  </body>
</html>

For branch-based deployments, push to different branches and Amplify creates separate environments automatically:

# Production
git push origin main

# Preview/staging
git push origin develop

Each branch gets its own URL and can have different environment variables.

Production Tips

Use branch previews for pull requests. Enable "Previews" in Amplify settings to automatically deploy each pull request to a unique URL. This lets your team review changes before merging. Each preview gets its own environment and URL.
Set up custom headers and redirects. Use the customHeaders section in amplify.yml for security headers. For redirects and rewrites, create a public/_redirects file or configure them in amplify.yml under the customRules section.
Monitor build performance. Amplify shows build logs and timing for each deployment. If builds are slow, check that you are caching node_modules in amplify.yml and consider using npm ci instead of npm install for faster, reproducible installs.
Enable access control for staging. Amplify supports password-protecting branch deployments. Use this for staging environments so only your team can access preview deployments.
Set up notifications. Configure build notifications through Amazon SNS or connect to Slack. This way your team knows immediately when a deploy succeeds or fails without checking the console.

Alternatives to Consider

Vercel if you want a simpler deployment experience with zero configuration and better framework-specific optimizations for Astro.
Netlify if you prefer a similar CI/CD platform with more built-in features like forms, identity, and serverless functions without AWS complexity.
Cloudflare Pages if you want edge deployment with unlimited bandwidth on the free tier and faster build times.

Wrapping Up

AWS Amplify is a solid choice for deploying Astro sites, especially if your stack is already on AWS. The CI/CD pipeline is mature, branch previews are useful for team workflows, and the global CDN keeps your static assets fast worldwide. The setup takes a few more clicks than Vercel or Netlify, but the AWS integration and pay-as-you-go pricing make it worthwhile for teams that need to stay within the AWS ecosystem. For simple static Astro sites, the free tier covers most small to medium projects comfortably.