React 应用程序集代理不适用于 docker compose

Question

I am trying to use the docker compose to build two containers:

1. React app
2. A flask server powered with gunicorn

I docker composed them up and both of them were boosted up. When I visited the react, it supposed to proxy the request from the react app with port 3000 to flask server with port 5000. But I encountered this:

frontend_1  | Proxy error: Could not proxy request /loadData/ from localhost:3000 to http://backend:5000.
frontend_1  | See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

which I figure means it still does not know the actual IP address of the backend container.

Here are some configurations:

docker-compose.yml

version: "3"

services:
    backend:
        build: ./
        expose: 
            - "5000"
        ports: 
            - "5000:5000"
        volumes: 
            - .:/app
        command: gunicorn server:app -c ./gunicorn.conf.py

        networks: 
            - app-test
    frontend:
        build: ./frontend
        expose: 
            - "3000"
        ports: 
            - "3000:3000"
        volumes: 
            - ./frontend:/app
        networks: 
            - app-test
        depends_on: 
            - backend
        links:
            - backend
        command: yarn start


networks:
    app-test:
        driver: bridge

backend Dockerfile

FROM python:3.7.3

WORKDIR /app 

COPY . /app 

RUN pip install -r requirements.txt 

frontend Dockerfile

FROM node:latest

WORKDIR /app 

COPY . /app 

gunicorn.conf.py

workers = 5
worker_class = "gevent"
bind = "127.0.0.1:5000"

frontend package.json

{
  "proxy": "http://backend:5000",
}

I tried nearly everything said online, and it just does not proxy the request.

Some information I have already known:

1. Both containers are worked.
2. I can ping the internal IP from the frontend container to the backend, and it responds, so no network issues.
3. when localhost:3000 is requested, my system will call Axios to send a POST request (/loadData) to the backend, where the proxy part should do the work and then the request should become somebackendip:5000/loadData/

Anyone could help me?

Thanks in advance!

Answer 1

尝试在 gunicorn conf 中将bind = "0.0.0.0:5000"更改为bind = "0.0.0.0:5000"并将后端服务中的端口相应地更改为"127.0.0.1:5000:5000" （最后一个是可选的）

Answer 2

By changing gunicorn.conf.py with

bind = "0.0.0.0:5000"

fixed my problem.