Docker container with Nginx and Angular and other container with Asp.net core cannot get the routing working

I am building two conatiners with one container having the .net core api running and another with nginx and angular application running. Happy to receive feedback if this approach is not a right one.

Angular is using base uri of localhost:5000/api to invoke the api.

I can get my two docker services both noticeapi and the reverseproxywithui up and running. But when I browse the ui with url as http://localhost cannot get it working. I get the swagger UI from my api that means nginx is forwarding the request to my api.

Here is my docker-compose.yml

version: '3.4'

services:

  reverseproxyandui:
    image: ${DOCKER_REGISTRY-}reverseproxyandui
    build:
     context: ./notice-ui-app
     dockerfile: ui.prod.dockerfile
     #args:
      #env: prod
    ports:
      - "80:80"
    restart: always
    links :
      - noticeservice

  noticeservice:
    image: ${DOCKER_REGISTRY-}noticeservice
    build:
      context: .noticeService
      dockerfile: noticeService/Dockerfile
    expose:
      - "5000"

My docker file for the api is as follows

FROM mcr.microsoft.com/dotnet/core/aspnet:2.2-stretch-slim AS base
WORKDIR /app

EXPOSE 1433
EXPOSE 5000

FROM mcr.microsoft.com/dotnet/core/sdk:2.2-stretch AS build
WORKDIR /src
COPY ["NotificationService/NotificationService.csproj", "NoticeService/"]
RUN dotnet restore "NoticeService/NoticeService.csproj"
COPY . .
WORKDIR "/src/NoticeService"
RUN dotnet build "NoticeService.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "NoticeService.csproj" -c Release -o /app/publish



FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .

ENV ASPNETCORE_ENVIRONMENT=Development
ENV ASPNETCORE_URLS=http://*:5000


ENTRYPOINT ["dotnet", "NoticeService.dll"]

The docker file for my angular UI is as follows:

###Stage 1
FROM node as node
WORKDIR /webclientapp
COPY package.json package.json
RUN npm install

#Angular CLI
RUN npm install -g @angular/[email protected]

COPY . .

RUN npm run build -- --prod

FROM nginx:alpine

## Remove default Nginx website
RUN rm -rf /usr/share/nginx/html/*

VOLUME /var/cache/nginx
COPY --from=node /webclientapp/dist/Notice-ui-app /usr/share/nginx/html
COPY ./config/nginx.conf /etc/nginx/nginx.conf


CMD ["nginx", "-g", "daemon off;"]

And the final file which is the nginx config as follows:

worker_processes 1;

events { worker_connections 1024; }

http {

    sendfile on;

    upstream Notice {
        server Notice:5000;
    }

    server {
        listen 80;
        server_name  localhost;

        gzip                    on;
        gzip_comp_level         6;
        gzip_vary               on;
        gzip_min_length         1000;
        gzip_proxied            any;
        gzip_types              text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
        gzip_buffers            16 8k;
        client_max_body_size    256M;

        root /usr/share/nginx/html;

        index  index.html index.htm;
        include /etc/nginx/mime.types;
        default_type application/octet-stream;


        location / {
            proxy_pass         http://Notice;
            proxy_redirect     off; 
            proxy_set_header   Host $host;
            proxy_set_header   X-Real-IP $remote_addr;
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Proto $scheme;
            proxy_set_header   X-Forwarded-Host $server_name;

            try_files $uri $uri/;
        }
    }
}

If I remove proxy_pass from the nginx config I do get my angular UI but when i invoke the api’s in the angular UI they are not working means, Nginx is not routing my requests.

Appreciate your help with this.

Source: StackOverflow