Creating a CICD pipeline using GITHUB Actions for REACT application & deploying the REACT application on AWS Elastic BeanStalk

CONTENTS:

Cloning the Source Code
Installing Docker Machine
Creation of a multi-stage Docker File
Building Docker Images
Running Docker Container
Configuring ElasticBeanStalk
Configure CICD Pipeline
Triggering GitHub Actions

P.S.: Before diving into our application, kindly note that we will be using a UBUNTU OS for this project.

Cloning the Source Code

In order to get started the first step we have to clone the repository using git clone command. This will be the same directory to use till the end of our application deployment.
```
 git clone https://github.com/adip47/AWS_Elastic_BeanStalk_On_EC2.git
 cd AWS_Elastic_BeanStalk_On_EC2
```
Installing Docker File

Once the cloning of the repository is done in the next step you have to install the docker file written in shell script called as docker.sh. This file will install Docker and enable the container for you.
```
 chmod +x docker_install.sh
 sh docker_install.sh
```
Creating a multi-stage Docker File

Now, this is a bit complicated step. In order to get your application running, we need the REACT application and node needs to be installed in the background. In the next step we also need nginx to serve the requests through which users can access the application.

So the Docker file will be created as
```
 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
```
Now what does this code snippet tell us?

The Docker file can be split into 2 stages. In the first stage the official nodejs 14 alpine image is used to build the application using npm. In the second stage the NGINX image is used to serve the application on port 80.
Building Docker Image

Use the following command to build docker image from the above docker file.
```
 sudo docker build -t <provide_image_name>
```
Running the Docker Container

You can use the following command to run the docker container
```
 sudo docker run -d -p 80:80 <image_name>
```
Now in order to check the status of docker container use the following command
```
 docker ps
```
Configure ElasticBeanStalk

Now go to AWS console and in that go to BeanStalk and create any application in any configuration as you want.

Configuring CICD Pipeline

Make sure to add the comments

 sudo mkdir -p .github/workflows
 cd .github/workflows
 sudo cp <file_path>/deploy-react.yaml

Trigger Github Actions

Create a repository in GitHub and Push all the codes under the "AWS_Elastic_BeanStalk_On_EC2" folder to the "main" branch.

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

And now finally you can check for your ElasticBeanStalk , you will see the application been created.