Skip to content

Added Amplify SSR deployment instructions #11551

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/DeployGuidesNav.astro
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const services: Service[] = [
{ title: 'GitHub Pages', slug: 'github', supports: ['static'] },
{ title: 'GitLab Pages', slug: 'gitlab', supports: ['static'] },
{ title: 'Cloudflare Pages', slug: 'cloudflare', supports: ['ssr', 'static'] },
{ title: 'AWS', slug: 'aws', supports: ['static'] },
{ title: 'AWS', slug: 'aws', supports: ['ssr', 'static'] },
{ title: 'AWS via Flightcontrol', slug: 'flightcontrol', supports: ['ssr', 'static'] },
{ title: 'AWS via SST', slug: 'sst', supports: ['ssr', 'static'] },
{ title: 'Clever Cloud', slug: 'clever-cloud', supports: ['ssr', 'static'] },
Expand Down
129 changes: 128 additions & 1 deletion src/content/docs/en/guides/deploy/aws.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ sidebar:
type: deploy
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro';
import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Expand All @@ -15,7 +16,11 @@ Deploying your project to AWS requires using the [AWS console](https://aws.amazo

## 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.
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.

<Steps>
1. Create a new Amplify Hosting project.
Expand Down Expand Up @@ -92,6 +97,127 @@ AWS Amplify is a set of purpose-built tools and features that lets frontend web

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](https://github.com/alexnguyennz/astro-aws-amplify) and make some changes to your config.

First, install the Amplify adapter.

<PackageManagerTabs>
<Fragment slot="pnpm">
```
pnpm install astro-aws-amplify
```
</Fragment>
<Fragment slot="npm">
```
npm install astro-aws-amplify
```
</Fragment>
<Fragment slot="yarn">
```
yarn add astro-aws-amplify
```
</Fragment>
</PackageManagerTabs>

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

```js title="astro.config.mjs" ins={2, 6, 7}
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.

<Steps>
1. Create a new Amplify Hosting project.

2. Connect your repository to Amplify.

3. Modify your build settings to match the adapter's build process.

<PackageManagerTabs>
<Fragment slot="pnpm">
```yaml
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the title of this file? And where is this file located?

e.g. The GitHub Action for the GitHub pages deploy guide describes where to create this file like this:

image

It might be helpful to have similar guidance here.

You can add a title with the following Expressive Code syntax by providing a title:

```yaml title="whatever.yml"

Copy link
Author

@Zev18 Zev18 Apr 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, this is the build settings yaml that lives in the amplify console. It's not part of the astro project, though it can be overwritten with an amplify.yaml in the root dir iirc. I followed the existing Amplify docs' decision and didn't include a file name. Should I still title the file?

version: 1
frontend:
phases:
preBuild:
commands:
- npm i -g pnpm
- pnpm config set store-dir .pnpm-store
- pnpm i
build:
commands:
- pnpm run build
- mv node_modules ./.amplify-hosting/compute/default
artifacts:
baseDirectory: .amplify-hosting
files:
- '**/*'
cache:
paths:
- .pnpm-store/**/*
```
</Fragment>
<Fragment slot="npm">
```yaml
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci --cache .npm --prefer-offline
build:
commands:
- npm run build
- mv node_modules ./.amplify-hosting/compute/default
artifacts:
baseDirectory: .amplify-hosting
files:
- '**/*'
cache:
paths:
- .npm/**/*
```
</Fragment>
<Fragment slot="yarn">
```yaml
version: 1
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn build
- mv node_modules ./.amplify-hosting/compute/default
artifacts:
baseDirectory: .amplify-hosting
files:
- '**/*'
cache:
paths:
- node_modules/**/*
```
</Fragment>
</PackageManagerTabs>
</Steps>

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

<ReadMore>
See [AWS's Astro deployment guide](https://docs.aws.amazon.com/amplify/latest/userguide/get-started-astro.html) for more info.
</ReadMore>

## 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](https://aws.amazon.com/s3/).
Expand Down Expand Up @@ -231,3 +357,4 @@ There are many ways to set up continuous deployment for AWS. One possibility for
- [Deploy Astro to AWS Amplify](https://www.launchfa.st/blog/deploy-astro-aws-amplify)
- [Deploy Astro to AWS Elastic Beanstalk](https://www.launchfa.st/blog/deploy-astro-aws-elastic-beanstalk)
- [Deploy Astro to Amazon ECS on AWS Fargate](https://www.launchfa.st/blog/deploy-astro-aws-fargate)
- [Troubleshooting SSR Amplify Deployments](https://docs.aws.amazon.com/amplify/latest/userguide/troubleshooting-ssr-deployment.html)