将你的 Astro 网站部署到 AWS

AWS 是一个功能齐全的 Web 应用托管平台，可以用来部署 Astro 网站。

将你的项目部署到 AWS 需要使用 AWS 控制台（大部分操作也可以使用 AWS CLI 进行）。本指南将指导你通过使用 AWS Amplify、S3 静态网站托管 和 CloudFront 来将网站部署到 AWS 上。

AWS Amplify

AWS Amplify 是一套专为前端 Web 和移动开发人员设计的工具和功能，可以让你在 AWS 上快速轻松地构建全栈应用程序。你可以将 Astro 项目作为静态站点来部署，亦或是作为服务端渲染站点来部署。

静态站点

在默认情况下，Astro 项目会作为静态站点来部署。

1. 创建一个新的 Amplify Hosting 项目。

2. 将你的仓库连接到 Amplify。

3. 修改你的构建设置以匹配你的项目构建过程。

   npm

   version: 1
   frontend:
     phases:
       preBuild:
         commands:
           - npm ci
       build:
         commands:
           - npm run build
     artifacts:
       baseDirectory: /dist
       files:
         - '**/*'
     cache:
       paths:
         - node_modules/**/*

   pnpm

   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: /dist
       files:
         - '**/*'
     cache:
       paths:
         - .pnpm-store/**/*

   Yarn

   version: 1
   frontend:
     phases:
       preBuild:
         commands:
           - yarn install
       build:
         commands:
           - yarn build
     artifacts:
       baseDirectory: /dist
       files:
         - '**/*'
     cache:
       paths:
         - node_modules/**/*

之后 Amplify 将自动部署你的网站，并在你向仓库推送提交时进行更新。

按需渲染适配器

为了将项目作为服务端站点来进行渲染，你需要使用第三方的、由社区维护的 AWS Amplify 适配器，并在配置文件中进行一些小改动。

首先，安装 Amplify 适配器。

npm

npm install astro-aws-amplify

pnpm

pnpm add astro-aws-amplify

Yarn

yarn add astro-aws-amplify

然后，在 astro.config.* 文件中，添加适配器并将 output 设置为 server。

astro.config.mjs

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

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

当适配器安装完成后，你就可以创建 Amplify 项目了。

1. 创建一个新的 Amplify Hosting 项目。

2. 将你的仓库链接至 Amplify。

3. 修改构建设置以匹配适配器的构建过程，你可以通过在 AWS 控制台中编辑构建设置，或者通过在项目的根部中添加 amplify.yaml 来实现。

   npm

   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/**/*

   pnpm

   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/**/*

   Yarn

   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/**/*

Amplify 将会自动部署网站，并在你推送提交到仓库时主动更新。

参阅 AWS 的 Astro 部署指南 以获取更多信息。

S3 静态网站托管

S3 是任何应用程序的起点，因为它是一个可以存储你项目文件和其他资源的地方。S3 按照文件存储和请求数量收费。你可以在 AWS 文档 中找到有关 S3 的更多信息。

1. 创建一个与你的项目名称相对应的 S3 存储桶。

   提示

   存储桶名称应该是全局唯一的，我们建议使用你的项目名称以及你的站点域名来组合。

2. 禁用 “Block all public access”。默认情况下，AWS 将所有存储桶设置为私有。要使其公开访问，你需要在存储桶的属性中取消选中“Block public access”复选框。

3. 将你构建后的文件（位于 dist 目录）上传到 S3。你可以在控制台手动执行此操作，也可以使用 AWS CLI。如果使用 AWS CLI，请在 使用 AWS 凭证进行身份验证 后，使用以下命令：

   aws s3 cp dist/ s3://<BUCKET_NAME>/ --recursive

4. 更新你的存储桶策略以允许公共访问。你可以在存储桶的权限 > 存储桶策略中找到此设置。

   {
     "Version": "2012-10-17",
     "Statement": [
       {
         "Sid": "PublicReadGetObject",
         "Effect": "Allow",
         "Principal": "*",
         "Action": "s3:GetObject",
         "Resource": "arn:aws:s3:::<BUCKET_NAME>/*"
       }
     ]
   }

   警告

   不要忘记将 <BUCKET_NAME> 替换为你的存储桶名称。

5. 为你的存储桶启用网站托管。你可以在存储桶的 Properties > Static website hosting 中找到此设置。将你的索引文档设置为 index.html，错误文档设置为 404.html。最后，在存储桶的 Properties > Static website hosting 中找到你的新网站 URL。

   注意

   如果你正在部署单页面应用程序 (SPA)，请将错误文档设置为 index.html。

S3 与 CloudFront

CloudFront 是一个提供内容分发网络 (CDN) 功能的 Web 服务。它用于缓存 Web 服务器的内容并将其分发给用户。CloudFront 按照传输的数据量收费。将 CloudFront 添加到你的 S3 存储桶中可以更为经济的同时也提供更快的分发速度。

要将 S3 与 Cloudfront 连接，创建一个具有以下值的 CloudFront 分发：

• 原始域名（Origin domain）：你的 S3 存储桶静态网站端点。你可以在你的 S3 存储桶的 Properties > Static website hosting 中找到你的端点。或者，你可以选择你的 s3 存储桶并点击对话框以将你的存储桶地址替换为你的存储桶静态端点。
• 访客协议策略（Viewer protocol policy）：“重定向到 HTTPS”

该配置将通过 Cloudfront CDN 网络来服务你的网站。你可以在存储桶的 Distributions > Domain name 中找到你 CloudFront 的分发 URL。

注意

当连接 CloudFront 到一个 S3 静态网站端点时，你需要依赖 S3 桶策略进行访问控制。请参阅 S3 静态网站托管 部分，以了解更多关于桶策略的信息。

使用 GitHub Actions 实现持续部署

有许多方法可以为 AWS 设置持续部署。对于托管在 GitHub 上的代码，一种可能的方法是使用 GitHub Actions 在每次提交时部署你的网站。

1. 创建一个新的策略在你的 AWS 账号中使用 IAM 并拥有以下权限。这个策略将允许你在提交时上传构建好的文件到你的 S3 存储桶，并且在提交时使 CloudFront 分布的文件失效。

   {
     "Version": "2012-10-17",
     "Statement": [
         {
             "Sid": "VisualEditor0",
             "Effect": "Allow",
             "Action": [
                 "s3:PutObject",
                 "s3:ListBucket",
                 "s3:DeleteObject",
                 "cloudfront:CreateInvalidation"
             ],
             "Resource": [
                 "<DISTRIBUTION_ARN>",
                 "arn:aws:s3:::<BUCKET_NAME>/*",
                 "arn:aws:s3:::<BUCKET_NAME>"
             ]
         }
     ]
   }

   警告

   不要忘记替换 <DISTRIBUTION_ARN> 和 <BUCKET_NAME>。你可以在 CloudFront > Distributions > Details 中找到 DISTRIBUTION_ARN。

2. 创建一个新的 IAM 用户并将该策略附加到用户上。这将需要你提供 AWS_SECRET_ACCESS_KEY 和 AWS_ACCESS_KEY_ID。

3. 将以下示例工作流添加到你的代码库中的 .github/workflows/deploy.yml 文件中，并将其推送到 GitHub。你需要将 AWS_ACCESS_KEY_ID、AWS_SECRET_ACCESS_KEY、BUCKET_ID 和 DISTRIBUTION_ID 作为“secrets”添加到 GitHub 代码库中的 Settings > Secrets > Actions 中。使用 New repository secret 按钮来添加每个秘钥。

   name: Deploy Website
   
   on:
     push:
       branches:
         - main
   
   jobs:
     deploy:
       runs-on: ubuntu-latest
       steps:
         - name: Checkout
           uses: actions/checkout@v4
         - name: Configure AWS Credentials
           uses: aws-actions/configure-aws-credentials@v1
           with:
             aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
             aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
             aws-region: us-east-1
         - name: Install modules
           run: npm ci
         - name: Build application
           run: npm run build
         - name: Deploy to S3
           run: aws s3 sync --delete ./dist/ s3://${{ secrets.BUCKET_ID }}
         - name: Create CloudFront invalidation
           run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"

   注意

   BUCKET_ID 是你的 S3 存储桶的名称。DISTRIBUTION_ID 是你的 CloudFront 分发 ID。你可以在 CloudFront > Distributions > ID 中找到你的 CloudFront 分发 ID。

社区资源

• 将 Astro 部署到 AWS Amplify
• 将 Astro 部署到 AWS Elastic Beanstalk
• 将 Astro 部署到 AWS Fargate 上的 Amazon ECS
• SSR Amplify 部署故障排除

更多部署指南

• 

  AWS

• 

  AWS via Flightcontrol

• 

  AWS via SST

• 

  Azion

• 

  Buddy

• 

  Cleavr

• 

  Clever Cloud

• 

  Cloudflare

• 

  CloudRay

• 

  Deno Deploy

• 

  DeployHQ

• 

  EdgeOne Pages

• 

  Firebase

• 

  Fleek

• 

  Fly.io

• 

  GitHub Pages

• 

  GitLab Pages

• 

  Google Cloud

• 

  Heroku

• 

  Juno

• 

  Kinsta

• 

  Microsoft Azure

• 

  Netlify

• 

  Railway

• 

  Render

• 

  Seenode

• 

  Stormkit

• 

  Surge

• 

  Vercel

• 

  Zeabur

• 

  Zephyr Cloud

• 

  Zerops