<p>I'm trying to learn Kubernetes as I go and I'm currently trying to deploy a test application that I made.</p>
<p>I have 3 containers and each container is running on its own pod</p>
<ul>
<li>Front end App (Uses Nuxtjs)</li>
<li>Backend API (Nodejs)</li>
<li>MongoDB</li>
</ul>
<p>For the Front End container I have configured an External Service (LoadBalancer) which is working fine. I can access the app from my browser with no issues.</p>
<p>For the backend API and MongoDB I configured an Internal Service for each. The communication between Backend API and MongoDB is working. The problem that I'm having is communicating the Frontend with the Backend API.</p>
<p>I'm using the Axios component in Nuxtjs and in the nuxtjs.config.js file I have set the Axios Base URL to be http://service-name:portnumber/. But that does not work, I'm guessing its because the url is being call from the client (browser) side and not from the server. If I change the Service type of the Backend API to LoadBalancer and configure an IP Address and Port Number, and use that as my axios URL then it works. However I was kind of hoping to keep the BackEnd-API service internal. Is it possible to call the Axios base URL from the server side and not from client-side.</p>
<p>Any help/guidance will be greatly appreciated.</p>
<p>Here is my Front-End YML File</p>
<pre><code>apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: mhov-ipp
  name: mhov-ipp
  namespace: mhov
spec:
  replicas: 1
  selector:
    matchLabels:
      app: mhov-ipp
  template:
    metadata:
      labels:
        app: mhov-ipp
    spec:
      containers:
        - image: mhov-ipp:1.1
          name: mhov-ipp
          ports:
            - containerPort: 8080
          env:
            - name: NODE_ENV
              value: &quot;development&quot;
            - name: PORT
              value: &quot;8080&quot;
            - name: TITLE
              value: &quot;MHOV - IPP - K8s&quot;
            - name: API_URL
              value: &quot;http://mhov-api-service:4000/&quot;
---
apiVersion: v1
kind: Service
metadata:
  name: mhov-ipp-service
spec:
  selector:
    app: mhov-ipp
  type: LoadBalancer
  ports:
    - protocol: TCP
      port: 8082
      targetPort: 8080
      nodePort: 30600
</code></pre>
<p>Here is the backend YML File</p>
<pre><code>apiVersion: apps/v1
kind: Deployment
metadata:
  name: mhov-api-depl
  labels:
    app: mhov-api
spec:
  replicas: 1
  selector:
    matchLabels:
      app: mhov-api
  template:
    metadata:
      labels:
        app: mhov-api
    spec:
      containers:
        - name: mhov-api
          image: mhov-api:1.0
          ports:
            - containerPort: 4000
          env:
            - name: mongoURI
              valueFrom:
                configMapKeyRef:
                  name: mhov-configmap
                  key: database_url
---
apiVersion: v1
kind: Service
metadata:
  name: mhov-api-service
spec:
  selector:
    app: mhov-api
  ports:
    - protocol: TCP
      port: 4000
      targetPort: 4000
</code></pre>

Carlos Sosa
<h2 id="what-is-ingress-and-how-to-install-it">What is ingress and how to install it</h2>
<p>Your guess is correct. Frontend is running in browser and browser &quot;doesn't know&quot; where backend is and how to reach out to it. You have two options here:</p>
<ul>
<li>as you did with exposing backend outside your cluster</li>
<li>use advanced solution such as <code>ingress</code></li>
</ul>
<p>This will move you forward and will need to change some configuration of your application such as URL since application will be exposed to &quot;the internet&quot; (not really, but you can do it using cloud).</p>
<p>What is <code>ingress</code>:</p>
<blockquote>
<p>Ingress is api object which exposes HTTP and HTTPS routes from outside the cluster to services within the cluster. Traffic routing is controlled by rules defined on the Ingress resource.</p>
</blockquote>
<p>Most common option is <code>nginx ingress</code> - their page <a href="https://kubernetes.github.io/ingress-nginx/" rel="nofollow noreferrer">NGINX Ingress Controller</a>.</p>
<p>Installation depends on cluster type, however I suggest using <code>helm</code>. (if you're not familiar with <code>helm</code>, it's a template engine which uses charts to install and setup application. There are quite a lot already created charts, e.g. <a href="https://kubernetes.github.io/ingress-nginx/deploy/#using-helm" rel="nofollow noreferrer">ingress-nginx</a>.</p>
<p>If you're using <code>minikube</code> for example, it already has built-in <code>nginx-ingress</code> and can be enabled as addon.</p>
<h2 id="how-to-expose-services-using-ingress">How to expose services using ingress</h2>
<p>Once you have working ingress, it's type to create rules for it.</p>
<p>What you need is to have ingress which will be able to communicate with frontend and backend as well.</p>
<p>Example taken from official kubernetes documentation:</p>
<pre><code>apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: simple-fanout-example
spec:
  rules:
  - host: foo.bar.com
    http:
      paths:
      - path: /foo
        pathType: Prefix
        backend:
          service:
            name: service1
            port:
              number: 4200
      - path: /bar
        pathType: Prefix
        backend:
          service:
            name: service2
            port:
              number: 8080
</code></pre>
<p>In this example, there are two different services available on different <code>paths</code> within the <code>foo.bar.com</code> hostname and both services are within the cluster. No need to expose them out of the cluster since traffic will be directed through <code>ingress</code>.</p>
<h2 id="actual-solution-how-to-approach">Actual solution (how to approach)</h2>
<p><a href="https://stackoverflow.com/q/67470540/15537201">This is very similar configuration</a> which was fixed and started working as expected. This is my answer and safe to share :)</p>
<p>As you can see OP faced the same issue when frontend was accessible, while backend wasn't.</p>
<p>Feel free to use anything out of that answer/repository.</p>
<h2 id="useful-links">Useful links:</h2>
<ul>
<li><a href="https://kubernetes.io/docs/concepts/services-networking/ingress/" rel="nofollow noreferrer">kubernetes ingress</a></li>
</ul>
