How to serve multiple react applications with docker and nginx?

Viewed 336

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?

0 Answers
Related