Deploy Astro to AWS Amplify (SSR)
v4.x or higher (may also work on v3.x sites)
sh
Using NPM
npm install astro-aws-amplify
Using Yarn
yarn add astro-aws-amplify
Using PNPM
pnpm add astro-aws-amplify
`
In your Astro config, add the adapter:
`diff
// astro.config.mjs
import { defineConfig } from 'astro/config';
+ import awsAmplify from 'astro-aws-amplify';
export default defineConfig({
+ output: 'server', // output: 'hybrid'
+ adapter: awsAmplify()
})
`
Configuration
$3
Server and hybrid modes are supported. For static sites, remove the adapter and follow these instructions.
$3
AWS Amplify Hosting uses Node.js v16 by default which isn't supported.
You can use the newer Amazon Linux:2023 by adding an environment variable of:
`markdown
_CUSTOM_IMAGE=amplify:al2023
`
#### Build specifications
You can use the following build specifications as-is or customize it to your liking. Moving the node_modules folder is required for npm and Yarn deployments.
##### npm
`yaml
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
- mv node_modules ./.amplify-hosting/compute/default
artifacts:
baseDirectory: .amplify-hosting
files:
- '*/'
cache:
paths:
- node_modules/*/
`
##### pnpm
`yaml
version: 1
frontend:
phases:
preBuild:
commands:
- npm i -g pnpm
- pnpm config set store-dir .pnpm-store
- pnpm i
build:
commands:
- pnpm run build
artifacts:
baseDirectory: .amplify-hosting
files:
- '*/'
cache:
paths:
- .pnpm-store/*/
`
##### Yarn
`yaml
version: 1
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn run build
- mv node_modules ./.amplify-hosting/compute/default
artifacts:
baseDirectory: .amplify-hosting
files:
- '*/'
cache:
paths:
- node_modules/*/
`
Features
$3
- server and hybrid mode
- image optimization with and
- base paths
- middleware
$3
- Amplify Image optimization
- build previews (npm run preview)
- ???
Limitations
$3
Static or prerendered pages (that are defined with export const prerender = true or default for hybrid) will need a rewrite rule.
For example, if you have a static /about page, create a rewrite of:
`
/about/ /about/index.html 200 (Rewrite)
`
If you don't use trailing slashes, you will need to also add:
`
/about /about/index.html 200 (Rewrite)
`
For static dynamic routes, like a route of /blog/[slug].astro, create a rewrite of:
`
/blog// /blog//index.html 200 (Rewrite)
`
#### Base path rewrites
`
/base/about/ /base/about/index.html 200 (Rewrite)
`
$3
Custom 404 pages (like 404.astro) need to be server-side rendered (not prerendered) to work. This is a limitation with Amplify.
$3
Due to limitations with Amplify routing, to serve public files without extensions, place them in a folder called assets (/public/assets/) and reference them with /assets/filename:
`sh title="/public/assets/"
somefile
``