时间戳

首页 > 解决方案 > 一个 docker 容器中的两个服务通信

reactjs - 一个 docker 容器中的两个服务通信

问题描述

我对使用 docker 很陌生，所以我很可能只是不知道自己在做什么。我有一个连接到环回服务器的反应前端。在本地运行它们时，我将 package.json 文件设置到我刚刚从基本项目目录运行“npm start”的位置，并且应用程序的两端都在端口 3000 上运行，另一端在端口 3001 上运行。这很好用在本地，当我尝试从前端访问任何 API 时，我只需要瞄准 localhost:3001/。

我想将它们放在一个容器中以匹配我在本地设置的方式，但显然如果是这种情况，我用来在它们之间进行通信的路径将不再起作用，因为“localhost”只会查看用户 localhost与容器中的实例相反。有没有办法将这两个正在运行的服务保持在单个容器上并在它们之间进行通信？我只需要将其中一个（反应前端）的端口暴露给用户，因为这是他们将直接与之交互的应用程序的唯一部分。这种类型的功能是否只有通过制作每个自己的容器然后以这种方式进行通信才能实现？如果可能的话，我想避免这种情况。

我试过搜索这个，我确定它在某个地方，但我认为我对 docker 的了解不够，无法正确表达我正在搜索的内容。如果可能的话，我会感谢任何有经验的人帮助我。谢谢！

标签： reactjsdockerkubernetesloopback

解决方案

如果相同的主机/端口同时服务于前端和后端，那么这种架构将更容易处理。在您的前端代码中，您可以调用相对 URL，例如/api/things，它将使用相同的host:port; 这使您不必在每次部署时重新编译代码，并解决一些与 CORS 相关的问题。

基本上有三种方法可以做到这一点：

  1. 使用Webpack之类的工具将前端编译为静态文件。（如果您使用的是Create React App，请运行npm run build或yarn build。）让后端代码直接提供这些文件。不要运行“前端服务器”。在 Docker 上下文中，只有一个容器（后端），并且 UI 代码可能构建在多阶段 Dockerfile 中。

  2. 将 Webpack 开发服务器配置为后端服务器proxy的 URL 路径。（或者在 CRA 中，将"proxy"设置添加到package.json。）在 Docker 上下文中，浏览器将连接到此开发服务器，并且代理地址将设置为http://backend:3000使用 Docker 内部名称。

  3. 设置一个反向代理（通常是Nginx）来路由/api到. 在 Docker 上下文中，您将运行三个容器：浏览器将连接到此代理，并且代理将使用 Docker 内部名称用于其他两个服务。http://backend:3000http://frontend:3000

正如您在问题中所指出的，浏览器是此设置中的重要参与者。浏览器（以及来自你的 React 应用程序fetch的XMLHttpRequest调用）永远不能直接调用 Docker 内部的主机名。它必须连接到运行容器的服务器的主机名（localhost如果浏览器和容器位于同一系统上，则可以是）和已发布的端口号（docker run -pDocker Compose ports:）。

您通常应该为每个容器运行一个进程。尝试在同一个容器中运行 React 开发服务器和后端服务器并不能真正简化事情，因为浏览器将调用后端。如果您使用此处描述的代理解决方案之一，您可以将所有内容路由到单个发布的容器中，而其他容器不需要发布端口；它们只能存在于 Docker 系统中，并且只能通过代理访问。

推荐阅读