Connect from Angular Docker container to Asp.Net container - asp.net

Question

I created a simple program with three containers: database (MS SQL Server), backend (Asp.Net Core), and frontend (Angular 8).
To run it I use a docker-compose:
services:
sqlserver:
image: mcr.microsoft.com/mssql/server:2019-latest
#ports:
#- 1433:1433 - it's hidden
volumes:
- data-sql:/var/opt/mssql
environment:
SA_PASSWORD: "Pass"
ACCEPT_EULA: "Y"
web_api:
build:
dockerfile: WebApi/Dockerfile
#ports:
#- 5000:80 - it's hidden
depends_on:
- sqlserver
environment:
"ASPNETCORE_URLS": "http://+:5000"
"ConnectionStrings:SqlConnectionString": "Server=sqlserver,1433;Database=db;User Id=sa;Password=pass;"
web_app:
build: WebApp/
ports:
- 4200:80
depends_on:
- web_api
environment:
"ENV": "Production"
"BASE_URL": "http://web_api:5000"
I want to hide the external ports for sqlserver and web_api, because they are only used in the docker-compose services.
I could hide the sqlserver port by adding the SqlConnectionString environment to the web_api.
But this approach doesn't work with web_app. My idea was to add the "BASE_URL": "http://web_api:5000" to the web_app so it'll be able to send requests on this URL, but it doesn't work.
Have any ideas on how to do this?

Answer 1

This is because this kind of frontends (SPA) communicates with your backend not internally (docker network) but externally (your host network).
Accordingly, 2 steps are needed:
🔴 Backend must be accessible thru host network
🟢 Frontend should point to the public URL of backend
web_api:
build:
dockerfile: WebApi/Dockerfile
ports: # 🔴 Added
- 5000:80 # 🔴 Added
depends_on:
# ... etc
web_app:
build: WebApp/
# .... etc
environment:
"ENV": "Production"
"BASE_URL": "http://localhost:5000" # 🟢 Changed