1

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.

tgogos
  • 23,218
  • 20
  • 96
  • 128
Stan
  • 131
  • 1
  • 8
  • Are you trying to open `http://website:3000/api/v1/examples` with your browser and you get this error? What do you mean by saying *"google console"*? – tgogos Jul 22 '19 at 10:02
  • It is an api endpoint which I'm suppose to get a string back. By 'google console' meaning when i check the browser's console. I am using react.js frontend, that's why i check my browser's console for response. – Stan Jul 22 '19 at 10:10
  • Is it container-to-container communication or host-to-container? – tgogos Jul 22 '19 at 10:11
  • A container-to-container communication. I have tried this way of calling apis with httparty in rails and it works. I was calling it like "http://:5005/" – Stan Jul 22 '19 at 10:12
  • 1
    @tgogos Thank you so much for your help. Managed to get some clue to the problem and made a fix. – Stan Jul 23 '19 at 09:11

1 Answers1

2

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.

Stan
  • 131
  • 1
  • 8
  • Hey Stan, would you mind to explain this approach? I ran into the same problem but in my case adding an nginx container did not help. The Error "Failed to load resource: net::ERR_NAME_NOT_RESOLVED" pops up with "http://my-backend:5000/api/get/options - my-backend is the name of the backend-container... I'm running out of solutions, everything works perfectly locally – patreu22 Mar 24 '20 at 14:59