I am trying to use the docker compose to build two containers:
- React app
- 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:
- Both containers are worked.
- I can ping the internal IP from the frontend container to the backend, and it responds, so no network issues.
- 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!