enter image description here

I have to service frontend and backend , i created their docker file and push Google Artifact Registry , i deployed both the services in a GKE Cluster

Node Servide.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-node-server
spec:
  replicas: 1
  selector:
    matchLabels:
      app: my-node-server
  template:
    metadata:
      labels:
        app: my-node-server
    spec:
      containers:
      - name: my-node-server
        image: us-central1-docker.pkg.dev/ycxz-426410/ycxz/backend:latest
        ports:
        - containerPort: 5000

---

apiVersion: v1
kind: Service
metadata:
  name: my-node-server-service
spec:
  selector:
    app: my-node-server
  ports:
    - protocol: TCP
      port: 80
      targetPort: 5000
  type: ClusterIP 

Frontend.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-react-server
spec:
  replicas: 1
  selector:
    matchLabels:
      app: my-react-server
  template:
    metadata:
      labels:
        app: my-react-server
    spec:
      containers:
      - name: my-react-server
        image: us-central1-docker.pkg.dev/ycxz-426410/ycxz/frontend:latest
        ports:
        - containerPort: 3000
        env:
          - name: REACT_APP_URL
            value: "http://my-node-server-service.default.svc.cluster.local"

---

apiVersion: v1
kind: Service
metadata:
  name: my-react-server-service
spec:
  selector:
    app: my-react-server
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000
  type: ClusterIP

and my ingress.yaml

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: my-ingress
spec:
  rules:
    - http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: my-react-server-service
                port:
                  number: 80
          
  ingressClassName: nginx 

after apllying these file my react server got up and access it using ingress external ip
but it showing error that it not able communicate with backend

Backend URL: http://my-node-server-service.default.svc.cluster.local
App.js:23 Backend URL: http://my-node-server-service.default.svc.cluster.local
App.js:15 Fetching message...
App.js:15 Fetching message...
App.js:20 Error fetching message: AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
fetchMessage @ App.js:20
await in fetchMessage (async)
(anonymous) @ App.js:10
commitHookEffectListMount @ react-dom.development.js:23189
commitPassiveMountOnFiber @ react-dom.development.js:24965
commitPassiveMountEffects_complete @ react-dom.development.js:24930
commitPassiveMountEffects_begin @ react-dom.development.js:24917
commitPassiveMountEffects @ react-dom.development.js:24905
flushPassiveEffectsImpl @ react-dom.development.js:27078
flushPassiveEffects @ react-dom.development.js:27023
(anonymous) @ react-dom.development.js:26808
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 11 more frames
Show lessUnderstand this error
App.js:16 
        
        
 GET http://my-node-server-service.default.svc.cluster.local/api/hello net::ERR_NAME_NOT_RESOLVED

how to dynamically make communication betwwen frontend and backend

when i login to Kubernetes pod and try to to

curl http://my-node-server-service.default.svc.cluster.local/api/hello

it working but the outside cluster is not able to access