Scaling Micro UI with Next.js, TypeScript, and Kubernetes (Part 2)

In Part 1, we built a Micro UI architecture using Next.js and TypeScript with session-based authentication powered by a Node.js API. While this approach works well for small applications, deploying and managing multiple Micro UI services manually becomes challenging as the system grows.

In this post, we'll explore how to containerize and deploy our Micro UI applications on Kubernetes for scalability, high availability, and easy management.

Why Kubernetes for Micro UI?

As Micro UI applications grow, we need a way to efficiently orchestrate, scale, and manage independent UI services. Kubernetes provides:

✅ Scalability – Auto-scaling based on traffic.
✅ Self-healing – Automatically restarts failed containers.
✅ Load balancing – Distributes traffic efficiently.
✅ Rolling updates – Deploy new versions with zero downtime.
✅ Decoupled architecture – Micro UIs remain independent but integrated.

We’ll use Docker to containerize our apps and Kubernetes (K8s) to orchestrate them.

Step 1: Containerizing the Micro UI and Backend

1.1 Dockerizing the Main App (Next.js)

Inside apps/main-app/, create a Dockerfile:

# Use official Node.js image
FROM node:18-alpine

# Set working directory
WORKDIR /app

# Copy package files
COPY package.json package-lock.json ./

# Install dependencies
RUN npm install

# Copy the rest of the app
COPY . .

# Build Next.js app
RUN npm run build

# Expose port 3000
EXPOSE 3000

# Start the application
CMD ["npm", "run", "start"]

1.2 Dockerizing the Authentication Service (Node.js API)

Inside backend/auth-service/, create a Dockerfile:

FROM node:18-alpine

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm install

COPY . .

EXPOSE 5000

CMD ["node", "server.js"]

1.3 Creating a .dockerignore File

To keep our Docker images small, add this in both main-app/ and auth-service/ directories:

node_modules
npm-debug.log
.next

1.4 Building and Running the Containers Locally

# Build images
docker build -t main-app ./apps/main-app
docker build -t auth-service ./backend/auth-service

# Run containers
docker run -p 3000:3000 main-app
docker run -p 5000:5000 auth-service

At this point, both services are running inside Docker containers.

Step 2: Deploying to Kubernetes

2.1 Setting Up Kubernetes Locally (Minikube)

To test Kubernetes locally, install Minikube:

minikube start

2.2 Creating Kubernetes Deployments and Services

Inside k8s/, create YAML files for deploying each service.

Deployment for Main App (Next.js)

Create main-app-deployment.yaml:

yamlCopyEdit

apiVersion: apps/v1
kind: Deployment
metadata:
  name: main-app
spec:
  replicas: 2
  selector:
    matchLabels:
      app: main-app
  template:
    metadata:
      labels:
        app: main-app
    spec:
      containers:
        - name: main-app
          image: main-app:latest
          ports:
            - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: main-app-service
spec:
  selector:
    app: main-app
  ports:
    - protocol: TCP
      port: 3000
      targetPort: 3000
  type: LoadBalancer

Deployment for Authentication Service

Create auth-service-deployment.yaml:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: auth-service
spec:
  replicas: 2
  selector:
    matchLabels:
      app: auth-service
  template:
    metadata:
      labels:
        app: auth-service
    spec:
      containers:
        - name: auth-service
          image: auth-service:latest
          ports:
            - containerPort: 5000
---
apiVersion: v1
kind: Service
metadata:
  name: auth-service-service
spec:
  selector:
    app: auth-service
  ports:
    - protocol: TCP
      port: 5000
      targetPort: 5000
  type: ClusterIP

2.3 Deploying to Kubernetes

kubectl apply -f k8s/main-app-deployment.yaml
kubectl apply -f k8s/auth-service-deployment.yaml

Check the status:

kubectl get pods
kubectl get services

If using Minikube, expose the services:

minikube service main-app-service

Step 3: Scaling Micro UI Components

With Kubernetes, we can scale services easily:

kubectl scale deployment main-app --replicas=4
kubectl scale deployment auth-service --replicas=3

kubectl get pods

Kubernetes automatically distributes traffic across replicas, improving availability and performance.

Step 4: CI/CD Pipeline with GitHub Actions

To automate deployment, add this GitHub Actions workflow (.github/workflows/deploy.yml):

name: Deploy to Kubernetes

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Build Docker images
        run: |
          docker build -t main-app ./apps/main-app
          docker build -t auth-service ./backend/auth-service

      - name: Push to Docker Hub
        run: |
          docker tag main-app mydockerhub/main-app:latest
          docker tag auth-service mydockerhub/auth-service:latest
          docker push mydockerhub/main-app:latest
          docker push mydockerhub/auth-service:latest

      - name: Apply Kubernetes Configs
        run: |
          kubectl apply -f k8s/main-app-deployment.yaml
          kubectl apply -f k8s/auth-service-deployment.yaml

This automates building, pushing, and deploying new versions to Kubernetes.

Conclusion

✅ We containerized our Micro UI apps using Docker.
✅ We deployed them to Kubernetes for scalability and reliability.
✅ We implemented CI/CD to automate deployments.

Next Steps

Implement Ingress with Nginx for better routing.
Use Helm charts for managing K8s configurations.
Deploy to Google Kubernetes Engine (GKE) or AWS EKS for production readiness.