Deploy your Astro Site to AWS

How to deploy your Astro site to the web using AWS.

AWS is a full-featured web app hosting platform that can be used to deploy an Astro site.

Deploying your project to AWS requires using the AWS console. (Most of these actions can also be done using the AWS CLI). This guide will walk you through the steps to deploy your site to AWS using AWS Amplify, S3 static website hosting, and CloudFront.

AWS Amplify

AWS Amplify is a set of purpose-built tools and features that lets frontend web and mobile developers quickly and easily build full-stack applications on AWS. You can either deploy your Astro project as a static site, or as a server-rendered site.

Static Site

Your Astro project is a static site by default.

Amplify will automatically deploy your website and update it when you push a commit to your repository.

Adapter for on-demand rendering

In order to deploy your project as a server-rendered site, you will need to use the third-party, community-maintained AWS Amplify adapter and make some changes to your config.

First, install the Amplify adapter.

Then, in your astro.config.* file, add the adapter and set the output to server.

import { defineConfig } from 'astro/config';
import awsAmplify from 'astro-aws-amplify';

export default defineConfig({
  // ...
  output: "server",
  adapter: awsAmplify(),
});

Once the adapter has been installed, you can set up your Amplify project.

Amplify will automatically deploy your website and update it when you push a commit to your repository.

S3 static website hosting

S3 is the starting point of any application. It is where your project files and other assets are stored. S3 charges for file storage and number of requests. You can find more information about S3 in the AWS documentation.

S3 with CloudFront

CloudFront is a web service that provides content delivery network (CDN) capabilities. It is used to cache content of a web server and distribute it to end users. CloudFront charges for the amount of data transferred. Adding CloudFront to your S3 bucket is more cost-effective and provides a faster delivery.

To connect S3 with CloudFront, create a CloudFront distribution with the following values:

Origin domain: Your S3 bucket static website endpoint. You can find your endpoint in your S3 bucket’s Properties > Static website hosting. Alternative, you can select your s3 bucket and click on the callout to replace your bucket address with your bucket static endpoint.
Viewer protocol policy: “Redirect to HTTPS”

This configuration will serve your site using the CloudFront CDN network. You can find your CloudFront distribution URL in the bucket’s Distributions > Domain name.

Continuous deployment with GitHub Actions

There are many ways to set up continuous deployment for AWS. One possibility for code hosted on GitHub is to use GitHub Actions to deploy your website every time you push a commit.