DEV Community

Cover image for Deploying a React App on Kubernetes: A Quick Guide
Tadikonda Sai Manikanta
Tadikonda Sai Manikanta

Posted on

Deploying a React App on Kubernetes: A Quick Guide

#devops #react #kubernetes #docker

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
Enter fullscreen mode Exit fullscreen mode
  • Starting the React App


 cd client
 npm start
Enter fullscreen mode Exit fullscreen mode

Containerizing with Docker

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


cd client
Enter fullscreen mode Exit fullscreen mode
  • Create a file named Dockerfile and open it for editing.


touch Dockerfile

vim Dockerfile
Enter fullscreen mode Exit fullscreen mode
  • 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"]
Enter fullscreen mode Exit fullscreen mode
  • Building the Docker Image


docker build -t k8s-react .
Enter fullscreen mode Exit fullscreen mode
  • Testing the Docker Image Locally


docker run -p 3000:3000 k8s-react
Enter fullscreen mode Exit fullscreen mode

docker image

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
Enter fullscreen mode Exit fullscreen mode 


docker push saitadikonda99/my-react-app:latest
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Creating YAML files

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


touch deploy.yaml
Enter fullscreen mode Exit fullscreen mode 


vim deploy.yaml
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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



touch service.yaml
Enter fullscreen mode Exit fullscreen mode 


vim service.yaml
Enter fullscreen mode Exit fullscreen mode 


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

Apply the YAML file to deploy the React app to Kubernetes



kubectl apply -f deploy.yaml

kubectl apply -f service.yaml
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • To view information about nodes in the cluster, you can use


kubectl get nodes
Enter fullscreen mode Exit fullscreen mode

Accessing Minikube Dashboard

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


minikube dashboard
Enter fullscreen mode Exit fullscreen mode

k8s Image

Viewing Locally Deployed Services

  • View the Deployment


kubectl get deployments
Enter fullscreen mode Exit fullscreen mode
  • The output is similar to:


NAME        READY   UP-TO-DATE   AVAILABLE   AGE
react-app   2/2     2            2           5m25s
Enter fullscreen mode Exit fullscreen mode

  • 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
Enter fullscreen mode Exit fullscreen mode 


minikube service react-app
Enter fullscreen mode Exit fullscreen mode
  • This opens up a browser window that serves your app and shows the app's response.

k8s output

Top comments (2)

Collapse
 
navneet7716 profile image
Navneet Kumar Singh •

awesome article keep it up 👍

Collapse
 
saitadikonda99 profile image
Tadikonda Sai Manikanta •

Thank you ☺️