Developing Astro website with AWS Serverless

Developing Astro website with AWS Serverless

Play this article

Introduction

Astro is the all-in-one web framework to build the website. It not only builds the static website but also builds the SSR website via the Adapter. But unfortunately, Astro officials just support Cloudflare, Deno, Netlify, Node.js and Vercel. So I spent a few weeks developing the AWS Adapter and CDK Construct. In this post, I will talk about how to develop the Astro website via these packages.

Get started

First, you need to install the AWS Adapter.

npx astro add @astrojs-aws/adapter

And then, you should enable SSR features and configure to use AWS Adapter.

// astro.config.mjs || astro.config.ts

import aws from "@astrojs-aws/adapter"
import { defineConfig } from "astro/config"

export default defineConfig({
  output: "server", // enable SSR
  adapter: aws(), // use AWS adapter
})

If you want to deploy the website to Lambda@Edge, you need to configure the following:

adapter: aws({
  isEdge: true
})

Deployment

After you build the Astro SSR website, you will get two directories: dist/server and dist/client. So, how could we deploy them to AWS? It depends on whether you want to deploy the website to the edge node. There are two architectures:

A recommended way is to use the AWS CDK to deploy the website. I also develop the CDK Construct for it to help to deploy the website.

import { LambdaAstroSite } from "@astrojs-aws/construct"

new LambdaAstroSite(this, "LambdaAstroSite", {
  serverEntry: "/path/to/dist/server/entry.mjs",
  staticDir: "/path/to/dist/client",
})

In the end

Hope this post can help you. Happy Coding!

Did you find this article valuable?

Support Bruce Huang by becoming a sponsor. Any amount is appreciated!