Skip to content
SST
Blog Docs Console Examples
22K

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.

  1. Serverless
  2. Containers

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.

Terminal window
npm create astro@latest aws-astro
cd aws-astro

We are picking all the default options.

Init SST

Now let’s initialize SST in our app.

Terminal window
npx sst@latest init
npm 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.

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

Terminal window
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.

sst.config.ts
const bucket = new sst.aws.Bucket("MyBucket", {
  access: "public"
});

Add this above the Astro component.

Now, link the bucket to our Astro site.

sst.config.ts
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:

src/pages/index.astro
<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.

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.

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.

Terminal window
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.

SST Astro app local

5. Deploy your app

Now let’s deploy your app to AWS.

Terminal window
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.

Terminal window
npm create astro@latest aws-astro-container
cd aws-astro-container

We are picking all the default options.

Init SST

Now let’s initialize SST in our app.

Terminal window
npx sst@latest init
npm 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.

Terminal window
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.

sst.config.ts
async run() {
  const vpc = new sst.aws.Vpc("MyVpc");
  const cluster = new sst.aws.Cluster("MyCluster", { vpc });


  cluster.addService("MyService", {
    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.

Terminal window
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.

sst.config.ts
const bucket = new sst.aws.Bucket("MyBucket", {
  access: "public"
});

Add this below the Vpc component.

Now, link the bucket to the container.

sst.config.ts
cluster.addService("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:

src/pages/index.astro
<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.

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.

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.

Terminal window
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.

SST Astro app local

6. Deploy your app

To deploy our app we’ll add a Dockerfile.

Dockerfile
FROM node:lts AS base
WORKDIR /app


COPY package.json package-lock.json ./


FROM base AS prod-deps
RUN npm install --omit=dev


FROM base AS build-deps
RUN npm install


FROM build-deps AS build
COPY . .
RUN npm run build


FROM base AS runtime
COPY --from=prod-deps /app/node_modules ./node_modules
COPY --from=build /app/dist ./dist


ENV HOST=0.0.0.0
ENV PORT=4321
EXPOSE 4321
CMD node ./dist/server/entry.mjs

Let’s also add a .dockerignore file in the root.

.dockerignore
.DS_Store
node_modules
dist

Now to build our Docker image and deploy we run:

Terminal window
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.

SST Console Autodeploy

You can create a free account and connect it to your AWS account.