Automating React App Deployment with AWS Elastic Beanstalk and GitHub Actions

Introduction

Deploying web applications can be a complex and time-consuming process, involving setting up infrastructure, managing environments, and ensuring smooth deployments. AWS Elastic Beanstalk simplifies this by providing an easy-to-use platform for deploying and managing applications on AWS. By integrating GitHub Actions into the deployment pipeline, you can further automate the process, reducing manual errors and saving valuable time.

In this tutorial, we’ll guide you through deploying a React app to AWS Elastic Beanstalk using Docker and GitHub Actions for continuous integration and deployment (CI/CD).

Prerequisites

Before we begin, ensure you have the following:

• An Ubuntu machine with Git installed.

• Access to an AWS account.

• Basic familiarity with Docker, React, AWS Elastic Beanstalk, and GitHub.

Step 1: Clone the Source Code

Start by cloning the repository containing your React app.

git clone https://github.com/SandhyaDeotare26/AWS_Elastic_BeanStalk_On_EC2.git
cd AWS_Elastic_BeanStalk_On_EC2

Step 2: Set Up Docker

Ensure Docker is installed and enabled on your machine. Use the provided shell script to install Docker.

chmod +x docker_install.sh
sh docker_install.sh

Step 3: Create a Multi-Stage Dockerfile

Create a Dockerfile to build your React app image efficiently using multi-stage builds.

FROM node:14-alpine as builder
WORKDIR /app 
COPY package.json . 
RUN npm install 
COPY . . 
RUN npm run build

FROM nginx 
EXPOSE 80 
COPY --from=builder /app/build /usr/share/nginx/html

Step 4: Build the Docker Image

Build the Docker image for your React app.

sudo docker build -t react-app-image .

Step 5: Run the Docker Container

Run a Docker container using the built image to verify the application locally.

sudo docker run -d -p 80:80 react-app-image

Step 6: Configure AWS Elastic Beanstalk

1. Go to AWS Elastic Beanstalk in the AWS Management Console.

2. Click "Create Application".

3. Provide application details, select Docker as the platform, and choose "Sample Code" as a starting point.

4. Wait for the environment to be set up.

5. Access your deployed app using the provided URL to ensure it’s working correctly.

Step 7: Enable CI/CD with GitHub Actions

Locate the deploy-react.yaml file provided in your repository and move it under the .github/workflows directory. Update the file with relevant parameters such as branch name, application name, environment name, AWS access key, AWS secret access key, and region.

name: Deploy React App to Elastic Beanstalk

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v1

      - name: Login to Amazon ECR
        id: login-ecr
        uses: aws-actions/amazon-ecr-login@v1

      - name: Build, tag, and push image to Amazon ECR
        run: |
          docker build -t react-app-image .
          docker tag react-app-image:latest ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.${{ secrets.AWS_REGION }}.amazonaws.com/react-app-image:latest
          docker push ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.${{ secrets.AWS_REGION }}.amazonaws.com/react-app-image:latest

      - name: Deploy to Elastic Beanstalk
        run: |
          eb init -p docker react-app --region ${{ secrets.AWS_REGION }}
          eb create react-app-env
          eb deploy
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: ${{ secrets.AWS_REGION }}

Step 8: Trigger GitHub Action CI/CD

Push all changes to the main branch of your GitHub repository. GitHub Actions will automatically trigger the CI/CD process.

git add .
git commit -m "Add CI/CD workflow"
git push origin main

Step 9: Check the Result

Verify the Elastic Beanstalk link received earlier. The sample application should now be replaced with your React app, confirming a successful deployment.

Conclusion

Automating the deployment process using GitHub Actions and AWS Elastic Beanstalk simplifies your workflow and ensures consistent, reliable deployments. By following this tutorial, you’ve learned how to integrate CI/CD into your React app deployment pipeline, making it efficient and scalable for future projects.

Happy Learning!

Follow me on LinkedIn.