Deploy Astro on AWS

Deploy your static Astro SPA to AWS with S3 and CloudFront for fast, reliable performance. This guide walks you through configuration and setup to get your site live.

The server pre-rendered pages produced by the build step will be stored in an S3 bucket and served using CloudFront CDN.

Configure

Update your astro.config.mjs to generate static files:

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'static',   // Must be 'static' or 'hybrid'
});

Build Settings

Use the following commands in the build step settings:

That’s it! Your app will be live on your CloudFront URL as soon as the stack is installed.

Environment Variables

Define and use environment variables during the build step in a type-safe manner as a string, number, enum, or boolean using the envField helper.

Context: Since you’re building an SPA, set the context to client, as these variables will be used in the browser.

Access: Use public access for these variables. Never store secret keys or sensitive information in public variables, as they will be exposed in the browser and accessible to anyone.

Additional Properties: You can specify properties like optional or default in the object, but always ensure sensitive information is not included.

import { defineConfig, envField } from 'astro/config';

export default defineConfig({
  env: {
    schema: {
      CLIENT_API_URL: envField.string({
        context: "client",
        access: "public",
        default: "my-api-url"
      }),
      CLIENT_SECRET: envField.string({
        context: "client",
        access: "public",
        optional: false
      }),
    }
  }
});

To access these in your Astro components:

---
import { CLIENT_API_URL, CLIENT_SECRET } from "astro:env/client";

const data = await fetch(`${CLIENT_API_URL}/api`, {
  headers: {
    Authorization: `Bearer ${CLIENT_SECRET}`
  }
})
---