title: Docker container with Nginx and Angular and other container with Asp.net core cannot get the rever proxy via nginx working
body: <p>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.</p>
  
  <p>Angular is using uri of localhost:4000/api to invoke the api.</p>
  
  <p>Nginx is listening on port 4000 and proxies them to port 5000 where the API is listening.</p>
  
  <p>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.</p>
  
  <p>Here is my docker-compose.yml</p>
  
  <pre><code>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
  </code></pre>
  
  <p>My docker file for the api is as follows</p>
  
  <pre><code>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"]
  </code></pre>
  
  <p>The docker file for my angular UI is as follows:</p>
  
  <pre><code>###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;"]
  </code></pre>
  
  <p>And the final file which is the nginx config as follows:</p>
  
  <pre><code>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;
  
  
          }
      }
  
  
  }
  </code></pre>
  
  <p>Appreciate your help with this.</p>