Deploy React app to AWS S3 using Github Actions

In this blog, we will cover how to deploy a React app to AWS S3 using Github Actions. In our previous blog, we covered how to build a static website with headless CMS and deploy to AWS. So, this will be an extension of that and we will discuss how to create the continuous integration and deployment pipeline (CICD) using Github Actions. In this blog, I will demonstrate how to deploy a react app to AWS S3 using Github actions.

Github Actions Build Pipeline YAML

Step-1: Create a .github/workflow/aws.yaml file with the following code:

on:
  push:
    branches:
      - develop

name: Deploy React App to AWS S3 using Github Actions

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master
    - name: Setup Node
      uses: actions/setup-node@v2
      with:
        node-version: '12.x'
    - name: Build App
      run: |
       yarn && yarn build && ls *
      env:
        CI: "" 
    - name: Copy to S3
      uses: jakejarvis/s3-sync-action@master
      with:
        args: --acl public-read --follow-symlinks --delete
      env:
        AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: ${{ secrets.AWS_REGION }}
        SOURCE_DIR: ${{ secrets.SOURCE_DIR }}

Create Secrets for build pipeline

Step-2: Next, create the following secrets for your Github repository under Settings -> Secrets section

AWS_S3_BUCKET - Name of S3 bucket e.g. coderise.io

AWS_ACCESS_KEY_ID: Access Key ID for AWS account that has access to deploy to AWS S3 bucket

AWS_SECRET_ACCESS_KEY: Access Secret Access Key for AWS account that has access to deploy to AWS S3 bucket

AWS_REGION: Region for AWS S3 bucket e.g. us-east-1

Next, commit and push the aws.yaml file to git repo. As a result, it will trigger a new build pipeline, which can be viewed under Github and then under Actions. The CICD pipeline will build and then deploy react app to AWS S3 bucket. Finally, if everything goes well, you should be able to open a browser and view the react site. In conclusion, we just saw that it’s a pretty straight-forward process to deploy react app to AWS using Github Actions. Amazon Simple Storage Service (Amazon S3) Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance. Key Benefits of AWS S3 include: Industry-leading performance, scalability, availability, and durability Wide range of cost-effective storage classes Unmatched security, compliance, and audit capabilities Easily manage data and access controls Query-in-place and process on-request You can read more about Amazon S3 here We hope you enjoyed this blog. In this blog, we covered how to deploy react site to AWS S3 easily using Github actions. Feel free to post a comment and share your experiences with deploy react app to AWS S3 using Github actions.