Deploying a React App on Kubernetes: A Quick Guide

Have you ever wondered how applications transition from basic code to containers and then onto Kubernetes? In this blog, we will delve into how that process truly works!

Tech stack and Tools

• React for building the front end
• Docker for containerization
• Kubernetes for orchestration
• kubectl for Kubernetes command-line management
• Minikube for local Kubernetes cluster setup

Setting Up the React App

• Creating React App

 npx create-react-app client

• Starting the React App

 cd client
 npm start

Containerizing with Docker

• Navigate to the client directory where your React app resides.

cd client

• Create a file named Dockerfile and open it for editing.

touch Dockerfile

vim Dockerfile

• Dockerfile Content to Create a Docker Image

# Use an official Node runtime as a base image
FROM node:14-alpine

# Set the working directory in the container
WORKDIR /usr/src/app

# Copy package.json and package-lock.json to 
# the working directory
COPY package*.json ./

# Install app dependencies
RUN npm install

# Copy the app's source code to the working directory
COPY . .

# Expose the port that the app will run on
EXPOSE 3000

# Define the command to run your app
CMD ["npm", "start"]

• Building the Docker Image

docker build -t k8s-react .

• Testing the Docker Image Locally

docker run -p 3000:3000 k8s-react

Push Docker Image to Docker Hub

• To push the Docker image to Docker Hub, tag it with your Docker Hub username and repository name, and then push it

docker tag k8s-react:latest saitadikonda99/my-react-app:latest

docker push saitadikonda99/my-react-app:latest

Deploying to Kubernetes

• To install kubectl refer the following document : Document Link

• To install minikube refer the following document : Document Link

Starting Minikube

• Start Minikube using the following command

minikube start

Creating YAML files

• Create a file named deploy.yaml and open it for editing. You can follow these commands

touch deploy.yaml

vim deploy.yaml

• Deployment Configuration for React Application in Kubernetes

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-app
spec:
  replicas: 2
  selector:
    matchLabels:
      app: react-app
  template:
    metadata:
      labels:
        app: react-app
    spec:
      containers:
        - name: react-app
          image: saitadikonda99/my-react-app:latest
          imagePullPolicy: Always
          ports:
            - containerPort: 80

Expose the deployment using a Kubernetes service. Create a service YAML file. follow the below commands

touch service.yaml

vim service.yaml

apiVersion: v1
kind: Service
metadata:
  name: react-app
spec:
  type: NodePort
  selector:
    app: react-app
  ports:
    - port: 80
      protocol: TCP
      targetPort: 80
      nodePort: 31000

Apply the YAML file to deploy the React app to Kubernetes

kubectl apply -f deploy.yaml

kubectl apply -f service.yaml

To check pods and nodes in a Kubernetes cluster and to see a locally deployed service using Minikube, follow these steps

• To list all the pods in the default namespace, you can use the command

kubectl get pods

• To view information about nodes in the cluster, you can use

kubectl get nodes

Accessing Minikube Dashboard

• To access the Minikube dashboard and check pods, run the following command

minikube dashboard

Viewing Locally Deployed Services

• View the Deployment

kubectl get deployments

• The output is similar to:

NAME        READY   UP-TO-DATE   AVAILABLE   AGE
react-app   2/2     2            2           5m25s

• By default, the Pod is only accessible by its internal IP address within the Kubernetes cluster

• Expose the Pod to the public internet using the kubectl expose command
  

kubectl expose deployment react-app --type=NodePort --port=3000

minikube service react-app

• This opens up a browser window that serves your app and shows the app's response.