Day 79: Project-8 (AWS EBS & GitHub Actions)

Introduction

This project revolves around deploying a React application on Amazon Web Services' Elastic BeanStalk, a fully managed Platform as a Service (PaaS) that simplifies the deployment and management of web applications.

Using GitHub Actions, you can perform Continuous Integration and Continuous Deployment (CI/CD) with your GitHub repository at the helm.

By harnessing the combined capabilities of AWS Elastic BeanStalk and GitHub Actions, this project is designed to showcase a streamlined development and deployment process for the React application. This automation ensures that changes and updates in your codebase are effortlessly propagated to your Elastic BeanStalk-hosted application, enhancing development efficiency and deployment agility.

What is AWS Elastic Beanstalk?

Amazon Elastic Beanstalk is a Platform as a Service (PaaS) offered by Amazon Web Services (AWS) that simplifies the deployment and management of applications. It is designed to make it easier for developers to quickly deploy and scale web applications and services.

In short, this tool abstracts the underlying infrastructure, automates many tasks, and provides an easy way to deploy, monitor, and scale applications, allowing developers to focus on writing code rather than managing infrastructure.

Task-01

• Get source code from GitHub.

• Setup AWS Elastic BeanStalk

• Build the GitHub Actions Workflow

To deploy a React app on AWS EBS using GitHub Actions, you can set up a workflow that automates the build and deployment process.

Here are the general steps to achieve this:

Step 1: Setup AWS Elastic BeanStalk

Log in to your AWS Management Console.

In the AWS dashboard, navigate to "Services" and select "Elastic Beanstalk" under "Compute."

Click on "Create Application" to set up your Elastic Beanstalk application.

Now Configure the environment by clicking on "Create new Environment"

Select a platform for your application. In this case, we will use Docker.

Choose a preconfigured platform branch & version. Click "Next"

Next, Configure service access as mentioned in the below screenshot.

Create a new service role OR use an existing one.

The service role- "aws-elasticbeanstalk-service-role" should contain the below permissions:

AWSElasticBeanstalkEnhancedHealth

AWSElasticBeanstalkManagedUpdatesCustomerRolePolicy

The EC2 instance profile should have the below permissions via role- "EC2-EBS-role"

AdministratorAccess-AWSElasticBeanstalk

AWSElasticBeanstalkMulticontainerDocker

AWSElasticBeanstalkWebTier

AWSElasticBeanstalkWorkerTier

then click "Next"

For more info, refer to my blog on how to provision IAM permissions- Day 49: Identity & Access Management

You will be directed to set networking, database and tags (optional)

Select default VPC

Select the Instance Subnets and click "Next"

You will be directed to "Configure instance traffic and scaling"

Default values are pre-filled, scroll down and select "default" under EC2 security groups

Select the instance type t2.medium ONLY and click on "Next"

You will be directed to "Configure updates, monitoring, and logging"

This can be configured or leave it with default values as it is optional and click "Next"

Review the settings, confirm, and then click "Submit."

Click on Submit

Elastic Beanstalk will create environment and may take a while.

Health- OK

Click on the Domain URL and this will redirect to the Sample app.

Also, refer to the EC2 instance created

Step 2: Configure IAM access keys in GitHub Repo

Create a user- "IAM-for-EBS" in IAM and assign the below roles:

AmazonS3ReadOnlyAccess

AWSElasticBeanstalkReadOnly

AdministratorAccess-AWSElasticBeanstalk

Generate Access keys and download the .csv file

Go to the GitHub repository containing the source code of your React application.

Go to Settings --> Secrets and variable --> Actions and save the Access keys that we created earlier for the user "IAM-for-EBS"

Step 3: Build the GitHub Actions Workflow

In your GitHub repository, create a .github/workflows directory if it doesn't exist.

Inside the .github/workflows directory, create a YAML file (e.g., main.yml or deploy-react.yaml) to define your GitHub Actions workflow.

Define the workflow, specifying when it should trigger (e.g., on pushes to a specific branch).

Customize these steps based on your project's requirements. Make sure to include steps for authentication and deployment to AWS Elastic Beanstalk.

name : Deploy react application in BeanStalk
on :
    push:
        branches:
            - "master"
jobs:
    deploy: 
        runs-on: ubuntu-latest
        steps:
        - name: Checkout source code
          uses: actions/checkout@v1

        - 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.ACCESS_KEY_ID }}
            aws_secret_key: ${{ secrets.SECRET_ACCESS_KEY }}
            application_name: React1
            environment_name: React1-env
            version_label: ${{ github.sha }}
            existing_bucket_name: S3bucket-name-created-by-EBS
            region: us-east-1
            deployment_package: deploy.zip
            use_existing_version_if_available: "true"

Step 4: Make changes in GitHub

You can either clone to local, amend files, commit & push the changes to .github/workflows/deploy-react.yaml file to your GitHub repository.

OR

Simply make a change in the GitHub repository itself, and the deployment will start.

Go to "Actions" --> "All workflows" and click on the latest deployment

Click on "deploy"

The deployment is in progress.

At the same time in AWS-EBS check the "Events" tab.

You will see GitHub Actions and AWS EBS are in a synchronization state

After a while, the job is completed in GitHub Actions

The same will be reflected in AWS EBS events

Click on the Domain

The React App has been deployed successfully.

With these steps, your GitHub Actions workflow will automatically build and deploy your React application to AWS Elastic Beanstalk whenever you push changes to the specified branch. Make sure to configure AWS credentials and the Elastic Beanstalk deployment steps in your workflow as needed.

Conclusion:

In summary, this project demonstrates a streamlined React application deployment process using AWS Elastic Beanstalk and GitHub Actions. AWS Elastic Beanstalk simplifies application management, while GitHub Actions automates deployment. The combination ensures efficient code updates to Elastic Beanstalk-hosted apps, allowing developers to focus on coding.

Hope you like my post. Don't forget to like, comment, and share.