将你的 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. 禁用“阻止所有公共访问”。默认情况下，AWS 将所有存储桶设置为私有。要使其公开，你需要在存储桶的属性中取消选中“阻止公共访问”复选框。

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. 为你的存储桶启用网站托管。你可以在存储桶的属性 > 静态网站托管中找到此设置。将你的索引文档设置为 index.html，错误文档设置为 404.html。最后，你可以在存储桶的属性 > 静态网站托管中找到你的新网站 URL。

   注意

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

S3 与 CloudFront

CloudFront 是一项提供内容分发网络（CDN）功能的 Web 服务。它用于缓存 Web 服务器的内容并将其分发给最终用户。CloudFront 按传输的数据量收费。将 CloudFront 添加到你的 S3 存储桶更具成本效益，并能提供更快的交付速度。

要将 S3 与 CloudFront 连接，请使用以下值创建一个 CloudFront 分发

• 源域： 你的 S3 存储桶静态网站终端节点。你可以在 S3 存储桶的属性 > 静态网站托管中找到你的终端节点。或者，你可以选择你的 S3 存储桶并单击标注，用你的存储桶静态终端节点替换你的存储桶地址。
• 查看器协议策略：“重定向到 HTTPS”

此配置将使用 CloudFront CDN 网络为你的网站提供服务。你可以在存储桶的分发 > 域名中找到你的 CloudFront 分发 URL。

注意

将 CloudFront 连接到 S3 静态网站终端节点时，你需要依赖 S3 存储桶策略进行访问控制。有关存储桶策略的更多信息，请参阅S3 静态网站托管部分。

使用 GitHub Actions 进行持续部署

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

1. 使用 IAM 在你的 AWS 账户中创建一个具有以下权限的新策略。此策略将允许你在推送提交时将构建的文件上传到你的 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 > 分发 > 详细信息中找到 DISTRIBUTION_ARN。

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

3. 将此示例工作流添加到你的仓库的 .github/workflows/deploy.yml 文件中，并将其推送到 GitHub。你需要在 GitHub 上的仓库的 设置 > Secrets > 操作 下，将 AWS_ACCESS_KEY_ID、AWS_SECRET_ACCESS_KEY、BUCKET_ID 和 DISTRIBUTION_ID 添加为“机密”。点击 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 > 分发 > ID 中找到你的 CloudFront 分发 ID。

社区资源

• 将 Astro 部署到 AWS Amplify
• 将 Astro 部署到 AWS Elastic Beanstalk
• 在 AWS Fargate 上将 Astro 部署到 Amazon ECS
• SSR Amplify 部署问题排查

更多部署指南

• 

  Netlify

• 

  Vercel

• 

  Deno Deploy

• 

  GitHub Pages

• 

  GitLab Pages

• 

  Cloudflare Pages

• 

  AWS

• 

  通过 Flightcontrol 部署到 AWS

• 

  通过 SST 部署到 AWS

• 

  Clever Cloud

• 

  Azion

• 

  Google Cloud

• 

  Google Firebase

• 

  Heroku

• 

  Microsoft Azure

• 

  Buddy

• 

  Fleek

• 

  Fly.io

• 

  Render

• 

  Stormkit

• 

  Surge

• 

  Cleavr

• 

  Kinsta

• 

  Zeabur

• 

  Zerops

• 

  CloudRay