Project Description

The project involves deploying a react application on AWS Elastic BeanStalk using GitHub Actions. Git Hub actions allows you to perform CICD with GitHub Repository integrated.

Prerequisites ✅

Before we dive into the deployment process, make sure you have the following prerequisites:

• An AWS account with Elastic Beanstalk access.

• A GitHub repository with the application code.

• Basic knowledge of Git, Docker, and AWS services.

Step 1: Clone the source code

If you are using Ubuntu Machine, Git will be pre-installed. Clone the repository by using the 'git clone' command and move into there.

We will do all our work under the same directory only. The reason you will understand at the last stage.

git clone https://github.com/nahidkishore/React-App-EBS-project.git
cd React-App-EBS-project

Step 2: Install Docker

After cloning the code, do ll or ls and you will find a shell script called docker_install.sh to install and enable docker for you. To run the code, you must first make it executable.

Run the commands listed below, then wait until Docker is installed and running for you automatically. 😁

chmod +x docker_install.sh

sh docker_install.sh

(Try sudo if you face any errors)

Step 3: Create a Multi-Stage Dockerfile for our application

Now, let's understand the requirement first. We require the node to be installed and running in the background in order to run the react application. Also, we will need nginx to serve the requests which will help us to access the application after deploying in EB.

Let's create a multi-stage docker file accordingly.

FROM node:18-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

Explanation :

This Dockerfile has two stages. The first stage builds a web application with NPM using the official Node.js 14 Alpine image. The second stage serves the constructed web application on port 80 using the official NGINX image. The built application files from the first stage are copied to the second stage, which is the final image, that can be used to run the web application in a Docker container.

Step 4: Building Docker Image

Now it's time to build Docker Image from this Dockerfile. To create the Docker image, run the command below.

sudo docker build . -t react-ebs-app

Step 5: Running Docker Container

You can use the following command to run the docker container

sudo docker run -d -p 80:80 <image_name>
sudo docker run -d -p 80:80 react-ebs-app

Now in order to check the status of the docker container use the following command

sudo docker ps

Utilizing ec2 public_ip on port 80, you can also confirm that the application is active.

Testing Your Application on EC2 Instance

Open your web browser and navigate to the public IP of your EC2 instance. You should see our application running smoothly and ready to play! 🎉

Step-6: Configuring AWS Elastic Beanstalk Environment

Before we deploy our application to AWS Elastic Beanstalk, we need to configure the Elastic Beanstalk environment to run our application smoothly. Follow these steps to set up the environment:

1. Login to AWS Console: Sign in to your AWS Management Console using your AWS account credentials.

2. Navigate to Elastic Beanstalk: Once logged in, navigate to the AWS Elastic Beanstalk service by clicking on "Services" in the top navigation bar, then selecting "Elastic Beanstalk" under the "Compute" section.

Before creating a new Environment, you need to create iam role for AWS-elastic beanstalk.

I have created, how? you have to go to IAM > Role:

Then you hit the blue button, then select EC2 and go to 2nd step:

Now you have to choose the permissions. At this moment the only permissions are: AWSElasticBeanstalkWebTier, AWSElasticBeanstalkWorkerTier and AWSElasticBeanstalkMulticontainerDocker

When you create this role it's gonna create automatically the instance profile need in the 2nd step of EBS creation.

Role name: ec2-ebs-role-nahid

Permission policies attached:-

• AWSElasticBeanstalkWebTier

• AWSElasticBeanstalkWorkerTier

• AWSElasticBeanstalkMulticontainerDocker

No click on the "Create environment" button to create a new environment for your application.

Create an Environment: After creating the application, click on the "Create environment" button to create a new environment for your application.

• Environment Type: Choose "Web server environment" to create an environment with a load balancer.

• Base Configuration: Select "Docker" as the platform and choose the appropriate Docker version.

• Upload Your Code: click on the sample application

• Environment Information: Provide a unique and descriptive name for your environment, such as "React-app."

• Instance Type: Choose an instance type that suits your application's requirements. For testing purposes, you can select the default instance type.

• Security: Configure the security settings based on your project requirements. You can use the default settings for testing purposes.

• Additional Configuration: Optionally, you can configure additional settings like scaling options, environment variables, and more based on your application's needs.

• Create Environment: Click on the "Create environment" button to create the environment.

Wait for Environment Creation: AWS Elastic Beanstalk will now start creating the environment for your application. This process may take a few minutes to complete.

Once the environment is successfully created, you'll see the status as "Ready" in the Elastic Beanstalk dashboard.

Your environment is Up now. The sample application is deployed on NodeJS

AWS EB will continuously monitor our environment and show us the status. As of now, it's HEALTHY.

To access the sample application, click on the link shown above the "Application name".

It should look like this.

Congratulations! 🎉 You have successfully configured your AWS Elastic Beanstalk environment to run the demo application.

This shows the power of the Elastic Beanstalk platform, by removing the complexity of infrastructure provisioning for Developers. In several minutes you can launch a fully functioning React app with a dedicated domain name.

Now, we're all set to deploy the application using GitHub Actions.

In the next steps, we'll continue with the deployment using GitHub Actions. We'll create the necessary GitHub Actions workflow that automatically triggers the deployment process whenever changes are pushed to the main branch of your GitHub repository. Let's proceed with the final steps!

Step-7: Configure CI/CD pipeline with GitHub Actions

For CI/CD, we will be using GitHub Actions here.

Make sure to check/update the code on these parameters: '\ Branch Name\**,* \Application Name*,\*** Environment Name***,\*** AWS Access Key***,\*** AWS Secret Access Key, \ Existing S3 Bucket name***,\*** Region'**.\

✔️In which branch do you want to configure the hook, you can mention that in my code, it's "main".
✔️For added security, we have used GitHub Secrets as it is recommended not to put direct credentials on code. You can also put your secrets openly in code.
✔️Application name and Env Name you can get from EB console.

✔️While deploying, EB will automatically provision an s3 bucket to save artifacts. You can check the s3 name and update accordingly.

Also, make sure the same user (of which you have given the access key details) has amazon s3 full access permission. You can check in IAM for this.

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-ebs
            environment_name: React-app-ebs-env
            version_label: ${{ github.sha }}
            existing_bucket_name: elasticbeanstalk-us-east-1-145864334062
            region: us-east-1
            deployment_package: deploy.zip
            use_existing_version_if_available: true

Step-8: Adding secrets to GitHub Actions

Add the AWS access key and secret access key here.

Note: Make sure the secret "Name" is the same both in GitHub as well as in the GitHub action file.

Step-9: Trigger GitHub Action CI/CD

🎯Create a repository in GitHub and Push all the codes under the "React-App-EBS-project" folder to the "main" branch.

As we have configured our GitHub Actions to automatically triggers as soon someone "push" es any commit "on" the "main" branch, so this will automatically trigger.

Note: If you don't want an automatic trigger and want to trigger it manually, you can add a workflow_dispatch event trigger to your workflow file, and remove the push event trigger. The workflow_dispatch event allows you to manually trigger the workflow from the GitHub UI.

Congratulations on successfully finishing your CI/CD process with GitHub Actions and deploying your React application to AWS Elastic Beanstalk!

Thank you for reading this blog. If you found this blog helpful, please like, share, and follow me for more blog posts like this in the future.

— Happy Learning !!!

Let’s connect !!!

Linkedin

Medium

Github

Mail