Deploying a React Application to Amazon S3 using Github Actions

There are a lot of ways to automate your deployment but for newbies github is also providing easy way to handle automation via GitHub Actions. In this article I will show you how easily you can deploy your updates from github repo to S3 webhosting bucket - that is live website.

Amazon Simple Storage Service (S3)?
Amazon Simple Storage Service (S3) is one of the storage service offered by AWS. It provides scalable object storage through a AWS console, API and SDK that is used to store and retrieve any amount of data from anywhere on the web at any time. To learn more about S3 strengths visit: Amazon S3

Github Actions?
GitHub is a version control and GitHub Actions ease the automation of your workflows like build, test, and deploy when using Github. To learn more about github advantageous visit: GitHub Actions
Steps:
How to create an Amazon S3 bucket for deploying React App.
How to set up an S3 bucket for React App Hosting.
How to configure our Github actions to deploy changes automatically to the S3 bucket.

Prerequisite:
For this hands on you need to have:
A Github account.
An active AWS Account (This exercise can be done within the free tier)

Create Amazon S3 Bucket
Log in to your AWS account and select s3 from the services menu.
Click on “Create bucket” Button to create a new bucket. To create a bucket, provide a bucket name. This name should be unique among all buckets in Amazon S3. Note of the region in which you are creating the bucket for example us-east-1.

Now uncheck the checkbox for "Block All Public Access" and check
“I acknowledge that the current settings might result in this bucket and the objects within becoming public.”
Leave the rest of setting as is. Now click on Create bucket button at the end of page to complete the bucket creation process.

Now we will add a bucket policy which will make the bucket's content publicly available. For this select the newly created buckets S3 dashboards. Select Permissions and then select Bucket Policy. Click edit and paste this code snippet in the editor.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::<bucket-name>/*"
            ]
        }
    ]}

In the bucket policy, write your bucket name instead of . This name should match your bucket name. Then, click on Save Change button.

Now to enable website hosting for this bucket, Go to Properties and scroll to the last section. Click Edit and enable. Mention index.html for both index and error page for now. If you developed an error page then mention that in error. Then click on Save Changes. Now you have successfully configured S3 bucket for webhosting.

Create GitHub Repo and Push React App:
Create a new repository on GitHub.

After creating a repository, prepare your react app to push to this repo. Create a React application using React App and ensure the build script in the package.json file will output to a build folder.

Create a folder with the name of .github/workflows in VScode editor and make a .yml file in it - that is automate.yml.
Paste the following code snippet in this yml file.

name: s3-deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Configure AWS Credentials
        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: ${{ secrets.AWS_REGION }}
      - name: Build React App
        run: npm install && npm run build
      - name: Deploy app build to S3 bucket
        run: aws s3 sync ./dist/ s3://<bucket-name> --delete

As you can see, we have used some credentials here which includes: AWS_ACCESS_KEY_ID,AWS_SECRET_ACCESS_KEY and AWS_REGION. You can find these credentials in your AWS user console. Also, you have to update your bucket name in the script as well.
Now let's understand what this script will do:
Name: Name of the script.
On: We define trigger with on. in this script this script will run when a push event occur to this repo. We also specified the main branch. So any push on main branch will run this script.
Jobs: Workflow is made up of one or more jobs.
Steps: A job contains a sequence of steps. Here we used run with uses and name.
actions/checkout@v2: This will checks-out your repository, so your workflow can access it.
aws-actions/configure-aws-credentials@v1: This configures AWS credentials and region environment variables for use in other GitHub Actions.
Build React App: This step block installs the node packages and runs the build command in the package.json file, which creates a build folder in the root directory.
Deploy app build to S3 bucket: This deploys the newly created build to S3 bucket. Now Save the file.

Now go to Github and select your repo and go to Settings and Secrets and Actions and define three credentials here.

Note that the variable name should be same as defined in the .yml file.

Now follow the instructions given by github upon repository creation.

As soon you pushed the code, you will find your react app in github repo and it will start the job we defined in .yml file.
After few minute go to Actions tab and see the status of defined action there. You can see all details over there as well.

Now go to your S3 bucket and refresh the objects tab, you will find the build of react app. You can visit your website by copy and paste link in Static Website section to new tab.