Can't access rails-api backend with hostname in docker-compose

Question

I am trying to make a rails-api backend and react frontend website with docker-compose. But i couldn't send get request to rails-api backend with axios with my hostname (stated in docker-compose). I can access backend through localhost but that will be a problem (i assume) when i deploy the multi-container app to aws elastic beanstalk.

I am trying to access values like this:

const value = await axios.get('http://website:3000/api/v1/examples');

This is in my docker-compose.yml:

version: '2'

services:
  website:
    depends_on:
      - 'postgres'
      - 'redis'
    build: .
    ports:
      - '3000:3000'
    volumes:
      - '.:/app'
    env_file:
      - '.env'
  frontend:
    build:
      context: ./../atwo-react-2
      dockerfile: Dockerfile.dev
    ports:
      - '3001:3001'
    volumes:
      - ./../atwo-react-2:/app
    depends_on:
      - website

I get this error instead

GET http://website:3000/api/v1/examples net::ERR_NAME_NOT_RESOLVED in google console

Thank you in advance. Any help is most welcomed.

Answer 1

I managed to get some clue from a stack overflow post. Here Unable to have Docker containers communicate with each other . As the answer in the post suggests, I had to set up a nginx container to proxy (redirect) the request.

I changed my axios request to:

const value = await axios.get('/api/v1/examples');

And made a nginx container with a default.conf file like such:

upstream website {
    server website:3000;
}

upstream frontend {
    server frontend:3001;
}

server {
    listen 80;

    location / {
        proxy_pass http://frontend;
    }

    location /sockjs-node {
        proxy_pass http://frontend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location /api {
        proxy_pass http://website;  
    }
}

Hope this information is able to help someone who is stuck.