Frontend can't call dockerized api by it's service name in docker-compose file

Viewed 64

I'm trying to understand why my front end isn't able to reference my api via the service name here. I have a docker compose file that looks like this:

version: '3'
services:
  sssfe:
    image: myfrontendimage
    ports:
      - 9000:9000
    depends_on:
      - sssapi
  sssapi:
    image: myapiimage
    environment:
      - SQL_CONNECTION=myconnectionstring
    ports:
      - 44384:80
    depends_on:
      - mydatabase
  mydatabase:
    image: mcr.microsoft.com/mssql/server:2019-latest
    environment:
      - ACCEPT_EULA=Y
      - SA_PASSWORD=
    volumes:
      - ./data:/data
    ports:
      - 1433:1433
  reverseproxy:
    build:
      context: ./nginx
      dockerfile: Dockerfile
    ports:
      - 80:80
    links :
      - sssfe
volumes:
  sssvolume:  

In my frontend 'sssfe', I have a reference to my api like this:

const apiBase = "http://sssapi/api"

  export const getRequestAsync = async (urlPath) => {
    const url = `${apiBase}/${urlPath}`;
    const result = await fetch(url, {
      method: "get",
      mode: "cors",
      headers: {
        "Content-Type": "application/json",
      },
    }).then((res) => res.json())
    .catch(err => console.log("this is error ", err));
    return result;
  };

When I get my containers running on my server, I can see via the network tab in chrome dev tools that a call is being made to "http://sssapi/api/mypath", but this call fails saying connection refused, can't find server. However, if I changed the call to my site name like:

const apiBase = "http://myurl.com:44384/api"

it works. What makes this extra confusing is when I ssh into my sssfe container and do a "curl http://sssapi/api/mypath" I get back the expected results, so obviously it can hit the api from inside the container.

Just trying to see if I'm misunderstanding something or if my config is wrong as to why this wouldn't work?

0 Answers
Related