Astro on AWS with SST
Create and deploy an Astro site to AWS with SST.
There are two ways to deploy an Astro site to AWS with SST.
We’ll use both to build a couple of simple apps below.
Examples
We also have a few other Astro examples that you can refer to.
Serverless
We are going to create an Astro site, add an S3 Bucket for file uploads, and deploy it using the Astro
component.
Before you get started, make sure to configure your AWS credentials.
1. Create a project
Let’s start by creating our project.
npm create astro@latest aws-astrocd aws-astro
We are picking all the default options.
Init SST
Now let’s initialize SST in our app.
npx sst@latest initnpm install
Select the defaults and pick AWS. This’ll create a sst.config.ts
file in your project root.
It’ll also ask you to update your astro.config.mjs
with something like this.
import aws from "astro-sst";
export default defineConfig({ output: "server", adapter: aws()});
Start dev mode
Run the following to start dev mode. This’ll start SST and your Astro site.
npx sst dev
Once complete, click on MyWeb in the sidebar and open your Astro site in your browser.
2. Add an S3 Bucket
Let’s allow public access
to our S3 Bucket for file uploads. Update your sst.config.ts
.
const bucket = new sst.aws.Bucket("MyBucket", { access: "public"});
Add this above the Astro
component.
Link the bucket
Now, link the bucket to our Astro site.
new sst.aws.Astro("MyWeb", { link: [bucket],});
3. Create an upload form
Add the upload form client in src/pages/index.astro
. Replace the <Layout />
component with:
<Layout title="Astro x SST"> <main> <form action={url}> <input name="file" type="file" accept="image/png, image/jpeg" /> <button type="submit">Upload</button> </form> <script> const form = document.querySelector("form"); form!.addEventListener("submit", async (e) => { e.preventDefault();
const file = form!.file.files?.[0]!;
const image = await fetch(form!.action, { body: file, method: "PUT", headers: { "Content-Type": file.type, "Content-Disposition": `attachment; filename="${file.name}"`, }, });
window.location.href = image.url.split("?")[0] || "/"; }); </script> </main></Layout>
Add some styles, add this to your src/pages/index.astro
.
<style> main { margin: auto; padding: 1.5rem; max-width: 60ch; } form { color: white; padding: 2rem; display: flex; align-items: center; justify-content: space-between; background-color: #23262d; background-image: none; background-size: 400%; border-radius: 0.6rem; background-position: 100%; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } button { appearance: none; border: 0; font-weight: 500; border-radius: 5px; font-size: 0.875rem; padding: 0.5rem 0.75rem; background-color: white; color: #111827; } button:active:enabled { background-color: #EEE; }</style>
4. Generate a pre-signed URL
When our app loads, we’ll generate a pre-signed URL for the file upload and use it in the form. Add this to the header on your src/pages/index.astro
.
---import { Resource } from "sst";import { getSignedUrl } from "@aws-sdk/s3-request-presigner";import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
const command = new PutObjectCommand({ Key: crypto.randomUUID(), Bucket: Resource.MyBucket.name,});const url = await getSignedUrl(new S3Client({}), command);---
And install the npm packages.
npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner
Head over to the local Astro site in your browser, http://localhost:4321
and try uploading an image. You should see it upload and then download the image.
5. Deploy your app
Now let’s deploy your app to AWS.
npx sst deploy --stage production
You can use any stage name here but it’s good to create a new stage for production.
Containers
We are going to create a Astro site, add an S3 Bucket for file uploads, and deploy it in a container with the Cluster
component.
Before you get started, make sure to configure your AWS credentials.
1. Create a project
Let’s start by creating our project.
npm create astro@latest aws-astro-containercd aws-astro-container
We are picking all the default options.
Init SST
Now let’s initialize SST in our app.
npx sst@latest initnpm install
Select the defaults and pick AWS. This’ll create a sst.config.ts
file in your project root.
It’ll also ask you to update your astro.config.mjs
. But we’ll instead use the Node.js adapter since we’re deploying it through a container.
npx astro add node
2. Add a Service
To deploy our Astro site in a container, we’ll use AWS Fargate with Amazon ECS. Replace the run
function in your sst.config.ts
.
async run() { const vpc = new sst.aws.Vpc("MyVpc"); const cluster = new sst.aws.Cluster("MyCluster", { vpc });
new sst.aws.Service("MyService", { cluster, loadBalancer: { ports: [{ listen: "80/http", forward: "4321/http" }], }, dev: { command: "npm run dev", }, });}
This creates a VPC, and an ECS Cluster with a Fargate service in it.
The dev.command
tells SST to instead run our Astro site locally in dev mode.
Start dev mode
Run the following to start dev mode. This’ll start SST and your Astro site.
npx sst dev
Once complete, click on MyService in the sidebar and open your Astro site in your browser.
3. Add an S3 Bucket
Let’s allow public access
to our S3 Bucket for file uploads. Update your sst.config.ts
.
const bucket = new sst.aws.Bucket("MyBucket", { access: "public"});
Add this below the Vpc
component.
Link the bucket
Now, link the bucket to the container.
new sst.aws.Service("MyService", { // ... link: [bucket],});
This will allow us to reference the bucket in our Astro site.
4. Create an upload form
Add the upload form client in src/pages/index.astro
. Replace the <Layout />
component with:
<Layout title="Astro x SST"> <main> <form action={url}> <input name="file" type="file" accept="image/png, image/jpeg" /> <button type="submit">Upload</button> </form> <script> const form = document.querySelector("form"); form!.addEventListener("submit", async (e) => { e.preventDefault();
const file = form!.file.files?.[0]!;
const image = await fetch(form!.action, { body: file, method: "PUT", headers: { "Content-Type": file.type, "Content-Disposition": `attachment; filename="${file.name}"`, }, });
window.location.href = image.url.split("?")[0] || "/"; }); </script> </main></Layout>
Add some styles, add this to your src/pages/index.astro
.
<style> main { margin: auto; padding: 1.5rem; max-width: 60ch; } form { color: white; padding: 2rem; display: flex; align-items: center; justify-content: space-between; background-color: #23262d; background-image: none; background-size: 400%; border-radius: 0.6rem; background-position: 100%; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } button { appearance: none; border: 0; font-weight: 500; border-radius: 5px; font-size: 0.875rem; padding: 0.5rem 0.75rem; background-color: white; color: #111827; } button:active:enabled { background-color: #EEE; }</style>
5. Generate a pre-signed URL
When our app loads, we’ll generate a pre-signed URL for the file upload and use it in the form. Add this to the header on your src/pages/index.astro
.
---import { Resource } from "sst";import { getSignedUrl } from "@aws-sdk/s3-request-presigner";import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
const command = new PutObjectCommand({ Key: crypto.randomUUID(), Bucket: Resource.MyBucket.name,});const url = await getSignedUrl(new S3Client({}), command);---
And install the npm packages.
npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner
Head over to the local Astro site in your browser, http://localhost:4321
and try uploading an image. You should see it upload and then download the image.
6. Deploy your app
To deploy our app we’ll add a Dockerfile
.
FROM node:lts AS baseWORKDIR /app
COPY package.json package-lock.json ./
FROM base AS prod-depsRUN npm install --omit=dev
FROM base AS build-depsRUN npm install
FROM build-deps AS buildCOPY . .RUN npm run build
FROM base AS runtimeCOPY --from=prod-deps /app/node_modules ./node_modulesCOPY --from=build /app/dist ./dist
ENV HOST=0.0.0.0ENV PORT=4321EXPOSE 4321CMD node ./dist/server/entry.mjs
Let’s also add a .dockerignore
file in the root.
.DS_Storenode_modulesdist
Now to build our Docker image and deploy we run:
npx sst deploy --stage production
You can use any stage name here but it’s good to create a new stage for production.
Congrats! Your app should now be live!
Connect the console
As a next step, you can setup the SST Console to git push to deploy your app and view logs from it.
You can create a free account and connect it to your AWS account.