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?