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
- Connect both containers to the newly created network:
docker network connect test [container id 1]
docker network connect test [container id 2]
- 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?
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 :
Angularrunning at http://localhost:4200APIrunning at http://localhost:8080Problem
The Angular app couldn't reach the API.
The following code gave me network related errors all the time.
Solution
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
apiservice in theangularservice definition in thedocker-compose.ymlThen I fixed the network error by replacing
localhostwithapiin the Angular app.You don't need a proxy. However, you might have to tweak your config to make it work.