Reverse proxy to host using Docker

api.conf

upstream api-app {
  server host.docker.internal:8000;
}

server {
  listen 80;
  listen [::]:80;

  server_name api-app.localhost;

  location / {
    proxy_pass http://api-app;
    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-Host $server_name;
  }
}

docker-compose.yml

version: "3"

services:
  # nginx reverse proxy to enable the api and front end to be served from the
  # same host:port.
  # http://api-app.localhost:5000 -> dockerhost:8000
  # http://web-app.localhost:5000 -> dockerhost:8080
  proxy:
    image: nginx:alpine
    ports:
      - "5000:80"
    volumes:
      - "./docker/web.conf:/etc/nginx/conf.d/web.conf:ro"
      - "./docker/api.conf:/etc/nginx/conf.d/api.conf:ro"

web.conf

upstream web-app {
  server host.docker.internal:8080;
}

server {
  listen 80;
  listen [::]:80;

  server_name web-app.localhost;

  location / {
    proxy_pass http://web-app;
    proxy_http_version 1.1;
    proxy_redirect     off;
    proxy_set_header   Upgrade $http_upgrade;
    proxy_set_header   Connection "Upgrade";
    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-Host $server_name;
  }
}