How to Deploy a React Application on AWS Elastic Beanstalk Using GitHub Actions

Deploying a React application on AWS Elastic Beanstalk using GitHub Actions is an excellent way to automate your CI/CD pipeline. This article will guide you through the process in detail, using easy-to-understand language, perfect for new learners.

Introduction

Continuous Integration (CI) and Continuous Deployment (CD) are essential practices in modern software development. They help automate the process of deploying code, reducing the risk of errors, and increasing efficiency. In this guide, we will deploy a React application on AWS Elastic Beanstalk using GitHub Actions.

Prerequisites

Before we start, make sure you have the following:

AWS Account: Sign up at AWS.
GitHub Account: Sign up at GitHub.
React Application: A simple React app you want to deploy.
Node.js and npm: Install from Node.js.

Step-by-Step Solution

Step 1 : Get the Source Code from GitHub

First, clone the repository of your React application from GitHub. If you don't have one, you can create a new React app using create-react-app and push it to GitHub.

Create a React App:

 npx create-react-app my-app
 cd my-app

Initialize Git and Push to GitHub:

 git init
 git remote add origin https://github.com/yourusername/your-repo.git
 git add .
 git commit -m "Initial commit"
 git push -u origin master

Step 2 : Set Up AWS Elastic Beanstalk

Create an Application:
- Log in to the AWS Management Console.
- Navigate to Elastic Beanstalk.
- Click on "Create Application".
- Enter the application name.
Configure the Environment:
- Choose "Web server environment".
- Select the platform as "Node.js".
- Configure other settings as needed.

Step 3 : Build the GitHub Actions Workflow

Create a .github/workflows directory in your project and add a new workflow file named deploy.yml.

Create Workflow Directory and File:

 mkdir -p .github/workflows
 touch .github/workflows/deploy.yml

Edit the Workflow File:

 name: Deploy React App to AWS Elastic Beanstalk

 on:
   push:
     branches:
       - master

 jobs:
   deploy:
     runs-on: ubuntu-latest

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

     - name: Set up Node.js
       uses: actions/setup-node@v2
       with:
         node-version: '14'

     - name: Install dependencies
       run: npm install

     - name: Build project
       run: npm run build

     - name: Deploy to Elastic Beanstalk
       env:
         AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
         AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
         AWS_REGION: us-west-2
         APPLICATION_NAME: my-app
         ENVIRONMENT_NAME: my-app-env
         S3_BUCKET: elasticbeanstalk-us-west-2-123456789012
       run: |
         zip -r deploy.zip .
         aws s3 cp deploy.zip s3://$S3_BUCKET/deploy.zip
         aws elasticbeanstalk create-application-version --application-name $APPLICATION_NAME --version-label v1 --source-bundle S3Bucket=$S3_BUCKET,S3Key=deploy.zip
         aws elasticbeanstalk update-environment --environment-name $ENVIRONMENT_NAME --version-label v1

Step 4 : Configure GitHub Secrets

To keep your AWS credentials secure, add them as secrets in your GitHub repository settings.

Add Secrets in GitHub:
- Go to your GitHub repository.
- Navigate to Settings > Secrets > New repository secret.
- Add AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY.

Step 5 : Run the Project

Every time you push changes to the master branch, GitHub Actions will automatically trigger the workflow and deploy your React app to AWS Elastic Beanstalk.

Make a Change and Push:

 echo "console.log('Deployment successful!');" >> src/index.js
 git add .
 git commit -m "Test deployment"
 git push origin master

By following these steps, you can easily set up a CI/CD pipeline to deploy your React application on AWS Elastic Beanstalk using GitHub Actions. This process not only automates the deployment but also ensures that your application is always up-to-date with the latest code changes.

Key Concepts Explained

AWS Elastic Beanstalk: A service for deploying and managing applications in the AWS cloud without worrying about the infrastructure that runs those applications.

GitHub Actions: A CI/CD service that makes it easy to automate all your software workflows, now with world-class support for CI/CD.

Continuous Integration (CI): The practice of merging all developers' working copies to a shared mainline several times a day.

Continuous Deployment (CD): A software release process where automated builds are deployed to production environments, ensuring that the latest code is always running live.

Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine that lets you build scalable network applications.

How to Deploy a React Application on AWS Elastic Beanstalk Using GitHub Actions

Table of contents

Introduction

Prerequisites

Step-by-Step Solution

Key Concepts Explained