CODEWITHSUNDEEP
dockervue.jskubernetesaxios
Ken Tsoi
Ken Tsoi

Reputation: 1303

front-end Vue.js app in Kubernetes docker container cannot connect to back-end

I have built a front-end Vue.js application, running on a docker container under kubernetes environment. the backend is also in the same kubernetes cluster (I am using Minikube for the project). When running it gets error net::ERR_NAME_NOT_RESOLVED when connecting to back-end containers: enter image description here

while inside the container, there is no problem connect to the back-end using curl:

$ kubectl exec -it deployment/hpl-browser-deployment -- sh
/ # curl http://hpl-manager-service:2354
{
  "message": "Manager status", 
  "state": "IDLE"
}

I used axios for the api service:

import axios from 'axios';

export default class APIService {
  API_URL = '';

  constructor(apiAddress) {
    this.API_URL = apiAddress;
  }

  async get() {
    console.log('ApiService: get()');
    try {
      const response = await axios.get(this.API_URL);
      console.log(`ApiService: get result: ${response.data}`);
      return response.data;
    } catch (error) {
      console.error(error);
      return error;
    }
  }

  async postPlainText(data) {
    console.log(`ApiService: post() - data: ${data}`);
    try {
      const response = await axios.post(this.API_URL,
        data,
        {
          headers: {
            'Content-Type': 'text/plain',
            Accept: '*/*',
          },
        });
      console.log(`ApiService: post result: ${response.data}`);
      return response.data;
    } catch (error) {
      console.error(error);
      return error;
    }
  }
}

The application has no problem running on development environment, when I port-forward the back-end service, and connect to http://localhost:2354.

I would like to know what may cause this problem?

Upvotes: 3

Views: 1867

Answers (1)

jbud
jbud

Reputation: 694

Your front-end vue.js application is just hosted in the container. The application is actually run from the browser of the client. Your backend which functions as the API will also need to be accessible to the browser of the client. The communication between frontend and backend doesn’t go through the container of the frontend, but directly from the client to the backend.

The connection between the front-end container and backend container is not used/needed in this case since you're not rendering anything from the front-end container, before responding to the client. If you were using a server-side rendering technology, such as PHP, Django, .net, Nodejs, etc., whereby you needed to connect to the backend to get some data and render something before replying to the client, then the connection between the front-end container and the backend container would be relevant.

Your current setup is no different from hosting your application/code on a CDN and accessing the API hosted on a separate service(publicly available).

Upvotes: 6

Related Questions