502 Bad Gateway while setting up Nginx for an ASP .NET WebApp in a Container Network

Question

I recently followed a guide to get started with ASP .NET and created a simple WebApp.

Then I discovered Docker and from now on I would like to Dockerize of all of my services.

My idea is to run one container with Nginx and one container with my ASP .NET Webapp to route and manage incoming traffic.

The containers themselves are running just fine. I can also access the WebApp through its exposed port but accessing it through Nginx with port 80 returns:

502 Bad Gateway.

I have read that this may be due to Nginx not knowing the WebApp container but I have checked that they are in the same network.

docker logs nginx_container returns this when I call localhost:80:

2020/01/14 13:48:18 [error] 6#6: *12 connect() failed (111: Connection refused) while connecting to upstream, client: 172.21.0.1, server: , request: "GET / HTTP/1.1", upstream: "http://127.0.0.1:4000/", host: "localhost"
2020/01/14 13:48:18 [error] 6#6: *12 connect() failed (111: Connection refused) while connecting to upstream, client: 172.21.0.1, server: , request: "GET / HTTP/1.1", upstream: "http://127.0.0.1:4000/", host: "localhost"
2020/01/14 13:48:18 [error] 6#6: *12 no live upstreams while connecting to upstream, client: 172.21.0.1, server: , request: "GET /favicon.ico HTTP/1.1", upstream: "http://localhost/favicon.ico", host: "localhost", referrer: "http://localhost/"
172.21.0.1 - - [14/Jan/2020:13:48:18 +0000] "GET /favicon.ico HTTP/1.1" 502 559 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36"

I am guessing that it is some kind of configuration that I am getting wrong or do not understand properly. Most of the WebApp configuration was auto-generated by VS.

WebApp Dockerfile:

FROM mcr.microsoft.com/dotnet/core/aspnet:3.0-buster-slim AS base
WORKDIR /app
EXPOSE 4000
EXPOSE 4500

FROM mcr.microsoft.com/dotnet/core/sdk:3.0-buster AS build
WORKDIR /src
COPY ["RazorPagesMovie.csproj", "./"]
RUN dotnet restore "RazorPagesMovie.csproj"
COPY . .
WORKDIR "/src/"
RUN dotnet build "RazorPagesMovie.csproj" -c Release -o /app/build

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

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "RazorPagesMovie.dll"]

Nginx Dockerfile:

FROM nginx:latest

COPY nginx.conf /etc/nginx/nginx.conf

Nginx configuration:

worker_processes 1;

events { worker_connections 1024; }

http {

    sendfile on;

    upstream web-api {
        server razorpagesmovie:4000;
    }

    server {
        listen 80;
        server_name localhost;
        location / {
            proxy_pass         http://172.21.0.1:4000;
            proxy_redirect     off;
            proxy_http_version 1.1;
            proxy_cache_bypass $http_upgrade;
            proxy_set_header   Upgrade $http_upgrade;
            proxy_set_header   Connection keep-alive;
            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;
        }
    }
}

Docker-Compose:

version: '3.4'

services:
  reverseproxy:
    build:
      context: ./Nginx
      dockerfile: Nginx.Dockerfile
    ports:
      - "80:80"
    restart: always

  razorpagesmovie:
    image: ${DOCKER_REGISTRY-}razorpagesmovie
    build:
      context: .
      dockerfile: Dockerfile
    depends_on:
      - reverseproxy
    restart: always

Docker-Compose-Override:

version: '3.4'

services:
  razorpagesmovie:
    environment:
      - ASPNETCORE_ENVIRONMENT=Development
      - ASPNETCORE_URLS=http://+:4000;http://+:4500
    ports:
      - "4000:4000"
      - "4500:4500"
    volumes:
      - ${APPDATA}/Microsoft/UserSecrets:/root/.microsoft/usersecrets:ro
      - ${APPDATA}/ASP.NET/Https:/root/.aspnet/https:ro

Answer 1

I fixed the problem by editing the Nginx configuration. As I suspected there was some problem with it. After thoroughly reading the docs on Nginx again I think I understand how it works now.

The updated Nginx configuration:

worker_processes 1;

events { worker_connections 1024; }

http {

    sendfile on;

    upstream rzpage {
        server razorpagesmovie:4000;
    }

    server {
        listen 80;
        server_name rzpage;
        location / {
            proxy_pass         http://razorpagesmovie:4000;
            proxy_redirect     off;
            proxy_http_version 1.1;
            proxy_cache_bypass $http_upgrade;
            proxy_set_header   Upgrade $http_upgrade;
            proxy_set_header   Connection keep-alive;
            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;
        }
    }
}

I am unsure if I should edit my answer into my question, so I will leave it as is for now.