CODEWITHSUNDEEP
djangoreactjsdockernginx
Bittersweet-dev
Bittersweet-dev

Reputation: 1

Docker container does not communicate with others in same docker network(bridge)

I'm trying to set the environment for web server on amazon web server. I want to use django, react, nginx and they are running on each docker container.

Belows are the command for running docker container.

sudo docker run --name django-server
  -it -d -p "8000:8000"
  --volume=$(pwd)/trello-copy-django-src:/backend/trello-copy
  django-server

sudo docker run --name nginx-server
  -d -p "80:80"
  --volumes-from react-server
  nginx-server

I did not specified a custom docker network bridge and I checked that they are on same default bridge by typing $ docker inspect bridge.

[{
  "Name": "bridge",
  ...,
  "Containers": {
    "...": { "Name": "django-server", ... },
    "...": { "Name": "react-server", ... },
    "...": { "Name": "nginx-server", ... },
  }
}]

So, I expected the react code down below works. But it worked only at my laptop, which has exactly same docker structure of aws.

...
const res = await fetch('http://127.0.0.1:8000/api/');
...

Failed to load resource: net::ERR_CONNECTION_REFUSED 127.0.0.1:8000/api/:1

What am I doing wrong?

These are codes in my settings.py file of django.

CORS_ORIGIN_ALLOW_ALL=True # only for dev
CORS_ALLOW_CREDENTIALS=True # only for dev
CORS_ORIGIN_WHITELIST = (
    'http://localhost',
    'http://localhost:3000',
)

The CORS message was App.js:10 Fetch API cannot load django-server:8000/api/. URL scheme must be "http" or "https" for CORS request..

I think it's different issue, and then django and CORS are not really problem... am I right?

I found that the 'localhost' of ajax await fetch('http://127.0.0.1:8000/api/'); means client side(browser) indeed.

Do I have to use server's public IP in there?

Upvotes: 0

Views: 519

Answers (1)

ruddra
ruddra

Reputation: 51998

You can't call by 127.0.0.1. Instead, you need to use name of the running container. Like this:

const res = await fetch('django-server:8000/api/');

Upvotes: 1

Related Questions