Day 87 of 90 Days of DevOps Challenge: Deploying a React Application on AWS Elastic Beanstalk Using GitHub Actions

In the modern development landscape, Continuous Integration and Continuous Deployment (CI/CD) practices are essential for streamlining application deployment. In this blog post, we will walk through the steps to deploy a React application on AWS Elastic Beanstalk using GitHub Actions, enabling a seamless and automated deployment process.

---

Project Overview

This project aims to automate the deployment of a React application hosted on AWS Elastic Beanstalk. We will leverage GitHub Actions to create a CI/CD pipeline that will automatically deploy our application whenever changes are made to the GitHub repository.

---

Key Components

1. AWS Elastic Beanstalk

AWS Elastic Beanstalk is a Platform as a Service (PaaS) that allows developers to deploy and manage applications easily. It automatically handles the deployment, from capacity provisioning and load balancing to application health monitoring.

2. GitHub Actions

GitHub Actions is a CI/CD automation tool integrated directly into GitHub, allowing developers to create workflows for building, testing, and deploying their applications automatically.

---

Implementation Steps

Step 1: Get the Source Code

1. Clone the Repository: Start by obtaining the React application code from GitHub.

    git clone <your-react-app-repo-url>
    cd <your-react-app-directory>
   

Step 2: Set Up AWS Elastic Beanstalk

1. Create an Elastic Beanstalk Environment: Log in to the AWS Management Console, navigate to Elastic Beanstalk, and create a new application. Choose the platform as "Node.js" since React applications are built on Node.js.

2. Configure Environment Settings: During the environment setup, specify the application name, environment name, and other required configurations.

3. Obtain Your AWS Access Key and Secret Key: These credentials will be used to authenticate the GitHub Actions workflow with your AWS account.

Step 3: Build the GitHub Actions Workflow

1. Create the Workflow File: In your React application directory, create a .github/workflows directory if it doesn't already exist. Inside this directory, create a new YAML file (e.g., deploy.yml).

2. Add Workflow Configuration: Edit the deploy.yml file and add the following configuration:

    name: Deploy to Elastic Beanstalk
   
    on:
      push:
        branches:
          - main  # Change to your main branch
   
    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'  # Change to your Node.js version
   
          - name: Install dependencies
            run: npm install
   
          - name: Build application
            run: npm run build
   
          - 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: <your-region>
   
          - name: Deploy to Elastic Beanstalk
            run: |
              zip -r my-app.zip build/*
              eb init <your-application-name> --region <your-region>
              eb deploy <your-environment-name>
   

   Replace <your-region>, <your-application-name>, and <your-environment-name> with your specific details.

Step 4: Configure GitHub Secrets

1. Add AWS Credentials: For security reasons, store your AWS credentials in GitHub Secrets. Go to your GitHub repository settings, then to "Secrets" and add the following secrets:

   • AWS_ACCESS_KEY_ID

   • AWS_SECRET_ACCESS_KEY

Enter your AWS access key and secret key in their respective fields.

Step 5: Push Changes and Deploy

1. Commit and Push: Commit your changes and push them to the main branch of your GitHub repository.

    git add .
    git commit -m "Set up GitHub Actions workflow for Elastic Beanstalk deployment"
    git push origin main
   

2. Check the GitHub Actions Tab: After pushing your changes, navigate to the "Actions" tab in your GitHub repository to see your workflow running. If everything is set up correctly, your React application should be deployed to AWS Elastic Beanstalk.

Step 6: Access Your React Application

1. Access the Application: Once the deployment is complete, you can access your React application through the URL provided by Elastic Beanstalk.

---

Conclusion

By following the steps outlined in this blog post, you can successfully deploy your React application on AWS Elastic Beanstalk using GitHub Actions. This project not only showcases your ability to work with cloud services but also demonstrates your proficiency in CI/CD practices. Automating the deployment process will save you time and ensure that your application is always up-to-date with the latest changes.