Prathmesh Vibhute's blog
Day 87 : Project 8 - Deploying a React Application on AWS Elastic Beanstalk Using GitHub Actions

Day 87 : Project 8 - Deploying a React Application on AWS Elastic Beanstalk Using GitHub Actions

Prathmesh Vibhute's photo
Prathmesh Vibhute
·

4 min read

In today's fast-paced development environment, automation is key to efficiency and reliability. Continuous Integration and Continuous Deployment (CI/CD) pipelines have become essential tools for modern software development, enabling teams to deliver high-quality software quickly and efficiently. In this blog post, we will explore how to deploy a React application on AWS Elastic Beanstalk using GitHub Actions, a powerful CI/CD tool integrated with GitHub repositories.

Project Overview

This project demonstrates the process of deploying a React application to AWS Elastic Beanstalk using GitHub Actions for CI/CD. The main tasks involved are:

  1. Getting the source code from GitHub

  2. Setting up AWS Elastic Beanstalk

  3. Building the GitHub Actions workflow

  4. Running the project

Let's dive into each step to understand the process in detail.

Step 1: Get Source Code from GitHub

The first step in our deployment process is to get the source code of the React application from GitHub. If you haven't already, create a new GitHub repository and push your React application's code to this repository. This will be the central location where your code is stored and managed.

Here’s how you can clone your repository locally if you haven’t done so:

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

Step 2: Set Up Docker

After cloning the code, find the docker_install.sh shell-script, which will install and enable Docker. Make it executable and run the script to install Docker.

chmod +x docker_install.sh
sh docker_install.sh

Step 3: Create a Multi-Stage Dockerfile

Our React app requires Node.js to run and NGINX to serve requests after deployment. Let's create a multi-stage Dockerfile to address these requirements.

Dockerfile:

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

With the Dockerfile in place, it's time to build the Docker image.

sudo docker build -t react-app-image .

Step 5: Run the Docker Container

Launch a Docker container with the built image:

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

Ensure the container is running using docker ps and confirm the application's activity by accessing the EC2 public IP on port 80.

Step 6: Configure AWS Elastic Beanstalk

Go to the AWS Elastic Beanstalk service and click on "Create Application". Provide the required details, including a name for the application, select "Docker" as the platform, and choose "Sample Code" as a starting point.

After clicking "Create Application", wait for the environment to be set up.

Step 7: Enable CI/CD with GitHub Actions

We will use GitHub Actions for CI/CD. Locate the "deploy-react.yaml" file 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 application in BeanStalk
on :
    push:
        branches:
            - "main"
jobs:
    deploy: 
        runs-on: ubuntu-latest
        steps:
        - name: Checkout source code
          uses: actions/checkout@v2

        - name: Generate deployment package
          run: zip -r deploy.zip . -x '*.git*'

        - name: Deploy to EB
          uses: einaregilsson/beanstalk-deploy@v21
          with:
            aws_access_key: ${{ secrets.AWS_ADMIN_ACCESS_KEY_ID }}
            aws_secret_key: ${{ secrets.AWS_ADMIN_SECRET_ACCESS_KEY_ID }}
            application_name: react-app
            environment_name: React-app-env-2
            version_label: ${{ github.sha }}
            region: eu-west-2
            deployment_package: deploy.zip

Step 8: Trigger GitHub Action CI/CD

Push all the codes under the "AWS_Elastic_BeanStalk_On_EC2" folder to the "main" branch of your GitHub repository. GitHub Actions will automatically trigger the CI/CD process.

Step 9: Check the Result

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

Congratulations on completing this hands-on project! Day 87 of the #90DaysOfDevOps Challenge was all about automating the deployment of a React application on AWS Elastic Beanstalk using GitHub Actions. By setting up this CI/CD pipeline, you have streamlined the deployment process, ensuring that your app is always up-to-date and readily available to your users. Tomorrow, we'll dive into another exciting project. Stay tuned!

I'm confident that this article will prove to be valuable, helping you discover new insights and learn something enriching .

thank you : )

#day87project8ReactAWSDevops