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.

View code in StackBlitz

Configure

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

astro.config.mjs
import { defineConfig } from 'astro/config';
export default defineConfig({
output: 'static',
});

Build Settings

Use the following commands in the build step settings:

Install command
npm install
Build command
npm run astro check && npm run astro build
Output directory
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.

astro.config.mjs
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:

index.astro
---
import { CLIENT_API_URL, CLIENT_SECRET } from "astro:env/client";
const data = await fetch(`${CLIENT_API_URL}/api`, {
headers: {
Authorization: `Bearer ${CLIENT_SECRET}`
}
})
---