AstroサイトをAWSにデプロイする

AWSは、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はファイルの保存容量とリクエスト数に対して課金されます。S3についての詳細はAWS documentationを参照してください。

プロジェクト名を含んだS3バケットを作成します。

バケット名はグローバルに一意でなければなりません。プロジェクト名とサイトのドメイン名の組み合わせをお勧めします。
**「パブリックアクセスをすべてブロック」**を無効にします。デフォルトでは、AWS はすべてのバケットを非公開に設定しています。公開するには、バケットのプロパティにある「パブリックアクセスをブロック」のチェックを外す必要があります。
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>/*"
    }
  ]
}
```
<BUCKET_NAME>を自分のバケット名に置き換えることを忘れないでください。
BucketのWebサイトホスティングを有効にします。この設定は、バケットのプロパティ > 静的ウェブサイトホスティングにあります。インデックスドキュメントをindex.htmlに、エラードキュメントを404.htmlに設定します。最後に、バケットのプロパティ > 静的ウェブサイトホスティングで、新しいウェブサイトのURL確認できます。

シングルページアプリケーション (SPA) をデプロイする場合は、エラードキュメントを index.html に設定してください。

S3とCloudFront

CloudFrontは、コンテンツ・デリバリー・ネットワーク（CDN）機能を提供するウェブサービスです。ウェブサーバーのコンテンツをキャッシュし、エンドユーザーに配信するために使用されます。CloudFrontは転送されたデータ量に応じて課金されます。CloudFrontをS3バケットに追加することで、より費用対効果が高く、より高速な配信が可能になります。

S3とCloudFrontを接続するには、以下の値のCloudFrontディストリビューションを作成してください:

オリジンドメイン: S3バケットの静的ウェブサイトエンドポイント。エンドポイントはS3バケットのプロパティ > 静的ウェブサイトホスティングで確認することができます。もしくは、S3バケットを選択して注釈をクリックし、バケットアドレスをバケットの静的エンドポイントに置き換えることができます。
ビューワープロトコルポリシー: “Redirect to HTTPS”

この設定により、サイトはCloudFront CDNネットワークを使用して提供されます。CloudFrontディストリビューションのURLは、バケットのディストリビューション > ドメイン名で見つけることができます。

GitHubアクションによる継続的デプロイメント

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を、GitHubリポジトリのSettings > Secrets > Actionsから”secrets”として追加する必要があります。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 "/*"