Docker – Kubernetes only starts Backend Server. Frontend server throws an 502 Bad Gateway (nginx)

I have a React app with a Node.js backend, and I am attempting to host it using Kubernetes. The backend server launches successfully and is reachable. However, the frontend doesn’t appear after deploying my containers. I think it has something to do with the ports. But i am not sure since I am very new to Docker und Kubernetes

Frontend DockerFile:

FROM node:14.14.0-alpine as builder
WORKDIR /app
COPY ./package.json ./
RUN npm i
COPY . .
RUN npm run build
FROM nginx
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/build /usr/share/nginx/html
COPY sw_PublicKey.crt /etc/ssl/sw_certificatePKCS7.crt
COPY private_key.pem /etc/ssl/private_key.pem
EXPOSE 443

Backend DockerFile

FROM node:14.14.0-alpine
WORKDIR /app
COPY ./package.json ./
RUN npm i
COPY . .
EXPOSE 4000
CMD ["npm", "run", "start"]
enter code here

NGINX CONFIG

server{
  listen 443 ssl;
  #listen 10.10.100.66:3000;
  #Type your domain name below
  server_name spesen.sxdes.de;

  ssl_certificate /etc/ssl/sw_certificatePKCS7.crt;
  ssl_certificate_key /etc/ssl/private_key.pem;

  ssl_session_timeout 1d;
  ssl_session_cache shared:SSL:50m;
  ssl_session_tickets off;

  ssl_protocols TLSv1.2;

# Only use ciphersuites that are considered modern and secure by Mozilla
  ssl_ciphers 'ECDHE-ECDSA...';

  ssl_prefer_server_ciphers on;

  location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

NGINX Default.conf

upstream client {
    server client:3000;
}

upstream api {
    server api:4000;
}

server {
    listen 443;

    location / {
        proxy_pass http://client;
    }

    location /sockjs-node {
        proxy_pass http://client;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location /api {
        rewrite /api/(.*) /$1 break;
        proxy_pass http://api;
    }
}

client-cluster-ip-service

apiVersion: v1
kind: Service
metadata:
  name: client-cluster-ip-service
spec:
  type: ClusterIP
  selector:
    component: web
  ports:
    - port: 3000
      targetPort: 3000

client_deployment

apiVersion: apps/v1
kind: Deployment
metadata:
  name: client-deployment
spec:
  replicas: 1
  selector:
    matchLabels:
      component: web
  template:
    metadata:
      labels:
        component: web
    spec:
      containers:
        - name: client
          image: ss/spesen-c:latest
          ports:
            - containerPort: 3000
          env:
            - name: REACT_APP_GOOGLE_MAPS_API_KEY
              value: "..."
      imagePullSecrets:
        - name: secret/...

ingress-service

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-service
  annotations:
    kubernetes.io/ingress.class: "nginx"
    nginx.ingress.kubernetes.io/use-regex: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /$1
spec:
  rules:
    - http:
        paths:
          - path: /?(.*)
            pathType: Prefix
            backend:
              service:
                name: client-cluster-ip-service
                port:
                  number: 3000
          - path: /api/?(.*)
            pathType: Prefix
            backend:
              service:
                name: server-cluster-ip-service
                port:
                  number: 4000

server_cluster_ip_service

apiVersion: v1
kind: Service
metadata:
  name: server-cluster-ip-service
spec:
  type: ClusterIP
  selector:
    component: web
  ports:
    - port: 4000
      targetPort: 4000

server-deployment

apiVersion: apps/v1
kind: Deployment
metadata:
  name: server-deployment
spec:
  replicas: 1
  selector:
    matchLabels:
      component: web
  template:
    metadata:
      labels:
        component: web
    spec:
      containers:
        - name: server
          image: schorerwolfae/spesen-server
          ports:
            - containerPort: 4000
          env:
            - name: ACCESS_TOKEN_SECRET
              value: "..."
            - name: REFRESH_TOKEN_SECRET
              value: "..."
            - name: DATABASE_URI
              value: "..."
            - name: AD_PASSWORD
              value: "..."
      imagePullSecrets:
        - name: secret/...