Autoscaling React App on Kubernetes Cluster Using HPA

In this article, we’ll dive into a hands-on project that showcases how to containerize a React Quiz application and deploy it using Docker, Kubernetes, and — most importantly — Horizontal Pod Autoscaling (HPA). Whether you’re just getting started with Kubernetes or looking to fine-tune your autoscaling setup, this guide will walk you through every step, with a special focus on scaling your deployments automatically based on real-time load.

For more details and to explore the complete project, feel free to visit the GitHub repository.

1. From React App to Docker Container

The journey begins with creating your React application. If you haven’t already, you can kickstart your project with:

npx create-react-app my-quiz-app

Once your app is ready, the next step is to containerize it. We create a Dockerfile and a .dockerignore file in the root of the project (located at React-Docker-Kubernetes/Reactquiz-Docker/) to ensure our image is lean and efficient.

Building and Running the Docker Container

Build your Docker image with:

docker build .

After building, list your images to copy the image ID:

docker images

Then, run your container:

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

Your React app should now be accessible at http://localhost:3000.

2. Deploying with Kubernetes and Minikube

With your Docker container ready, it’s time to deploy it using Kubernetes. We’ll be using Minikube to simulate a Kubernetes cluster locally. Make sure you have Minikube and kubectl installed.

Applying Kubernetes YAML Files

The Kubernetes deployment and service configurations are provided in the repository under React-Docker-Kubernetes/kubernetes files. You can apply these YAML files using:

kubectl apply -f file.yaml

Monitor your pods and services with:

kubectl get pods
kubectl get services

To access your app running in Minikube, retrieve the IP address:

minikube ip

Or, get the service URL directly:

minikube service <SERVICE_NAME> --url

3. Mastering Horizontal Pod Autoscaling (HPA)

Now, let’s talk about the star of the show — autoscaling. Kubernetes HPA allows your application to adjust the number of running pods dynamically, based on the current load. This is incredibly useful for handling fluctuating traffic patterns without manual intervention.

Setting Up the Metrics Server

Before HPA can function, Kubernetes needs a metrics server to collect resource utilization data. In our project, we apply the necessary metrics server files located in MY GitHub: React-Docker-Kubernetes/Metric files/:

kubectl apply -f <metrics_server_files.yaml>

Deploying HPA

Once the metrics server is running, we create HPA configuration files (again, provided in the repository under the Kubernetes files). Apply the HPA definitions:

kubectl apply -f file.yaml

You can verify the CPU and memory usage across your nodes:

kubectl top nodes

And check the status of your autoscaler:

kubectl get hpa

Testing Autoscaling

To simulate load and watch your pods scale automatically, use the following load generator command. Replace <hpa-demo-deployment> with the actual 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"

As the load increases, you should see Kubernetes spawning additional pods to handle the traffic. Below is a screenshot showcasing multiple pods autoscaled in action:

4. Pushing Your Docker Image to DockerHub

Finally, to make your Docker image available for deployment in any environment, push it to DockerHub:

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

You can also pull the image back when needed:

docker pull saisamarth21/reactquiz-docker

For GitHub Packages, use:

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

Conclusion

Deploying a React application using Docker and Kubernetes is a powerful way to ensure your app is both scalable and resilient. With Horizontal Pod Autoscaling in place, your deployment can adapt to traffic spikes without manual intervention, ensuring a smooth user experience even under heavy load.

I hope this guide helps you understand the ins and outs of Kubernetes autoscaling. For more details and to check out the complete setup, visit the GitHub repository.