如何将 docker-compose 与 react 和 spring boot 连接起来答案

【问题标题】：How to connect docker-compose with react and spring boot如何将 docker-compose 与 react 和 spring boot 连接起来
【发布时间】：2019-11-25 10:27:25
【问题描述】：

我有一个问题。我创建了简单的 React 和 Spring-Boot 应用程序，并为两者创建了 dockerfile。 Spring-Boot 显示一些 API，React 向它发出请求。但是，它们都适用于端口（React - 3000 和 Spring-Boot - 8080）。当我提出请求时，我的 fetch 是这样的：

fetch("http://localhost:8080/projects")

我应该如何更改它，以便与 docker-compose 一起使用？因为当我在 docker-compose 文件中导出端口时，这个 fetch 会在容器内发出请求，而不是在容器外。

码头工人撰写：

version: '3'
services:
  frontend:
    image: "IMAGE/FRONTEND:latest"
    ports:
      - "3000:3000"
    depends_on:
      - backend
  backend:
    image: "IMAGE/BACKEND:latest"
    ports:
      - "8080:8080"

【问题讨论】：

添加你的 docker compose yml 和你得到的错误应该可以帮助人们解决这个问题。要深入了解它，您需要确保使用 api 容器的主机名从 react 应用程序进行调用。
嗯，我认为它不会向我自己的计算机的本地主机发出请求，而是向容器的本地主机发出请求，因此我认为应该以另一种方式指定此获取请求
前端配置在哪里找到后端
前端配置只发出诸如 fetch("localhost:8080/projects") 之类的请求。使用 spring-boot 公开。因此它可以在计算机上工作，在本地运行两个项目。但是在 docker 中，当您发出请求时像这样它会获取到 docker 的 localhost，而不是我的计算机。

标签： reactjs spring-boot docker docker-compose

【解决方案1】：

这是一个 docker compose 示例，它将帮助说明您如何做您想做的事情：

version: '3'
services:
  frontend:
    image: "alpine:latest" #Using alpine as it has wget
    command: sh -c "while true; do wget -q -S -O /dev/null http://backend:80 && sleep 4; done" #This just a sample script that get from the backend service a webpage. Note the usage of the "backend" hostname. it writes to null and only displays headers for brevity. This is just to prove that the front end can reach backend.
    depends_on:
      - backend
  backend:
    image: "nginxdemos/hello" # just a dummy image that exposes a html page over port 80
    #Notice you dont need to expose ports. Look at docker compose networking for a better understanding of how these two containers are on the same n/w.

基本上就像您的后端一样，我使用了一个 niginx 演示容器，该容器通过端口 80 为页面提供服务。对于前端，我使用了一个 shell 脚本，它只查询后端并只显示标题。

因此，在您的情况下，问题在于您的前端尝试转到localhost 作为后端。而 localhost 只是指向前端容器。您真的希望它指向主机名backend，这反过来会将您路由到后端服务中的容器。

要了解撰写网络的工作原理，请查看https://docs.docker.com/compose/networking/。在上面的例子中起作用的相关sn-p。

默认情况下，Compose 会为您的应用设置一个网络。每个服务的容器加入默认网络，并且两者都是该网络上的其他容器可以访问，并且可以被该网络上的其他容器发现它们的主机名与容器名称相同。

【讨论】：