Cansin Acarer

How to Continuously Deploy a React App to an AWS S3 Bucket

You can use GitHub Actions to continuously deploy a React app to a storage bucket. Below is an example of how to set up continuous deployment to an AWS S3 bucket using GitHub Actions.

  1. Create an S3 Bucket:

    • Go to the AWS Management Console.
    • Navigate to S3 and create a new bucket.
    • Configure the bucket for static website hosting.

  2. Set Up IAM User:

    • Create an IAM user with AmazonS3FullAccess permissions.
    • Generate access keys for this user.

  3. Add Secrets to GitHub:

    • Go to your GitHub repository.
    • Navigate to Settings > Secrets and variables > Actions.
    • Add the following secrets:
      • AWS_ACCESS_KEY_ID
      • AWS_SECRET_ACCESS_KEY
      • AWS_BUCKET_NAME
      • AWS_REGION

  4. Create GitHub Actions Workflow:

    • In your repository, create a .github/workflows/deploy.yml file.
    • Add the following content to the file:
name: Deploy React App to S3

# The workflow triggers on a push to the `main` branch.
on:
  push:
    branches:
      - main  # or the branch you want to deploy from

jobs:
  # The `deploy` job runs on the latest Ubuntu runner.
  deploy:
    runs-on: ubuntu-latest

    steps:
      # Check out the repository code.
      - name: Checkout code
        uses: actions/checkout@v2

      # Set up Node.js.
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      # Install the project dependencies.
      - name: Install dependencies
        run: npm install

      # Build the React app.
      - name: Build the React app
        run: npm run build

      # Install the AWS CLI and syncs the `build` directory to the S3 bucket.
      - name: Deploy to S3
        env:
          _ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_BUCKET_NAME: ${{ secrets.AWS_BUCKET_NAME }}
          AWS_REGION: ${{ secrets.AWS_REGION }}
        run: |
          npm install -g aws-cli
          aws s3 sync build/ s3://$AWS_BUCKET_NAME --delete