React App Deployment with Docker, Kubernetes, and HPA for Autoscaling

This repository contains the steps to create, containerize, and deploy a React Quiz application using Docker, Kubernetes, and HPA for autoscaling

Prerequisites

• Docker installed on your machine
• Minikube installed for Kubernetes
• kubectl installed for managing Kubernetes clusters

Steps to Deploy the React App

1. Create a React App

Create a new React application using the following command:

npx create-react-app my-quiz-app

2. Dockerize the React App

i) Install Docker

Download and install Docker from the Docker website.

ii) Create a Dockerfile in the App Directory

Create a Dockerfile in the root directory of your React app: React-Docker-Kubernetes/Reactquiz-Docker/dockerfile

iii) Create a .dockerignore File

Create a .dockerignore file in the root directory of your React app: React-Docker-Kubernetes/Reactquiz-Docker/.dockerignore

iv) Build and Run the Docker Container

Use the following commands to build and run your Docker container:

Build the Docker image

docker build .

List Docker images and copy the image ID

docker images

Run the Docker container (replace with the actual image ID)

docker run -p 3000:3000 <image-id>

You can now access your React app in the browser at http://localhost:3000.

3. Set Up Kubernetes with Minikube

i) Install Minikube and kubectl

Download and install Minikube from the Minikube website.

Download and install kubectl from the Kubernetes website.

4. Deploy to Kubernetes

i) Create Kubernetes YAML Files

React-Docker-Kubernetes /kubernetes files

Use the following commands to apply the YAML files and manage your Kubernetes resources:

Apply the YAML files

kubectl apply -f file.yaml

List the pods

kubectl get pods

List the services

kubectl get services

Get the Minikube IP address

minikube ip

Get URL

minikube service <SERVICE_NAME> --url

Delete all pods

kubectl delete pods --all

Access your app in the browser using the Minikube IP address and the port number from the service.

ii) Set Up Horizontal Pod Autoscaling

To use autoscaling, you need to apply the metrics server. Navigate to the metrics_server directory and apply all files: React-Docker-Kubernetes/Metric files/

kubectl apply -f 

Create the HPA (Horizontal Pod Autoscaler) YAML files.

React-Docker-Kubernetes /kubernetes files

Apply the YAML files

kubectl apply -f file.yaml

Check CPU and memory utilization

kubectl top nodes

List the HPA resources

kubectl get hpa

Generate load to test autoscaling (replace with your deployment name)

kubectl run -i --tty load-generator --rm --image=busybox --restart=Never -- /bin/sh -c "while sleep 0.01; do wget -q -O- http://<hpa-demo-deployment>; done"

5. Push Docker Image to DockerHub

Push the Docker image to DockerHub

docker push <docker-username>/<app-name>

Pull the Docker image from DockerHub

docker pull saisamarth21/reactquiz-docker

Pull the Docker image from GitHub Packages

docker pull ghcr.io/saisamarth21/react-docker:latest