AWS S3とGitHub Actionsを使用した静的ウェブサイトの自動デプロイ

はじめに

これまで、静的ウェブサイトのホスティングには主にVercelを使用していましたが、技術の幅を広げるためにAWS S3に挑戦しました。さらに、GitHub Actionsを導入してビルドとデプロイを自動化し、開発効率の向上を実現しました。この記事ではその忘備録を兼ねて共有します。

この記事で紹介する内容

• Reactで作成したウェブサイトをAWS S3にデプロイ自動化するGitHub Actionsの設定方法

この記事では取り扱わない内容

• AWS S3バケットのセットアップに関する詳細な手順
• GitHub Actionsとの連携に必要なアクセスキーの生成と設定の詳細な手順

上記の内容については、既に他の優れた記事が多数存在するため、そちらも参考にしてみてください。私が参考にした記事はこちらです。

前提条件

以下の条件を満たしている必要があります：

• AWSアカウントを保有していること
• GitHubリポジトリが準備されていること

手順

Reactアプリの生成

まず、以下のコマンドでReactアプリを生成します：

npx create-react-app my-app

create-react-app

AWS S3バケットのセットアップ:

以下の手順でAWS S3バケットを設定します：

1. AWS Management Consoleにログインし、S3サービスに移動します。
2. 新しいバケットを作成し、ウェブホスティングオプションを有効にします。
3. アクセスキーを生成します。

注意: ここでは手順を簡略化して説明しています。

GitHubリポジトリの設定

以下の手順でGitHubリポジトリを設定します：

1. リポジトリを作成し、my-appのコードをコミットします。
2. AWS S3で生成したアクセスキーをGitHub Actionsに設定します。

GitHub Actionsワークフローの設定

GitHub Actionsとは？

GitHub Actions は、ビルド、テスト、デプロイのパイプラインを自動化できる継続的インテグレーションと継続的デリバリー (CI/CD) のプラットフォームです。

引用: GitHub Actions を理解する

ここではmainブランチへのpushをトリガーとして、AWS S3のバケットにビルドされたファイルをデプロイするための設定をご紹介します。

以下の内容でGitHub Actionsワークフローを設定します：

sample.yaml

name: Build and deploy static website to AWS-S3 on push

on:
  push:
    branches:
      - main
jobs: 
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up AWS CLI
        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: <your-aws-region>
      
      - name: Build
        run: npm ci && npm run build

      - name: Deploy to AWS S3
        run: |
          aws s3 sync ./build s3://<your-bucket-name> --delete

コードに変更を加えてコミット&プッシュし、ビルドされたコードがAWS S3のバケットにデプロイされることを確認します。

注意

• <your-bucket-name>には作成したバケット名を入力します。
• <your-aws-region>にはバケットを作成した地域を指定します。
• secrets.AWS_ACCESS_KEY_IDとsecrets.AWS_SECRET_ACCESS_KEYは、GitHubリポジトリのSecretsに保存されたAWSの認証情報です。

まとめ

これで、GitHub Actionsを使用してAWS S3に静的ウェブサイトを自動的にデプロイするCI/CDパイプラインが構築されました。mainブランチへの変更がトリガーとなり、自動的にデプロイが行われるため、開発効率の向上が期待できます。

個人的に詰まったポイントは、buildされたファイルのみをS3へデプロイするところです。結論として、buildとdeployを１つのsteps内に設定し、AWSへのdeployを ./build 配下で行うようにしたところ解決しました

お読みいただきありがとうございました。お気づきのことがあればコメントを頂けると幸いです😊

引用

• Deploy static websites to AWS S3 via CI/CD with GitHub Actions
• Workflow syntax for GitHub Actions