文江博客开发文档 Astro 中文文档 v20240605 文章详情

文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

将你的 Astro 网站部署到 AWS

发布于 2024-06-05 21:19:56 字数 17769 浏览 0 评论 0 收藏 0

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

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

AWS Amplify

AWS Amplify 是一套专为前端 Web 和移动开发人员设计的工具和功能，可以让你在 AWS 上快速轻松地构建全栈应用程序。

创建一个新的 Amplify Hosting 项目。
将你的仓库连接到 Amplify。

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

npm
pnpm
Yarn

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

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

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

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

S3 静态网站托管

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

创建一个与你的项目名称相对应的 S3 存储桶。
提示
存储桶名称应该是全局唯一的，我们建议使用你的项目名称以及你的站点域名来组合。
禁用 “Block all public access”。默认情况下，AWS 将所有存储桶设置为私有。要使其公开访问，你需要在存储桶的属性中取消选中“Block public access”复选框。
将你构建后的文件（位于 dist 目录）上传到 S3。你可以在控制台手动执行此操作，也可以使用 AWS CLI。如果使用 AWS CLI，请在使用 AWS 凭证进行身份验证后，使用以下命令：
```
aws s3 cp dist/ s3://<BUCKET_NAME>/ --recursive
```

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

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

为你的存储桶启用网站托管。你可以在存储桶的 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。

使用 GitHub Actions 实现持续部署

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

创建一个新的策略在你的 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>"
          ]
      }
  ]
}

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

将以下示例工作流添加到你的代码库中的 .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 "/*"

将你的 Astro 网站部署到 AWS

AWS Amplify

S3 静态网站托管

S3 与 CloudFront

使用 GitHub Actions 实现持续部署

社区资源

更多部署指南

Netlify

Vercel

Deno Deploy

GitHub Pages

GitLab Pages

Cloudflare Pages

AWS

AWS via Flightcontrol

AWS via SST

Google Cloud

Firebase Hosting

Heroku

Microsoft Azure

Buddy

Edgio

Fly.io

Render

Stormkit

Surge

Cleavr

Kinsta

Deta Space

Zeabur

Zerops

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

将你的 Astro 网站部署到 AWS

AWS Amplify

S3 静态网站托管

S3 与 CloudFront

使用 GitHub Actions 实现持续部署

社区资源

更多部署指南

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。