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