ReactJS 浏览器应用程序看不到 Docker Compose 网络中的内容答案

【问题标题】：ReactJS browser app cannot see things in the Docker Compose networkReactJS 浏览器应用程序看不到 Docker Compose 网络中的内容
【发布时间】：2017-09-06 16:32:37
【问题描述】：

我有一个带有自己的 Dockerfile 的 ReactJS 项目，暴露了 3000:3000 端口。

我还有一个 PHP 项目，它有自己的 Dockerfile，暴露了 80:80 端口。 PHP 应用程序还包含 MySQL、Redis 和 Nginx 的容器

对于 PHP 应用程序，我有一个 docker-compose 文件，它为 PHP、Nginx、MySQL 和 Redis 创建一个网络 (my-net) 以进行通信。但是，我现在希望 ReactJS（在一个单独的项目中）能够与 PHP 应用程序通信。

我在 React 项目中添加了一个 docker-compose 文件，并从 PHP 项目 my-net 将其添加到网络中，并将其声明为 external，以便它不会尝试创建它。

这似乎有效：从 ReactJS 容器中，我可以 ping app（我的后端服务的名称）并且它可以正常工作。但是，从 ReactJS 代码中，如果我使用 axios 之类的东西来尝试访问后端 API，它无法解析 app 或 http://app 或任何变体。但是，如果我将其替换为 axios，它可以访问底层 IP 地址。

所以主机名解析似乎存在一些问题，大概是在axios / JavaScript 端。是否有我遗漏的东西或无法正常工作的原因？

【问题讨论】：

标签： reactjs docker axios

【解决方案1】：

当 JavaScript 在浏览器（Docker 外部）中运行时，您不能使用 app，因为它只能在 Docker 网络内部（通过嵌入式 DNS 服务器）使用。

要从外部访问您的 PHP 服务器，请改用 localhost 和暴露的端口 (80)。

【讨论】：

不确定我是否关注。我正在尝试从内部访问 PHP 应用程序的浏览器访问 React 应用程序。但是当我这样做时，React 似乎无法连接到 PHP 应用程序
请求是来自 reactjs/browser 还是来自 react 容器中的其他东西？我以为 react 容器只是一个静态文件服务器。
ReactJS (javascript) 正在向 PHP 应用程序发出请求。所以流程是：我在浏览器中访问 localhost:3000，这是 ReactJS 的暴露端口。当我到达那个端点时，React 会向 PHP 容器发出请求，或者至少会尝试这样做。这是失败的部分。即使我可以从 ReactJS 容器 ping PHP 应用程序，当我尝试使用 axios 从 Javascript 代码发出请求时，它也无法解析主机
如果你没有在 react 容器中使用服务器端渲染或代理，这与 react 容器无关。您可以通过 localhost:80 上的公开端口访问您的 PHP 服务器（之前在浏览器中检查您的 PHP 服务器是否可以访问）。对于访问其他端口的javascript，您必须启用CORS，但如果它通常可以正常工作，您可以先检查开发人员工具。
@djt：你可能想看的东西之一是前端代理，这样你就可以把你所有的服务（SPA、AJAX、WS）放在一个端口上，然后有有些东西在内部重新路由它们。这允许您在标准端口（80、443）上运行它们，以在生产环境中实现最大的可靠性。您可以在 Docker Compose 配置中将代理作为另一个容器运行。