Astro on 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.

• Enabling streaming in your Astro app
• Hit counter with Redis and Astro in a container

---

Serverless

We are going to create an Astro site, add an S3 Bucket for file uploads, and deploy it using the Astro component.

View source

You can view the source of this example in our repo.

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
cd aws-astro

We are picking all the default options.

---

Init SST

Now let’s initialize SST in our app.

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.

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.

Link the bucket

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>

  Upload