Introduction

In the realm of modern software development, deploying web applications requires a strategic approach that ensures reliability, scalability, and ease of management. One such approach that has gained widespread recognition is deploying React-NodeJS applications using Kubernetes.

Let’s embark on this exhilarating journey! 🚀

In our previous adventure, we set sail into the world of Dockerizing React and NodeJS applications. Today, we’ll pick up where we left off with that very application. Our mission? Crafting container images and hoisting them onto Docker Hub. After all, before we embark on the grand journey of deployment, we need our trusty Docker images to lead the way. Let’s navigate through this crucial phase together!🚢💫

Embarking on our quest to share these valiant images with the world, let’s follow this treasure map:

🗺️ Step 1

First, journey to the repository at https://github.com/Saurabh-DevOpsVoyager77/simple-crud-app-react-nodejs.git and claim your copy by cloning it. Remember to keep your location in sync with your mission — frontend or backend.

⚙️ Step 2

Once you’ve reached the heart of your chosen domain, it’s time to forge the image. For the frontend, wield the command:

docker build -t frontend-image .

🔧 Step 3

The backend, too, deserves its armor. Arm it with:

docker build -t backend-image .

🌐 Step 4

To set sail for Docker Hub, your credentials are your key to the gate. Execute: docker login

If you're a newcomer, you'll need to fashion your Docker Hub account.

🏷️ Step 5

Now, time to bestow names upon your creations and present them to the world. Brand them with your chosen tag:

docker tag frontend-image <your-desired-tag>

docker tag backend-image <your-desired-tag>

🚀 Step 6

The final leg of the journey takes you to the lofty heights of Docker Hub. Raise your images to the clouds:

docker push <your-desired-tag> (Use the same tag as for the frontend)

docker push <your-desired-tag> (Use the same tag as for the backend)

With your images now gracefully resting in the harbor of Docker Hub, the stage is set for our grand adventure: deploying React-NodeJS applications with Kubernetes. Let’s embark on this epic quest together! 🚀🌌

Time to fire up the engines and ignite this Kubernetes adventure

🌟 Step 1

Begin your journey by installing Minikube and invoking it with the magic phrase minikube start.

📂 Step 2

Crafting the blueprint for your application empire, we’ll need to fashion several key documents:

• frontend-deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend-deployment
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
        - name: frontend
          image: nacromancer858/frontend-crud-v4
          ports:
            - containerPort: 80

• frontend-service.yaml

apiVersion: v1
kind: Service
metadata:
  name: frontend-service
spec:
  selector:
    app: frontend
  type: NodePort
  ports:
  - port: 80
    targetPort: 80
    nodePort: 30177

• backend-deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend-deployment
spec:
  replicas: 1
  selector:
    matchLabels:
      app: backend
  template:
    metadata:
      labels:
        app: backend
    spec:
      containers:
        - name: backend
          image: nacromancer858/backend-crud-v2
          ports:
            - containerPort: 3333
          volumeMounts:
            - name: backend-storage
              mountPath: /data
      volumes:
        - name: backend-storage
          persistentVolumeClaim:
            claimName: backend-pvc

• backend-service.yaml

apiVersion: v1
kind: Service
metadata:
  name: backend-service
spec:
  selector:
    app: backend
  type: NodePort
  ports:
  - port: 3333
    targetPort: 3333
    nodePort: 32080

• backend-pvc.yaml

apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: backend-pvc
spec:
  accessModes:
    - ReadWriteOnce  # Access mode for the volume
  resources:
    requests:
      storage: 1Gi  # Storage size requested for the volume

🔮 Step 3

Now, with your spell book in hand, cast the incantations:

kubectl apply -f frontend-deployment.yaml

kubectl apply -f frontend-service.yaml

kubectl apply -f backend-deployment.yaml

kubectl apply -f backend-service.yaml

kubectl apply -f backend-pvc.yaml

🚪 Step 4

The gates are open, and your applications await. To behold your frontend creation, invoke:

minikube service frontend-service

🔗 Step 5

For the gateway to your backend realm, the magic chant is:

minikube service backend-service

🌐 This command conjures a portal to your creations in a web browser, where your frontend and backend applications may rendezvous. You’ve successfully unfurled the banner of deployment and interconnected your applications. The Kubernetes realm awaits your exploration! 🚀🌆

Unlock the treasure chest of code in the repository below! 📦🗝️

Saurabh-DevOpsVoyager77/Deployment_with_K8s-React_NodeJs_Application (github.com)

In conclusion, we’ve journeyed from code to the cloud, mastering the art of deploying React-NodeJS apps with Kubernetes. Now, equipped with these skills, you’re poised for endless software adventures. So, set sail and code your dreams into reality! 🌟⛵💻