Kubernetes Deployment for Scalable React Apps

Deploying React applications on Kubernetes provides robust scalability, high availability, and efficient resource management. Here’s a comprehensive guide to production-grade Kubernetes deployment for React apps:

Core Deployment Configuration

1. Basic Deployment Manifest

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-app
  labels:
    app: react-app
spec:
  replicas: 3
  strategy:
    rollingUpdate:
      maxSurge: 1
      maxUnavailable: 0
    type: RollingUpdate
  selector:
    matchLabels:
      app: react-app
  template:
    metadata:
      labels:
        app: react-app
    spec:
      containers:
      - name: react-app
        image: your-registry/react-app:1.0.0
        imagePullPolicy: IfNotPresent
        ports:
        - containerPort: 80
        resources:
          requests:
            cpu: "100m"
            memory: "128Mi"
          limits:
            cpu: "200m"
            memory: "256Mi"
        livenessProbe:
          httpGet:
            path: /
            port: 80
          initialDelaySeconds: 5
          periodSeconds: 10
        readinessProbe:
          httpGet:
            path: /
            port: 80
          initialDelaySeconds: 2
          periodSeconds: 5

2. Service Exposure

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

Advanced Scaling Configurations

1. Horizontal Pod Autoscaler (HPA)

apiVersion: autoscaling/v2
kind: HorizontalPodAutoscaler
metadata:
  name: react-app-hpa
spec:
  scaleTargetRef:
    apiVersion: apps/v1
    kind: Deployment
    name: react-app
  minReplicas: 2
  maxReplicas: 10
  metrics:
  - type: Resource
    resource:
      name: cpu
      target:
        type: Utilization
        averageUtilization: 60

2. Cluster Autoscaler Integration

# Node selector for optimized scaling
spec:
  template:
    spec:
      nodeSelector:
        kubernetes.io/instance-type: c5.large
      tolerations:
      - key: "app"
        operator: "Equal"
        value: "react-app"
        effect: "NoSchedule"

Production-Grade Features

1. Ingress with TLS Termination

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: react-app-ingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
    cert-manager.io/cluster-issuer: letsencrypt-prod
spec:
  tls:
  - hosts:
    - yourdomain.com
    secretName: react-app-tls
  rules:
  - host: yourdomain.com
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: react-app
            port:
              number: 80

2. ConfigMap for Environment Variables

apiVersion: v1
kind: ConfigMap
metadata:
  name: react-app-config
data:
  REACT_APP_API_URL: "https://api.yourdomain.com"
  REACT_APP_ENVIRONMENT: "production"
  REACT_APP_GA_TRACKING_ID: "UA-XXXXX-Y"

CI/CD Pipeline Integration

1. GitOps with ArgoCD

apiVersion: argoproj.io/v1alpha1
kind: Application
metadata:
  name: react-app
spec:
  destination:
    server: https://kubernetes.default.svc
    namespace: production
  source:
    repoURL: https://github.com/yourorg/react-app-manifests.git
    path: k8s/production
    targetRevision: HEAD
    helm:
      valueFiles:
      - values.yaml
  syncPolicy:
    automated:
      prune: true
      selfHeal: true
    syncOptions:
    - CreateNamespace=true

2. Canary Deployment Strategy

apiVersion: flagger.app/v1beta1
kind: Canary
metadata:
  name: react-app
spec:
  targetRef:
    apiVersion: apps/v1
    kind: Deployment
    name: react-app
  service:
    port: 80
  analysis:
    interval: 1m
    threshold: 5
    maxWeight: 50
    stepWeight: 10
    metrics:
    - name: request-success-rate
      thresholdRange:
        min: 99
      interval: 1m
    - name: latency
      threshold: 500
      interval: 30s

Monitoring and Observability

1. Prometheus Monitoring

apiVersion: monitoring.coreos.com/v1
kind: ServiceMonitor
metadata:
  name: react-app-monitor
  labels:
    release: prometheus-operator
spec:
  selector:
    matchLabels:
      app: react-app
  endpoints:
  - port: web
    interval: 30s
    path: /metrics

2. Distributed Tracing

# OpenTelemetry sidecar injection
spec:
  template:
    metadata:
      annotations:
        instrumentation.opentelemetry.io/inject-javascript: "true"
    spec:
      containers:
      - name: opentelemetry-auto-instrumentation
        image: ghcr.io/open-telemetry/opentelemetry-js-autoinstrumentation-node:0.29.0
        env:
        - name: OTEL_SERVICE_NAME
          value: "react-app"
        - name: OTEL_EXPORTER_OTLP_ENDPOINT
          value: "http://otel-collector:4317"

Security Best Practices

1. Network Policies

apiVersion: networking.k8s.io/v1
kind: NetworkPolicy
metadata:
  name: react-app-policy
spec:
  podSelector:
    matchLabels:
      app: react-app
  policyTypes:
  - Ingress
  - Egress
  ingress:
  - from:
    - namespaceSelector:
        matchLabels:
          name: ingress-nginx
    ports:
    - protocol: TCP
      port: 80
  egress:
  - to:
    - namespaceSelector:
        matchLabels:
          name: monitoring
    ports:
    - protocol: TCP
      port: 4317

2. Pod Security Standards

apiVersion: policy/v1beta1
kind: PodSecurityPolicy
metadata:
  name: react-app-psp
spec:
  privileged: false
  allowPrivilegeEscalation: false
  requiredDropCapabilities:
    - ALL
  volumes:
    - 'configMap'
    - 'emptyDir'
    - 'projected'
    - 'secret'
    - 'downwardAPI'
    - 'persistentVolumeClaim'
  hostNetwork: false
  hostIPC: false
  hostPID: false
  runAsUser:
    rule: 'MustRunAsNonRoot'
  seLinux:
    rule: 'RunAsAny'
  supplementalGroups:
    rule: 'MustRunAs'
    ranges:
      - min: 1
        max: 65535
  fsGroup:
    rule: 'MustRunAs'
    ranges:
      - min: 1
        max: 65535

Performance Optimization

1. Resource Quality of Service

spec:
  template:
    spec:
      containers:
      - name: react-app
        resources:
          requests:
            cpu: "100m"
            memory: "128Mi"
          limits:
            cpu: "500m"
            memory: "512Mi"

2. Pod Topology Spread Constraints

spec:
  template:
    spec:
      topologySpreadConstraints:
      - maxSkew: 1
        topologyKey: topology.kubernetes.io/zone
        whenUnsatisfiable: ScheduleAnyway
        labelSelector:
          matchLabels:
            app: react-app

Deployment Strategies Comparison

Strategy	Description	Best For
Rolling Update	Gradually replaces old pods with new ones	Zero-downtime updates
Blue-Green	Maintains two identical environments	Critical production systems
Canary	Slowly rolls out changes to a subset	Testing new features
A/B Testing	Routes traffic based on rules	Feature experimentation

Complete Production Example

# react-app-production.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: react-app
  template:
    metadata:
      labels:
        app: react-app
      annotations:
        prometheus.io/scrape: "true"
        prometheus.io/port: "80"
    spec:
      securityContext:
        runAsNonRoot: true
        runAsUser: 1000
        fsGroup: 2000
      containers:
      - name: react-app
        image: your-registry/react-app:1.2.0
        ports:
        - containerPort: 80
        envFrom:
        - configMapRef:
            name: react-app-config
        - secretRef:
            name: react-app-secrets
        resources:
          requests:
            cpu: "100m"
            memory: "128Mi"
          limits:
            cpu: "200m"
            memory: "256Mi"
        livenessProbe:
          httpGet:
            path: /healthz
            port: 80
          initialDelaySeconds: 30
          periodSeconds: 10
        readinessProbe:
          httpGet:
            path: /ready
            port: 80
          initialDelaySeconds: 5
          periodSeconds: 5
      affinity:
        podAntiAffinity:
          preferredDuringSchedulingIgnoredDuringExecution:
          - weight: 100
            podAffinityTerm:
              labelSelector:
                matchExpressions:
                - key: app
                  operator: In
                  values:
                  - react-app
              topologyKey: kubernetes.io/hostname
---
apiVersion: autoscaling/v2
kind: HorizontalPodAutoscaler
metadata:
  name: react-app-hpa
spec:
  scaleTargetRef:
    apiVersion: apps/v1
    kind: Deployment
    name: react-app
  minReplicas: 2
  maxReplicas: 10
  metrics:
  - type: Resource
    resource:
      name: cpu
      target:
        type: Utilization
        averageUtilization: 60

Best Practices Checklist

[ ] Implement proper resource requests and limits
[ ] Configure liveness and readiness probes
[ ] Set up horizontal pod autoscaling
[ ] Use pod anti-affinity rules for high availability
[ ] Secure deployments with network policies
[ ] Implement proper ingress with TLS
[ ] Set up monitoring and logging
[ ] Use CI/CD pipelines for deployments
[ ] Implement canary or blue-green deployments
[ ] Regularly update container images