Docker ReactJS Communication with other container

Question

I don't seem to be able to sent a http request from a Website to my backend using the Docker VPN.

I have this docker-compose file:

version: '3.7'

services:
  frontend:
    ports:
      - 5001:5001
    build: "./..."
  restapi:
    build: "./.../"
    command: gunicorn rest.wsgi:application --bind 0.0.0.0:8000
    expose:
      - 8000
    depends_on:
      - db
  db:
    image: postgres:10.5-alpine
    volumes:
      - postgres_data:/var/lib/postgresql/data/

Now, from my react frontend, I am trying to sent a post request

axios.post('http://restapi:8000/rest/', {data}, {headers})

--> The request simply fails and never gets to my restapi service

If I go in my container in my container: docker exec -it "container-id" sh and then sent a wget (curl) request to the url, everything works fine.

I am asuming that, as soon as the website runs in the browser, I have leftthe container and therefore the VPN of docker?

But how can I make a request across containers from a react frontend?

the backend is the "restapi" service from the docker-compose. It has its own container and is served from the docker-compose. — Xen_mar, Mar 16 '19 at 10:58
I am not sure if I understand correctly. The axios call is triggered by an User action in the browser (right now: localhost). If I inspect the request, the url is not resolved to a server ip but looks like this: http://restapi/rest/ — Xen_mar, Mar 16 '19 at 11:04
Ah you meant "from my react frontend" instead of backend right? — Carlos Cavero, Mar 16 '19 at 11:04

Carlos Cavero · Accepted Answer · 2019-03-16T12:16:28.827

1

Your containers can see one each other through the service names. But the browser is trying to access as client. So yes when you deploy to a VM everything would work. To test your local deployment the client needs to know where restapi is, so you need to include in your hosts:

    <docker-ip or localhost>     restapi

UPDATE: if the backend is also available in the frontend use relative paths.

  axios.post('/rest/', {data}, {headers})

edited Mar 16 '19 at 12:16

answered Mar 16 '19 at 11:11

Carlos Cavero

3,011
5
21
41

I am supposing all your code is working as expected – Carlos Cavero Mar 16 '19 at 11:13
Thanks for your answer. i am not completely sure what you mean by docker id, and what the resulting call to the api would look like. For a client the restapi is available via an nginx server on the frontend via: 'http://localhost:5001/rest/' -- are you proposing that I use this url? I was curious to find out if there is a way to use the docker cross-container communication vpn in this scenario so I don't have to manually change the url before pushing code to production every time? – Xen_mar Mar 16 '19 at 11:21
This happend to me in Windows with Docker toolbox which deploy containers in Virtual Box using 192.168.99.100 (this is the docker ip I refered to). Yes you should use localhost. See [this response](https://stackoverflow.com/questions/52291042/angular-app-running-on-nginx-and-behind-an-additional-nginx-reverse-proxy/55088849#55088849) to configure nginx with sub domains. This way your local deployment is like production server. – Carlos Cavero Mar 16 '19 at 11:58
If the backend is deployed also in the frontend use relative paths. Something like/rest – Carlos Cavero Mar 16 '19 at 12:14

Docker ReactJS Communication with other container

1 Answers1