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.

Step 1: Clone the source code

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

• We shall only work in the same directory for the duration of this project. The reason you will understand at last stage.

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

Step 2 : Install docker

• After cloning the code, do ll or ls and you will find a shell-script called docker_install.shto 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

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

• Now, let's understand the requirement first. We require 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.

• Write a Dockerfile with the following code:

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

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 <provide_image_name> .

Step 5: Running Docker Container

sudo docker run -d -p 80:80 <image_name>

• Check running docker container with docker ps command.

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

Step 6 : Configure Elastic BeanStalk

• Go to the AWS Elastic BeanStalk Service.

• Click on "Create Application"

• Provide the details such as Name = "<Any name>", Platform = "Docker", and select "Sample Application", "Next". Sample application is nothing but a basic application, provided by AWS, which is a very basic application to test our flow; and later we can modify it accordingly and give our code.

• Create an IAM role by clicking View permission for this application by choosing permission details are AWSElasticBeanstalkWebTier, AWSElasticBeanstalkWorkerTier, AWSElasticBeanstalkMulticontainerDocker.

• Come back to AWS Elasticbeanstalk page and do refresh in Configure service access select your role and click on Next and scroll down and click on Skip to review and click on Submit.

• It will take some time ( nearly 5 min )⏰ You can relax and have some water🥤 till it finishes.

• You can see that it's also establishing an environment for the application in the environment section.

• All right !! 🎉 Your environment is Up now. The sample application is deployed on Docker.

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

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

It should look like this.

Step 7: Configure CI/CD pipeline with GitHub Actions

• Open your AWS management console and create and IAM User and add some some permission and create Security credentials

• Now come to your AWS_Elastic_BeanStalk_On_EC2 repository and click on settings and goto secrets and variables and click on action there create New repository secrets as ACCESS_KEY and SECRET_ACCESS_KEY and past your credentials.

• Now in your repository goto action and click on New workflow and click on set up a workflow yourself and copy this code and click on commit changes

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.ACCESS_KEY }}
            aws_secret_key: ${{ secrets.SECRET_ACCESS_KEY }}
            application_name: react-app-elasticbeanstalk
            environment_name: React-app-elasticbeanstalk-env
            version_label: ${{ github.sha }}
            region: us-east-1
            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.

---

Happy Learning

Thanks For Reading! :)

-SriParthu💝💥