GitHub ActionsでReactアプリをCloudFront + S3にデプロイして静的サイトをホスティングする

最近、ReactアプリケーションをS3とCloudFrontを使って静的にホスティングするプロジェクトに取り組みました。このブログでは、そのアーキテクチャやCICDパイプラインの構築について解説します。

タイトル内容のソースコードを先に把握したい方はGitHubリポジトリを参照してください。

アーキテクチャ概要

今回構築したアーキテクチャは、以下の要素で成り立っています。

• S3バケット: Reactアプリの静的ファイルをホスティングします。S3はサーバーレスで静的サイトのホスティングに最適です。
• CloudFront: S3上のコンテンツを高速に配信するためのCDN（Content Delivery Network）。世界中にあるエッジロケーションを利用し、ユーザーに近い場所からコンテンツを配信することで、パフォーマンスを向上させます。
• GitHub Actions: CICDパイプラインを構築し、Reactアプリのビルドからデプロイまでを自動化しています。

CICDパイプラインの構築

CICDパイプラインはGitHub Actionsを使用して構築しました。リポジトリにコードがプッシュされるたびに、以下のプロセスが実行されます。

1. Reactアプリのビルド: npm run build コマンドでビルドを行い、最終的な静的ファイルを生成します。
2. S3へのデプロイ: ビルドされたファイルをS3にアップロードします。
3. CloudFrontキャッシュの無効化: 新しいバージョンのコンテンツが配信されるように、CloudFrontのキャッシュを無効化します。

GitHub Actionsのワークフローファイル

以下は、実際に使用しているGitHub Actionsのワークフローファイルです。

name: Upload files to S3

on:
  push:
    branches:
    - main

env:
  MY_AWS_REGION: '<YOUR AWS REGION>'
  AWS_ROLENAME: '<YOUR AWS ROLE>'
  AWS_S3_BUCKET: '<YOUR S3 BUCKET>'
  SOURCE_DIR: './build'

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      id-token: write
      contents: read
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '16' # 使用するNode.jsのバージョン

    - name: Install dependencies
      run: npm install

    - name: Build project
      run: npm run build

    - name: Configure AWS credentials with IAM Role
      uses: aws-actions/configure-aws-credentials@v4
      with:
        role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/${{ env.AWS_ROLENAME }}
        aws-region: ${{ env.MY_AWS_REGION }}
    - name: Sync files to S3
      run: |
          aws s3 sync ${{ env.SOURCE_DIR }} s3://${{ env.AWS_S3_BUCKET }}/ --delete --exclude '.*git*'
    - name: Invalidate CloudFront Cache
      run: |
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
            --paths "/*"

AWSリソースの構築

• S3バケットの作成: バケットを作成し、静的ウェブサイトホスティングを有効にします。パブリックアクセスはCloudFront経由で制御されるため、S3自体には直接アクセスできないように設定します。
• CloudFrontの設定: S3バケットをオリジンとして指定し、カスタムドメインやSSL証明書を設定します。

最後に

この構成により、ReactアプリをS3とCloudFrontを使用して高速かつセキュアにホスティングできるようになりました。また、GitHub Actionsを使ったCICDパイプラインで、簡単にデプロイを自動化することが可能です。

詳しいコードや設定については、GitHubリポジトリで公開していますので、ぜひ参考にしてください。 GitHubリポジトリはこちら