Connect from Angular Docker container to Asp.Net container-CodePudding

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?

CodePudding user response：

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: