React 应用程序无法从 docker-compose 中的 springboot 接收数据

Question

我认为“来自后端：嗨。这是 Spring 说话。” 执行此代码时，应出现在主屏幕（本地主机）上。

但是，只有“来自后端：”出现在 localhost 中。

当不使用“docker-compose”时它可以正常工作。

下面是我的代码，我想要一些建议。

反应部分
应用程序.js

import React, {useEffect, useState} from 'react';
import axios from 'axios';

function App() {
   const [hello, setHello] = useState('')

    useEffect(() => {
        axios.get('/api/hello')
        .then(response => setHello(response.data))
        .catch(error => console.log(error))
    }, []);

    return (
        <div>
            from backend : {hello}
        </div>
    );
}

export default App;

setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://backend:8080',
      changeOrigin: true,
    })
  );
};

dockerfile

FROM node:alpine
COPY package.json ./
RUN npm install
COPY ./ ./
CMD ["npm","run","start"]

spring-boot 零件IndexController.java

package com.chickenbandits.daeily.web;

import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RequiredArgsConstructor
@RestController
public class IndexController {

    @GetMapping("/api")
    public String index() {
        return "index";
    }

    @GetMapping("/api/hello")
    public String hello() { return "Hi. This is Spring speaking."; }
}

dockerfile

FROM openjdk:18
ARG JAR_FILE=*.jar
COPY build/libs/daeily-*-SNAPSHOT.jar app.jar
ENTRYPOINT ["java","-jar","app.jar"]

docker-compose.yml

version: '3'
services:
  backend:
    image: "0rdinary/daeily"
    ports:
      - "8080:8080"
  frontend:
    image: "0rdinary/daeily-front"
    ports:
      - "80:3000"

Answer 1

我相信您需要设置container_name才能使“magic networking/DNS”正常工作。

version: '3'
services:
  backend:
    image: "0rdinary/daeily"
    container_name: backend <-- this
    ports:
      - "8080:8080"
  frontend:
    image: "0rdinary/daeily-front"
    container_name: frontend <-- this probably not necessary but nice to have
    ports:
      - "80:3000"

没有它，容器将无法识别其主机名。