ReactJS 浏览器应用程序无法看到 Docker Compose 网络中的内容

标签 reactjs docker axios

我有一个 ReactJS 项目,它有自己的 Dockerfile,暴露端口 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,它无法解析 apphttp://app 或任何变体。但是,如果我将其替换为 axios,它可以访问底层 IP 地址。

因此主机名解析似乎存在一些问题,大概是在 axios/JavaScript 端。有没有我遗漏的东西或者这不起作用的原因?

最佳答案

当 JavaScript 在浏览器(Docker 外部)中运行时,您不能使用 app,因为它仅在 Docker 网络内部可用(通过嵌入式 DNS 服务器)。

要从外部访问您的 PHP 服务器,请改用本地主机和公开的端口 (80)。

关于ReactJS 浏览器应用程序无法看到 Docker Compose 网络中的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46080290/

相关文章:

vue.js - Vuetify 数据表 : Fetch data when expanding a row

javascript - 如何 post props redux React

bash - 在带有 'source' 的 Dockerfile 中使用 RUN 指令不起作用

node.js - Docker Volume 的 1 路同步而不是 2 路同步?

javascript - 在 redux 中使用 axios 的正确方法

javascript - CORS 与 React、Webpack 和 Axios

javascript - 如何构建更好的 React 列表容器组件?

reactjs - 如何将包含 props 的对象传递给 React 组件?

javascript - React-bootstrap Navbar 品牌 Logo 未呈现

ajax - Node http 请求 Docker Remote API - 无响应