Launching Your React App on Kubernetes: A Step-by-Step Guide

Deploying applications in the modern world of cloud computing can be complex, but tools like Docker, Kubernetes, and Minikube have made it much simpler and more efficient. This step-by-step guide will walk you through containerizing your React application with Docker and deploying it on a Kubernetes cluster using Minikube and kubectl. By the end of this tutorial, you’ll have a solid foundation on how to take your React application from development to a scalable production environment.

Setting Up Your React Application

First things first, let’s set up our project directory and create a React application using Create React App.

mkdir my-k8s-project && cd my-k8s-project
mkdir K8s && mkdir react-docker
cd react-docker
npx create-react-app .

To test your application locally, you can simply run npm start, and your app should be available at http://localhost:3000/.

Remember, you can change the default port by adding a .env file and setting a different port, like so:

PORT=3002

Once you’re happy with your development build, compile your app for production:

npm run build

This command will output static files to a build directory, ready to be served.

Dockerizing Your React Application

Before you dockerize your application, ensure you have a Docker account and are logged in. Create a Dockerfile and .dockerignore in your project’s root directory to define how your Docker image should be built.

Dockerfile:

FROM nginx:alpine
COPY build /usr/share/nginx/html

.dockerignore:

node_modules
.git
Dockerfile
.dockerignore

Build your Docker image with the following command:

docker build -t your_docker_username/react-docker .

Then, run your containerized application to ensure everything works as expected:

docker run -d -p 3000:80 your_docker_username/react-docker

Your app should now be accessible at http://localhost:3000/. Don’t forget to push your image to Docker Hub for deployment:

docker push your_docker_username/react-docker

Deploying to Kubernetes with Minikube

Start by setting up a local Kubernetes cluster with Minikube and switch to the newly created namespace:

minikube start
kubectl create namespace react-docker
kubectl config set-context --current --namespace=react-docker

Create a deployment.yaml to specify your deployment configuration:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-docker
spec:
  replicas: 2
  selector:
    matchLabels:
      app: react-docker
  template:
    metadata:
      labels:
        app: react-docker
    spec:
      containers:
      - name: react-docker
        image: your_docker_username/react-docker
        ports:
        - containerPort: 80

Deploy your application to the Kubernetes cluster:

kubectl apply -f deployment.yaml

To make your application accessible, create a service with a load-balancer.yaml and apply it:

#load-balancer.yaml

apiVersion: v1
kind: Service
metadata:
  name: load-balancer
spec:
  type: LoadBalancer
  ports:
  - port: 80
    nodePort: 31000
    targetPort: 80
  selector:
    app: react-docker

kubectl apply -f load-balancer.yaml

Find the Minikube IP with minikube ip and access your app at http://<minikube-ip>:31000/.

Scaling up and down is straightforward with kubectl:

kubectl scale deployment/react-docker --replicas=10  # Scaling up
kubectl scale deployment/react-docker --replicas=3   # Scaling down

Conclusion

By following these steps, you’ve learned how to take a React application, containerize it with Docker, and deploy it on a Kubernetes cluster using Minikube. This workflow demonstrates the power of containerization and orchestration for managing and scaling web applications efficiently.

Remember, this is just the beginning. Both Kubernetes and Docker offer a wealth of features and options to support more complex deployment scenarios and workflows. Happy deploying!