'Cannot access nodejs + express backend container from frontend angular + nginx container

I have 2 apps, the first one was made using Node + Express, and the second one with Angular. I am using Docker (with docker compose), i actually have 3 containers, backend, frontend and mongodb, check out my docker-compose.yml:

services:
  mongodb:
    image: mongo:5.0.5-focal
    container_name: mongodb
    environment:
      MONGO_INITDB_ROOT_USERNAME: ******
      MONGO_INITDB_ROOT_PASSWORD: *********
  backend:
    build: ./backend
    container_name: backend
    image: backend:v1.0
    env_file:
      - ./backend/config.env
    ports:
      - "3000:3000"
    depends_on:
      - mongodb
  frontend:
    build: ./frontend
    container_name: frontend
    image: frontend:v1.0
    ports:
      - "8080:80"
    depends_on:
      - backend

The Dockerfile of the different apps are inside specific folder (they are working correct). I executed the command to inspect the default network created by Docker on docker compose up like this docker inspect default_coal and i got the following output:

[
    {
        ... some other config
        "Containers": {
            "0814190f3d6045a0cd7e0b26194ad3dc3ad2dcc87fa9cd04521002cad01b0e0c": {
                "Name": "frontend",
                "EndpointID": "1562c6c2b803d62f0057425e7dc60492e0f75a1d3059cce44001c747755cd512",
                "MacAddress": "02:42:ac:14:00:04",
                "IPv4Address": "172.20.0.4/16",
                "IPv6Address": ""
            },
            "5d0287c5b57b0d15a74952df2f69fc4655a32c88eebfdfdf2462f02083a0e86e": {
                "Name": "backend",
                "EndpointID": "a99618bf8dd48f01ee36b4fe94a8e26ae3ea9169385a7195fa13876758aa2b3e",
                "MacAddress": "02:42:ac:14:00:03",
                "IPv4Address": "172.20.0.3/16",
                "IPv6Address": ""
            },
            "a77a36054248301c7c20490795b59ede19cb997a4f1de26f9264adb549593e40": {
                "Name": "mongodb",
                "EndpointID": "dbc0777ff8811b4500185779b0778647e8b0715f7721e1924e366b4745173807",
                "MacAddress": "02:42:ac:14:00:02",
                "IPv4Address": "172.20.0.2/16",
                "IPv6Address": ""
            }
        },
        "Options": {},
        "Labels": {
            "com.docker.compose.network": "default",
            "com.docker.compose.project": "coal",
            "com.docker.compose.version": "2.2.3"
        }
    }
]

I read a lot of docs and i know i can access another container in the same network using its container name, so, in the Angular enviroment file, i have the following URL to access the backend from frontend container to backend container:

export const environment = {
  production: true,
  API: 'http://backend:3000',
};

It is supposed to work, but it does not. When the frontend makes some request to the backend it keeps the backend word and does not replace it with the backend container ip or something. So, i am getting an error due to this.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source