Question

我有一个问题。我已经创建了简单的React和Spring-Boot应用程序，并为两者创建了dockerfile。 Spring-Boot显示一些API，React对此发出请求。但是，它们都可以在端口上工作（React-3000和Spring-Boot-8080）。当我发出请求时，我的信息是这样的：

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

为了与docker-compose一起使用，我应该如何更改它？因为当我在docker-compose文件中导出端口时，此抓取请求是在容器内部而不是外部进行的。

docker-compose：

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

Answer 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/。上面的示例中起作用的相关代码段。

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

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

1 个答案: