如何将对接组合与反应和弹簧启动连接起来

Question

我有个问题。我创建了简单的React和Spring应用程序，并为这两个应用程序创建了dockerfile。Spring显示一些API并对其做出响应请求。但是，它们都在端口上工作(Reacti-3000和SpringBoot-8080)。当我提出要求时，我得到了这样的东西：

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

我该怎么改变这个，才能和码头工一起工作呢？因为当我在文件中导出端口时，这个fetch会在容器中发出请求，而不是在容器之外。

码头工人-组成：

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撰写，它将帮助说明您如何能够完成您想要做的事情：

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为您的应用程序设置一个网络。服务的每个容器都加入了默认网络，并且可以被该网络上的其他容器访问，并且可以在与容器名称相同的主机名上被它们发现。