'How to serve multiple react applications with docker and nginx?

I want to run development env for local development processes. There will be 2 react apps with 2 backend servers and separated databases (so overall 6 containers). I have Nginx config

server {
    listen 80;

    location /auth {
                proxy_pass http://account-service-frontend:3001;
                proxy_set_header   X-Forwarded-For $remote_addr;
                proxy_set_header   Host $http_host;
                proxy_http_version 1.1;
                proxy_set_header   Upgrade $http_upgrade;
                proxy_set_header   Connection "upgrade";
    }

    location / {
                proxy_pass http://manager-frontend:3000;
                proxy_set_header   X-Forwarded-For $remote_addr;
                proxy_set_header   Host $http_host;
                proxy_http_version 1.1;
                proxy_set_header   Upgrade $http_upgrade;
                proxy_set_header   Connection "upgrade";
    }

}

and docker-compose (below a part of code for front-end applications)

version: '3.8'
services:
  nginx:
    restart: unless-stopped
    container_name: my-project-nginx
    build:
      dockerfile: Dockerfile.dev
      context: ./nginx
    networks:
      - my-project-network
    ports:
      - '80:80'
    depends_on:
      - manager-frontend
      - account-service-frontend

  manager-frontend:
    build:
      dockerfile: Dockerfile.dev
      context: ./manager-frontend
    command: npm run start
    container_name: my-project-manager-client-frontend
    stdin_open: true
    tty: true
    volumes:
      - ./manager-frontend:/app
    environment:
      - PORT=3000
    restart: unless-stopped
    networks:
      - my-project-network

  account-service-frontend:
    build:
      context: ./account-service-frontend
      dockerfile: Dockerfile.dev
    container_name: my-project-manager-account-service-frontend
    command: npm run start
    stdin_open: true
    tty: true
    volumes:
      - ./account-service-frontend:/app
      - ./volumes/config/account-service-frontend:/account-service-frontend/configs
    environment:
      - PORT=3001
    restart: unless-stopped
    networks:
      - my-project-network

When I open localhost/ - it works fine for the manager-frontend container, but when I try to open /auth route and check my second frontend - It doesn't work. It's an empty blank without errors or smth else.

I want to run all containers using reverse proxy from Nginx and serve everything. There should be 2 separated front-ends and back-ends (with separated databases). And Nginx will process all elements, is it possible at all?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source