Docker 与反应应用程序组成网络问题

Question

I am running a react app and a json server with docker-compose.

Usually I connect to the json server from my react app by the following:

fetch('localhost:8080/classes')
    .then(response => response.json())
    .then(classes => this.setState({classlist:classes}));

Here is my docker-compose file:

version: "3"
services:
    frontend:
        container_name: react_app
        build:
            context: ./client
            dockerfile: Dockerfile
        image: praventz/react_app
        ports:
            - "3000:3000"
        volumes:
            - ./client:/usr/src/app
    backend:
        container_name: json_server
        build:
            context: ./server
            dockerfile: Dockerfile
        image: praventz/json_server
        ports:
            - "8080:8080"
        volumes:
            - ./server:/usr/src/app

the problem is I can't seem to get my react app to fetch this information from the json server.

on my local machine I use 192.168.99.100:3000 to see my react app

and I use 192.168.99.100:8080 to see the json server but I can't seem to connect them with any of the following:

backend:8080/classes

json_server:8080/classes

backend/classes

json_server/classes

{host:"json_server/classes", port:8080}

{host:"backend/classes", port:8080}

Both the react app and the json server are running perfectly fine independently with docker-compose up.

What should I be putting in fetch()?

Answer 1

Remember that the React application always runs in some user's browser; it has no idea that Docker is involved, and can't reach or use any of the Docker-related networking setup.

on my local machine I use [...] 192.168.99.100:8080 to see the json server

Then that's what you need in your React application too.

You might consider setting up some sort of proxy in front of this that can, for example, forward URL paths beginning with /api to the backend container and forward other URLs to the frontend container (or better still, run a tool like Webpack to compile your React application to static files and serve that directly). If you have that setup, then the React application can use a path /api/v1/... with no host, and it will be resolved relative to whatever the browser thinks "the current host" is, which should usually be the proxy.

Answer 2

You have two solutions:

1. use CORS on Express server see https://www.npmjs.com/package/cors
2. set up proxy/reverse proxy using NGINX