React front end on kubernetes pod fails to communicate with other serviced pod, despite networking working pod to pod

Advertisements

My kubernetes deployed react front end is failing to connect to my api. Both are containerized applications deployed with kubectl locally with minikube, along with services, but when I navigate to my deployed (minikube) react front end, it fails to connect to the backend api.

The reason this is strange is because when I exec into the pods, I am able to curl http://{backend-service}/ from the front end, and vice versa just fine. But the react app still somehow fails the same request.

Any advice or ideas would be appreciated!

curl from inside pods

kubectl frontend deployment failing backend request

Please see the following yaml files that describe the application;

backend-deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: diagnosy-backend
  namespace: diagnosy
spec:
  replicas: 1
  selector:
    matchLabels:
      app: diagnosy-backend
  template:
    metadata:
      labels:
        app: diagnosy-backend
    spec:
      containers:
        - name: diagnosy-backend
          image: asia-docker.pkg.dev/multi-cloud-app-413619/gcr-asia-repo/diagnosy/api:1.0.5
          ports:
            - containerPort: 3001
          imagePullPolicy: Never

backend-service.yaml

apiVersion: v1
kind: Service
metadata:
  name: diagnosy-api
  namespace: diagnosy
spec:
  selector:
    app: diagnosy-backend
  ports:
    - protocol: TCP
      port: 3001
      targetPort: 3001
  type: LoadBalancer

frontend-deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: diagnosy-frontend
  namespace: diagnosy
spec:
  replicas: 1
  selector:
    matchLabels:
      app: diagnosy-frontend
  template:
    metadata:
      labels:
        app: diagnosy-frontend
    spec:
      containers:
        - name: diagnosy-frontend
          image: asia-docker.pkg.dev/multi-cloud-app-413619/gcr-asia-repo/diagnosy/webapp:1.0.3
          ports:
            - containerPort: 3000
          imagePullPolicy: Never
          env:
            - name: DIAGNOSY_API_HOST
              valueFrom:
                configMapKeyRef:
                  name: diagnosy-configmap
                  key: backend_host
            - name: DIAGNOSY_API_PORT
              valueFrom:
                configMapKeyRef:
                  name: diagnosy-configmap
                  key: backend_port

frontend-service.yaml

apiVersion: v1
kind: Service
metadata:
  name: diagnosy-webapp
  namespace: diagnosy
spec:
  selector:
    app: diagnosy-frontend
  ports:
    - protocol: TCP
      port: 3000
      targetPort: 3000
  type: LoadBalancer

configmap.yaml

apiVersion: v1
kind: ConfigMap
metadata:
  name: diagnosy-configmap
  namespace: diagnosy
data:
    backend_host: diagnosy-api
    backend_port: "3001"
    database_host: mongodb-service
    database_port: "27017"

>Solution :

Your frontend isn’t using DNS from K8s. If you want it to be able to call services using their service names, you’ll need to run a server and proxy those calls. Otherwise, you need to expose the services (behind a LB or Ingress, with a domain). Those requests come from the browser, not inside the cluster, so they have no access to internal DNS.

Leave a ReplyCancel reply