<p>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.</p>
<p>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.</p>
<p>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 <code>myapi-service</code>, use <code>http://myapi-service</code></p>
<p>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.</p>
<p><strong>app-deployment.yaml</strong></p>
<pre><code>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

</code></pre>
<p><strong>app-service.yaml</strong></p>
<pre><code>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
</code></pre>
<p><a href="https://i.stack.imgur.com/GZYFA.png" rel="nofollow noreferrer">Kubernetes Service</a></p>
<p>Am I missing a piece here/doing something wrong? Thanks so much.</p>
<p><strong>UPDATE</strong>: If I go into my frontend container</p>
<p><code>curl myapi-service/swagger/index.html</code></p>
<p>It's able to pull up the API's swagger page</p>
<p><strong>UPDATE 2, SOLUTION:</strong></p>
<p>I refactored my <code>Dockerfile</code> to use NGINX to serve my front end Vue app</p>
<p><strong>Dockerfile</strong></p>
<pre><code>FROM node:14 as builder

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# build app
RUN npm run build

FROM nginx:alpine
COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf

## Remove default nginx index pagec
RUN rm -rf /usr/share/nginx/html/*

# Copy from the stage 1
COPY --from=builder /app/dist /usr/share/nginx/html

EXPOSE 80
ENTRYPOINT [&quot;nginx&quot;, &quot;-g&quot;, &quot;daemon off;&quot;]
</code></pre>
<p>and created a folder called <code>.nginx</code> in my front end's root folder with the <code>nginx.conf</code> file inside it.
<strong>nginx.conf</strong></p>
<pre><code>worker_processes 4;

events { worker_connections 1024; }

http {
    server {
        listen 80;
        root  /usr/share/nginx/html;
        include /etc/nginx/mime.types;

        location /appui {
            try_files $uri /index.html;
        }
        
        location /api/ {
            proxy_pass http://myapi-service;
        }
    }
}
</code></pre>
<p>No Ingress controller required. The front end was able to talk to the backend as explained in Mikolaj's answer.</p>
<p>Hope someone out there can find this useful!~ ^</p>

jlaw2000
<p>You cannot reach your backend pod from your frontend pod using kubernetes DNS like http://myapi-service because your frontend is running in the browser - outside your cluster. The browser doesn't undestrand the kubernetes DNS therefore cannot resolve your http://myapi-service url.</p>
<p>If you want to communicate frontend with your backend using <code>K8S DNS</code> you need to use any web server like <code>nginx</code>. The web server that host your frontend app is actually run on the kubernetes cluster so it understands the <code>K8S DNS</code>.</p>
<p>In your frontend code you need to change the api calls. Insead of directly call the api you need to first call youe web server.</p>
<p>For example: replace <strong>http://api-service/api/getsomething</strong> to <strong>/api/getsomething</strong></p>
<p><strong>/api/getsomething</strong> - this will tell the browser that it will send the request to the same server that served your frontend app (<code>nginx</code> in this case)</p>
<p>Then via <code>nginx</code> server the call can be forwarder to your api using the <code>K8S DNS</code>.
(It is called <strong>reverse proxy</strong>)</p>
<p>To forward your requests to api add some code to nginx config file.</p>
<pre><code>location /api/ {
    proxy_pass http://api-service.default:port;
}
</code></pre>
<p>*api-service - your k8s service name</p>
<p>*default - name of k8s api-service namespace</p>
<p>*port - api-service port</p>
<p>From now all your frontend requests contains /api/.. phrase will be forwarded to your api-service/api/..</p>
<p>/api/getsomething -&gt; http://api-service/api/getsomething</p>
