Docker ReactJS 与其他容器的通信答案

【问题标题】：Docker ReactJS Communication with other containerDocker ReactJS 与其他容器的通信
【发布时间】：2019-08-07 07:38:59
【问题描述】：

我似乎无法使用 Docker VPN 从网站向我的后端发送 http 请求。

我有这个 docker-compose 文件：

version: '3.7'

services:
  frontend:
    ports:
      - 5001:5001
    build: "./..."
  restapi:
    build: "./.../"
    command: gunicorn rest.wsgi:application --bind 0.0.0.0:8000
    expose:
      - 8000
    depends_on:
      - db
  db:
    image: postgres:10.5-alpine
    volumes:
      - postgres_data:/var/lib/postgresql/data/

现在，我正在尝试从我的反应前端发送一个帖子请求

axios.post('http://restapi:8000/rest/', {data}, {headers})

--> 请求完全失败，永远无法访问我的 restapi 服务

如果我进入容器中的容器：docker exec -it "container-id" sh，然后向该 url 发送 wget（卷曲）请求，一切正常。

我假设，一旦网站在浏览器中运行，我就离开了容器，因此离开了 docker 的 VPN？

但我如何才能从反应前端跨容器发出请求？

【问题讨论】：

您是否正在从您的 IDE 测试 axios 调用？
后端是来自 docker-compose 的“restapi”服务。它有自己的容器，由 docker-compose 提供服务。
对不起，我改写了这个问题
我不确定我是否理解正确。 axios 调用由浏览器中的用户操作触发（现在：localhost）。如果我检查请求，则 url 不会解析为服务器 ip，但看起来像这样：restapi/rest
啊，你的意思是“来自我的反应前端”而不是后端，对吧？

标签： reactjs docker

【解决方案1】：

您的容器可以通过服务名称相互看到。但是浏览器正在尝试作为客户端访问。所以是的，当您部署到 VM 时，一切都会正常工作。为了测试你的本地部署，客户端需要知道restapi在哪里，所以你需要包含在你的主机中：

    <docker-ip or localhost>     restapi

更新：如果后端在前端也可用，则使用相对路径。

  axios.post('/rest/', {data}, {headers})

【讨论】：

我假设您的所有代码都按预期工作
感谢您的回答。我不完全确定您所说的 docker id 是什么意思，以及由此产生的对 api 的调用会是什么样子。对于客户端，restapi 可通过前端的 nginx 服务器通过：'localhost:5001/rest' 获得——你是否建议我使用这个 url？我很想知道在这种情况下是否有办法使用 docker 跨容器通信 vpn，这样我就不必在每次将代码推送到生产环境之前手动更改 url？
这发生在我使用 Docker 工具箱的 Windows 中，该工具箱使用 192.168.99.100（这是我提到的 docker ip）在 Virtual Box 中部署容器。是的，您应该使用本地主机。请参阅this response 以使用子域配置 nginx。这样您的本地部署就像生产服务器。
如果后端也部署在前端，则使用相对路径。像/休息的东西