Docker container with Nginx and Angular and other container with Asp.net core cannot get the rever proxy via nginx working

Question

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 uri of localhost:4000/api to invoke the api.

Nginx is listening on port 4000 and proxies them to port 5000 where the API is listening.

I can get my two docker services both noticeapi and the reverseproxywithui up and running. But when I browse the ui and click the search button on the UI which invokes the api, i get connection refused error for the api invocation, which means nginx is rejecting the calls to the api.

Here is my docker-compose.yml

version: '3.4'

networks:
  corp:
    driver: bridge

services:

  reverseproxyandui:
    image: ${DOCKER_REGISTRY-}reverseproxyandui
    build:
     context: ./notice-ui-app
     dockerfile: ui.prod.dockerfile
    container_name: reverseproxyandui
    networks:
      - corp

    ports:
      - "80:80"
    restart: always
    depends_on :
      - noticeservice

  noticeservice:

    image: ${DOCKER_REGISTRY-}noticeservice
    build:
      context: .\noticeService
      dockerfile: noticeService/Dockerfile
    container_name: noticeservice
    networks:
      - corp
    ports:
      - "5000:5000"
    restart: always

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/cli@8.3.3

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 auto;

events { worker_connections 1024; }

http {

    sendfile on;

    upstream noticeservice {
        server noticeservice:5000;
    }

    server {
        listen 80;
        listen 4000;
        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 / {
            try_files $uri $uri/ /index.html =404;
        }

         location /api {
            proxy_pass         http://localhost:5000;
            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;


        }
    }


}

Appreciate your help with this.

Answer 1

The issue is with the Nginx config.

Found the answer on the following link

"When this is hosted in AWS Fargate task, we need change the value of 'upstream app_servers' to '127.0.0.1:5000'. Because when the Fargate task runs in Awsvpc networking mode (which is default) it will use the local loopback interface of 127.0.01 to connect to the other container (service) defined as a part of the Fargate task which will be covered in the later sections."

So my Ngnix config is now different for dev and Prod.

In Prod I have update proxy pass to use local loop back address of 127.0.0.1:5000 and use service name when running on my dev machine.