Skip to content

将你的 Astro 站点部署到 AWS

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

¥AWS is a full-featured web app hosting platform that can be used to deploy an Astro site.

将项目部署到 AWS 需要使用 AWS 控制台。（大多数这些操作也可以使用 AWS CLI 完成）。本指南将引导你完成使用 AWS 放大、S3 静态网站托管 和 CloudFront 将站点部署到 AWS 的步骤。

¥Deploying your project to AWS requires using the AWS console. (Most of these actions can also be done using the AWS CLI). This guide will walk you through the steps to deploy your site to AWS using AWS Amplify, S3 static website hosting, and CloudFront.

AWS 放大

Section titled AWS 放大

¥AWS Amplify

AWS Amplify 是一组专门构建的工具和功能，可让前端 Web 和移动开发者在 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.

  1. Create a new Amplify Hosting project.

  2. Connect your repository to Amplify.

  3. Modify your build settings to match your project’s build process.

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

当你将提交推送到存储库时，Amplify 将自动部署你的网站并更新它。

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

S3 静态网站托管

Section titled S3 静态网站托管

¥S3 static website hosting

S3 是任何应用的起点。它是存储项目文件和其他资源的位置。S3 按文件存储和请求数量收费。你可以在 AWS 文档 中找到有关 S3 的更多信息。

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

  1. Create an S3 bucket with your project’s name.

  2. Disable “Block all public access”. By default, AWS sets all buckets to be private. To make it public, you need to uncheck the “Block public access” checkbox in the bucket’s properties.

  3. Upload your built files located in dist to S3. You can do this manually in the console or use the AWS CLI. If you use the AWS CLI, use the following command after authenticating with your AWS credentials:

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

  4. Update your bucket policy to allow public access. You can find this setting in the bucket’s Permissions > Bucket policy.

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

  5. Enable website hosting for your bucket. You can find this setting in the bucket’s Properties > Static website hosting. Set your index document to index.html and your error document to 404.html. Finally, you can find your new website URL in the bucket’s Properties > Static website hosting.

带有 CloudFront 的 S3

Section titled 带有 CloudFront 的 S3

¥S3 with CloudFront

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

¥CloudFront is a web service that provides content delivery network (CDN) capabilities. It is used to cache content of a web server and distribute it to end users. CloudFront charges for the amount of data transferred. Adding CloudFront to your S3 bucket is more cost-effective and provides a faster delivery.

要将 S3 与 Cloudfront 连接，请使用以下值创建 CloudFront 分发版：

¥To connect S3 with Cloudfront, create a CloudFront distribution with the following values:

  • 原域：你的 S3 存储桶静态网站端点。你可以在 S3 存储桶的属性 > 静态网站托管中找到你的端点。或者，你可以选择你的 s3 存储桶并单击标注以将你的存储桶地址替换为你的存储桶静态端点。

  • 查看器协议策略：“重定向到 HTTPS”

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

¥This configuration will serve your site using the Cloudfront CDN network. You can find your CloudFront distribution URL in the bucket’s Distributions > Domain name.

使用 GitHub Actions 进行持续部署

Section titled 使用 GitHub Actions 进行持续部署

¥Continuous deployment with GitHub Actions

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

¥There are many ways to set up continuous deployment for AWS. One possibility for code hosted on GitHub is to use GitHub Actions to deploy your website every time you push a commit.

  1. Create a new policy in your AWS account using IAM with the following permissions. This policy will allow you to upload built files to your S3 bucket and invalidate the CloudFront distribution files when you push a commit.

    {
      "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>"
              ]
          }
      ]
    }

  2. Create a new IAM user and attach the policy to the user. This will provide your AWS_SECRET_ACCESS_KEY and AWS_ACCESS_KEY_ID.

  3. Add this sample workflow to your repository at .github/workflows/deploy.yml and push it to GitHub. You will need to add AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, BUCKET_ID, and DISTRIBUTION_ID as “secrets” to your repository on GitHub under Settings > Secrets > Actions. Click New repository secret to add each one.

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

社区资源

Section titled 社区资源

¥Community Resources

More Deployment Guides

Astro 中文网 - 粤ICP备13048890号