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

Question

我对使用 docker 很陌生，所以我很可能只是不知道自己在做什么。我有一个连接到环回服务器的 react 前端。在本地运行它们时，我将 package.json 文件设置到我刚刚从基本项目目录运行“npm start”的位置，并且应用程序的两端都在端口 3000 上运行，另一端在端口 3001 上运行。这很好用在本地，当我尝试从前端访问任何 API 时，我只需要瞄准 localhost:3001/。
我想将它们放在一个容器中以匹配我在本地设置的方式，但显然如果是这种情况，我用来在它们之间进行通信的路径将不再起作用，因为“localhost”只会查看用户 localhost与容器中的实例相反。有没有办法将这两个正在运行的服务保持在单个容器上并在它们之间进行通信？我只需要将其中一个( react 前端)的端口暴露给用户，因为这是他们将直接与之交互的应用程序的唯一部分。这种类型的功能是否只有通过制作每个自己的容器然后以这种方式进行通信才能实现？如果可能的话，我想避免这种情况。
我试过搜索这个，我确定它在某个地方，但我认为我对 docker 的了解不够，无法正确表达我正在搜索的内容。如果可能的话，我会感谢任何有经验的人帮助我。谢谢!

Answer 1

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

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

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

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

正如您在问题中所指出的，浏览器是此设置中的重要参与者。浏览器(因此从您的 React 应用程序调用 fetch 或 XMLHttpRequest)永远不能直接调用 Docker 内部主机名。它必须连接到运行容器的服务器的主机名(如果浏览器和容器在同一系统上，则可以是 localhost)和已发布的端口号( docker run -p，Docker Compose ports:)。
您通常应该为每个容器运行一个进程。尝试在同一个容器中运行 React 开发服务器和后端服务器并不能真正简化事情，因为浏览器将调用后端。如果您使用此处描述的代理解决方案之一，您可以将所有内容路由到单个发布的容器中，而其他容器不需要发布端口；它们只能存在于 Docker 系统中，并且只能通过代理访问。