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 with Thunder.

Configure

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

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'static',
});

Build Settings

Use the following commands in the build step settings:

npm install

npm run astro check && npm run astro build

dist

npx pnpm install

npx pnpm run astro check && npx pnpm run astro build

dist

npx bun install

npx bun run astro check && npx bun run astro build

dist

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}`
  }
})
---