Frontend pod can't reach backend pod

I have a minikube Kubernetes set up with two pods, each having one container. One for my Vue frontend and one for my backend API. I’ve also got two services attached to the pods.

My understanding is because the frontend and backend IP addresses change when the Pod is restarted or moved to a different node, we shouldn’t use the IP Addresses to link them but a Service instead.

So in my case, my frontend would call my backend through the Service (which can also be used as the hostname) e.g. Service is called myapi-service , use http://myapi-service

My problem is after I launch my front end, any request it sends using the above hostname doesn’t work, it’s not able to connect to my backend.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: myapi-deployment
  labels:
    app: myrapi
spec:
  replicas: 1
  selector:
    matchLabels:
      app: myapi
  template:
    metadata:
      labels:
        app: myapi
    spec:
      containers:
      - name: myapi
        image: myapi
        imagePullPolicy: Never
        ports:
        - containerPort: 80
        env:
        - name: TZ
          value: America/Toronto
        - name: ASPNETCORE_ENVIRONMENT
          value: Development_Docker
---

apiVersion: apps/v1
kind: Deployment
metadata:
  name: myui-deployment
  labels:
    app: myui
spec:
  replicas: 1
  selector:
    matchLabels:
      app: myui
  template:
    metadata:
      labels:
        app: myui
    spec:
      containers:
      - name: myui
        image: myui
        imagePullPolicy: Never
        ports:
        - containerPort: 8080
        env:
        - name: NODE_ENV
          value: Development

apiVersion: v1
kind: Service
metadata:
  name: myapi-service
  labels:
    run: myapi-service
spec:
  ports:
  - port: 80
    protocol: TCP
  selector:
    app: myapi
  type: NodePort
  
---

apiVersion: v1
kind: Service
metadata:
  name: myui-service
  labels:
    run: myui-service
spec:
  ports:
  - port: 8080
    protocol: TCP
  selector:
    app: myui
  type: NodePort

If I go into my frontend container and run:

docker exec -it a360c32d6da5 bash

curl myapi-service/api/alive

It is able to reach it though, the problem is if I try to reach it through my UI in the browser.

What error do you get in the browser?
Try finding out if the service properly binds on the node via nodeport, see which port that is, you don’t specify the port, so it is a random one generated from 32000 upwards to some range. Running a
netstat -lnp
(listen numeric program) should give you some indication about it, if it is properly bound.

Thanks for the response Sagittarius. I was able to figure out the issue the solution was to serve my front end using NGINX with a reverse proxy. docker - Kubernetes - Frontend pod can't reach backend pod - Stack Overflow