はじめに
これまで、静的ウェブサイトのホスティングには主にVercelを使用していましたが、技術の幅を広げるためにAWS S3に挑戦しました。さらに、GitHub Actionsを導入してビルドとデプロイを自動化し、開発効率の向上を実現しました。この記事ではその忘備録を兼ねて共有します。
この記事で紹介する内容
- Reactで作成したウェブサイトをAWS S3にデプロイ自動化するGitHub Actionsの設定方法
この記事では取り扱わない内容
- AWS S3バケットのセットアップに関する詳細な手順
- GitHub Actionsとの連携に必要なアクセスキーの生成と設定の詳細な手順
上記の内容については、既に他の優れた記事が多数存在するため、そちらも参考にしてみてください。私が参考にした記事はこちらです。
前提条件
以下の条件を満たしている必要があります：
- AWSアカウントを保有していること
- GitHubリポジトリが準備されていること
手順
Reactアプリの生成
まず、以下のコマンドでReactアプリを生成します：
npx create-react-app my-app
AWS S3バケットのセットアップ:
以下の手順でAWS S3バケットを設定します：
- AWS Management Consoleにログインし、S3サービスに移動します。
- 新しいバケットを作成し、ウェブホスティングオプションを有効にします。
- アクセスキーを生成します。
注意: ここでは手順を簡略化して説明しています。
GitHubリポジトリの設定
以下の手順でGitHubリポジトリを設定します：
- リポジトリを作成し、my-appのコードをコミットします。
- AWS S3で生成したアクセスキーをGitHub Actionsに設定します。
GitHub Actionsワークフローの設定
GitHub Actionsとは？
GitHub Actions は、ビルド、テスト、デプロイのパイプラインを自動化できる継続的インテグレーションと継続的デリバリー (CI/CD) のプラットフォームです。
ここではmainブランチへのpushをトリガーとして、AWS S3のバケットにビルドされたファイルをデプロイするための設定をご紹介します。
以下の内容でGitHub Actionsワークフローを設定します：
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 配下で行うようにしたところ解決しました
お読みいただきありがとうございました。お気づきのことがあればコメントを頂けると幸いです😊