Unable to communicate between docker containers on localhost

Question

First, I am new to docker containers, I don't know much about how they are running, but I have this setup:

• One docker container for a .NET Core API (Docker File autogenerated by VS-2019)
• One docker container for an Angular 9 application

The API is reachable at https://localhost:44384/api/weatherforecast The containerized angular app is reachable at https://localhost:4200

If I am running the angular app without docker, after fixing the CORS issues with a proxy, I am able to connect to https://localhost:44384/api/weatherforecast. However, when I am running the dockerized version I am receiving the following error:

Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

In the VS Console I see this error:

clearance_1  | [HPM] Error occurred while trying to proxy request /api/weatherforecast from loccoalhost:4200 to https://localhost:44384 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

It seems to be a connectivity issue, so I dig a bit on the internet and I tried to bring these two containers under the same network.

Here are the steps: 1. Create a bridge "test" network

docker network create test

2. Connect both containers to the newly created network:

docker network connect test [container id 1]

docker network connect test [container id 2]

3. If I inspect the network everything seems to be fine, but the api is still not callable on localhost

Other potential useful stuff:

docker-compose.yml :

version: "3.7"
services:
  clearance:
     build:
     # network: host
      context: .
      dockerfile: DockerFileLocal
     ports:
       - 4200:4200
     volumes:
       - /app/node_modules
       - .:/app

proxy.conf.json

{
   "/api/*": {
      "target": "https://localhost:44384",
      "secure": false,
      "logLevel": "debug",
      "changeOrigin": true
   }
}

What am I missing?

Answer 1

I had a similar issue with an angular app and an API both running in separate Docker containers.
Both apps were individually working fine with the following setup :

Angular running at http://localhost:4200
API running at http://localhost:8080

Problem

The Angular app couldn't reach the API.
The following code gave me network related errors all the time.

this.http.get('http://localhost:8080').subscribe(console.log);

Solution

Links
Link to containers in another service. Either specify both the service name and a link alias (SERVICE:ALIAS), or just the service name. Containers for the linked service are reachable at a hostname identical to the alias, or the service name if no alias was specified.

When a container needs to reach another container via the network, we need to create a link.
I ended up creating a link to the api service in the angular service definition in the docker-compose.yml

version: "2"
services:
  api:
    build:
      context: .
      dockerfile: ./api/Dockerfile
    volumes:
      - ./api:/usr/src/app
    ports:
      - "8080:8080"

  angular:
    build:
      context: .
      dockerfile: ./angular/Dockerfile
    volumes:
      - ./angular:/usr/src/app
    ports:
      - "4200:4200"
    links:
      - api

Then I fixed the network error by replacing localhost with api in the Angular app.

this.http.get('http://api:8080').subscribe(console.log);

You don't need a proxy. However, you might have to tweak your config to make it work.