Kubernetes(minikube) + React Frontend + .netcore api + Cluster IP service + ingress + net::ERR_NAME_NOT_RESOLVED

10/8/2019

Not able to resolve an API hosted as a ClusterIP service on Minikube when calling from the React JS frontend.

The basic architecture of my application is as follows React --> .NET core API

Both these components are hosted as ClusterIP services. I have created an ingress service with http paths pointing to React component and the .NET core API.

However when I try calling it from the browser, react application renders, but the call to the API fails with net::ERR_NAME_NOT_RESOLVED

Below are the .yml files for


1. React application

apiVersion: v1
kind: Service
metadata:
    name: frontend-clusterip
spec:
    type: ClusterIP
    ports:
    - port: 59000
        targetPort: 3000
    selector:
    app: frontend

2. .NET core API

apiVersion: v1
kind: Service
metadata:
    name: backend-svc-nodeport
spec:
    type: ClusterIP
    selector:
    app: backend-svc
    ports:
    - port: 5901
        targetPort: 59001

3. ingress service

apiVersion: extensions/v1beta1
kind: Ingress
metadata: 
    name: ingress-service
    annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /$1
spec:
    rules:
    - http:
        paths:
        - path: /?(.*)
            backend: 
            serviceName: frontend-clusterip
            servicePort: 59000
        - path: /api/?(.*)
            backend:
            serviceName: backend-svc-nodeport
            servicePort: 5901

4. frontend deployment

apiVersion: apps/v1
kind: Deployment
metadata:
    name: frontend
spec:
    selector:
    matchLabels:
        app: frontend
    replicas: 1
    template:
        metadata:
        labels:
        app: frontend
    spec:
        containers:
        - name: frontend
        image: upendra409/tasks_tasks.frontend
        ports:
        - containerPort: 3000
        env:
        - name: "REACT_APP_ENVIRONMENT"
            value: "Kubernetes"
        - name: "REACT_APP_BACKEND"
            value: "http://backend-svc-nodeport"
        - name: "REACT_APP_BACKENDPORT"
            value: "5901"

This is the error I get in the browser:

xhr.js:166 GET 
http://backend-svc-nodeport:5901/api/tasks net::ERR_NAME_NOT_RESOLVED

I installed curl in the frontend container to get in the frontend pod to try to connect the backend API using the above URL, but the command doesn't work

C:\test\tasks [develop ≡ +1 ~6 -0 !]> kubectl exec -it frontend-655776bc6d-nlj7z --curl http://backend-svc-nodeport:5901/api/tasks

Error: unknown flag: --curl
-- Upendra
.net-core
kubernetes
kubernetes-ingress
reactjs

1 Answer

10/16/2019

You are getting this error from local machine because ClusterIP service is wrong type for accessing from outside of the cluster. As mentioned in kubernetes documentation ClusterIP is only reachable from within the cluster.

Publishing Services (ServiceTypes)

For some parts of your application (for example, frontends) you may want to expose a Service onto an external IP address, that’s outside of your cluster.

Kubernetes ServiceTypes allow you to specify what kind of Service you want. The default is ClusterIP.

Type values and their behaviors are:

  • ClusterIP: Exposes the Service on a cluster-internal IP. Choosing this value makes the Service only reachable from within the cluster. This is the default ServiceType.
  • NodePort: Exposes the Service on each Node’s IP at a static port (the NodePort). A ClusterIP Service, to which the NodePort Service routes, is automatically created. You’ll be able to contact the NodePort Service, from outside the cluster, by requesting <NodeIP>:<NodePort>.
  • LoadBalancer: Exposes the Service externally using a cloud provider’s load balancer. NodePort and ClusterIP Services, to which the external load balancer routes, are automatically created.
  • ExternalName: Maps the Service to the contents of the externalName field (e.g. foo.bar.example.com), by returning a CNAME record

    with its value. No proxying of any kind is set up.

    Note: You need CoreDNS version 1.7 or higher to use the ExternalName type.

I suggest using NodePort or LoadBalancer service type instead.

Refer to above documentation links for examples.

-- Piotr Malec
Source: StackOverflow