Kubernetes docker 容器中的前端 Vue.js 应用程序无法连接到后端 [英] front-end Vue.js app in Kubernetes docker container cannot connect to back-end

问题描述

我已经构建了一个前端 Vue.js 应用程序，在 kubernetes 环境下的 docker 容器上运行.后端也在同一个 kubernetes 集群中(我在项目中使用 Minikube).运行时，连接到后端容器时出现错误 net::ERR_NAME_NOT_RESOLVED:

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:

在容器内部，使用 curl 连接到后端是没有问题的:

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"
}

我使用 axios 作为 api 服务:

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;
    }
  }
}

应用在开发环境下运行没有问题，当我转发后端服务，并连接到http://localhost:2354.

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?

推荐答案

您的前端 vue.js 应用程序只是托管在容器中.该应用程序实际上是从客户端的浏览器运行的.用作 API 的后端也需要可以被客户端的浏览器访问.前端和后端的通信不经过前端的容器，而是直接从客户端到后端.

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.

在这种情况下不使用/不需要前端容器和后端容器之间的连接，因为在响应客户端之前，您没有从前端容器呈现任何内容.如果您使用的是服务器端渲染技术，例如 PHP、Django、.net、Nodejs 等，需要连接到后端获取一些数据并在回复客户端之前渲染一些东西，那么之间的连接前端容器和后端容器是相关的.

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.

您当前的设置与在 CDN 上托管您的应用程序/代码并访问托管在单独服务(公开可用)上的 API 没有什么不同.

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).

这篇关于Kubernetes docker 容器中的前端 Vue.js 应用程序无法连接到后端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！