Deploying a React App in AWS using GitHub Actions

Continuous Integration and Continuous Deployment (CI/CD) are essential for efficient software development and fast delivery of products.

In this article, I will use the Amazon Web Services (AWS) Static Web Hosting feature and GitHub Actions to quickly add CI/CD flow to a React project — a similar approach can be applied to other front-end projects.

Prerequisites:

• Familiar with Amazon S3, AWS Cloud Front

Here are the steps to help you get started quickly:

• Create a new bucket for hosting the static files for the web application.
• Under the Permission tab of the bucket:

1. turn off all the Block Bucket Policy Access

2. Add the following Bucket Policy Declaration

{
    "Version": "2012-10-17",
    "Id": "Policy1625741335904",
    "Statement": [
        {
            "Sid": "Stmt1625741331617",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::the-name-of-the-bucket/*"
        }
    ]
}

• Switch to the Properties tab of the S3 Bucket and enable Static Web Hosting, setting the target to index.html

• Switch to AWS Cloud Front service and:

1. Create a new distribution.
2. Copy out the cloud front distribution link.
3. Select the Origin domain that matches your S3 bucket name — If prompted, use this s3 website endpoint.
4. Select the Web Application Firewall (WAF) option and Create a Distribution.

• Generate AWS Access Key ID and Secret Access Key on AWS IAM using the UI and store them in a secure place.
• Add the AWS Access Key ID and Secret Access Key to the secrets in the settings for the GitHub Repository.

• Prepare the codebase by adding the GitHub actions yml file(deploy.yml) under the .github/workflows folder.

name: Build and Deploy

on:
  push:
    branches:
      - main
      - develop

env:
  applicationfolder: ''
  AWS_REGION: eu-west-2
  S3BUCKET: the-name-of-my-bucket-on-aws
  CI: false


jobs:
  build:
    name: Build and Package
    runs-on: ubuntu-latest
    permissions:
      id-token: write
      contents: read
    steps:
      - uses: actions/checkout@v4

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@0e613a0980cbf65ed5b322eb7a1e075d28913a83
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ env.AWS_REGION }}

      - name: Setup Node 20
        uses: actions/setup-node@v3
        with:
          node-version: 20

      - name: chmod
        run: chmod -R +x ./.github

      - name: Install Dependencies
        run: npm install

      - name: Build and Package
        run: npm run build

      - name: Upload Artifact to s3
        run: aws s3 cp $GITHUB_WORKSPACE/build s3://${{ env.S3BUCKET }} --recursive
        #Note: build is for create-react-app builds and dist for vite builds
        

• Git commit and push to the repository.
• View the website at the Cloud front Distribution URL

• **Optionally Purchase a custom domain and apply it on Cloud Front distribution creation***

Thanks for your time. I hope you found this useful.

For support and inquiry, feel free to contact me here.