Github ActionsでReactアプリをS3にアップロードする

はじめに

この記事は DENSO アドベントカレンダー 2023 の17日目の記事です。

業務の特徴もあり普段AWSを重点的に使用しています。
CI/CDパイプラインもAWSのCodeシリーズを使用しています。
Github Actionsがとても便利だと聞く機会が多いので使ってみました。
昨年のAdvent Calendarで作成したReactアプリをS3にデプロイするワークフローを作成しました。
今回は、Github Actionsに関して記事にします。

構成

インフラは、CloudFront + S3の構成
Githubでコードを管理し、mainブランチにpushされたらS3にアプリをデプロイ

意識したこと

• Github Actionsでビルド〜デプロイまで実施
• IAMユーザ(恒久的なクレデンシャル)を使用しない
• AWSアカウントID等のあまり知られたくない情報は直書きしない

学んだこと

• ymlファイルでワークフローを定義して、.github/workflow/に配置する
• OIDCを使用すると、IAM Roleを使用してAWS内のリソースにアクセスできる
• Secretを使用すると、変数を安全に保管しGithub Actionsから取得できる

成果物

name: Deploy React app to S3
on:
  push:
      branches:
        - main
env:
  AWS_ACCOUNT_ID: ${{ secrets.AWS_ACCOUNT_ID }}
  AWS_ROLE_NAME: ${{ secrets.AWS_ROLE_NAME }}
  S3_BUCKET_NAME: ${{ secrets.S3_BUCKET_NAME }}
  AWS_REGION: ap-northeast-1
permissions:
  id-token: write
  contents: read
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v4
      - name: configure aws credentials
        uses: aws-actions/configure-aws-credentials@v3
        with:
          role-to-assume: arn:aws:iam::${{ env.AWS_ACCOUNT_ID }}:role/${{ env.AWS_ROLE_NAME }}
          role-session-name: samplerolesession
          aws-region: ${{ env.AWS_REGION }}
      - name: install
        run: npm install
      - name: build
        run: npm run build
      - name:  deploy
        run: |
          aws s3 cp --recursive build s3://${{ env.S3_BUCKET_NAME }}/

感想

とてもお手軽にリリースまで出来て感動しました。