Kubernetes docker 容器中的前端 Vue.js 应用程序无法连接到后端答案

【问题标题】：front-end Vue.js app in Kubernetes docker container cannot connect to back-endKubernetes docker 容器中的前端 Vue.js 应用程序无法连接到后端
【发布时间】：2021-02-20 07:31:54
【问题描述】：

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

在容器内，使用 curl 连接后端没有问题：

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

我使用axios作为api服务：

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。

我想知道是什么导致了这个问题？

【问题讨论】：

前端仅托管在容器中，但在客户端的浏览器中运行。您的后端还需要可从客户端上的浏览器访问才能正常工作。
谢谢@jbud，你能详细说明一下吗？不是浏览器客户端连接到容器中的前端，然后前端发送API命令并从后端获取响应，因此应该只在前端和后端之间进行通信后端在同一个 kubernetes 集群中（我添加了一些关于我的设置的更多细节，所以我使用的是 Minikube，前端和后端容器在同一个 kubernetes 集群上运行。
你的前端和后端可以在不同的集群上运行，这没关系。在这种情况下，客户端是用户的浏览器。前端只是托管在容器中，客户端正在将其下载到他们的工作站，因此 API（后端）需要可供用户浏览器访问。托管前端的容器是否可以与后端通信并不重要。如果您正在运行服务器端脚本，那么这很重要。现在你实际上只运行客户端脚本。
前后端的通信不经过前端的容器，而是直接从客户端到后端。
我明白你的意思了，那么在这种情况下，我需要暴露我的后端，然后将IP地址存储在前端，以便客户端可以连接到后端服务？但是我记得大部分应用只需要暴露前端IP地址？

标签： docker vue.js kubernetes axios

【解决方案1】：

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

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

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

【讨论】：