I have an Angular 16 application using Nx Micro Front End (MFE) architecture deployed currently with docker-compose. I have several MFEs all deployed within the same Nginx and this works just fine.

But now i want to isolate each MFE to its own container so I can deploy them independently. There will be a Nginx container for the host application, and then each remote (MFE) will have its own Nginx container with the updated js files and assets. The host nginx will use proxy_pass to route traffic to the nested nginx containers.

I have this working if I navigate to my root url www.my-site.com and then navigate to www.my-site.com/app1.

HOWEVER, if i navigate directly to www.my-site.com/app1, then the initial document for the site being served (index.html) is being served from app1, and not from the root since my nginx location has

upstream remote_app1 {
  server remote_app1_container:80;  
}

server {
  ..

  location {
    alias /usr/share/nginx/html/host/;
    try_files $uri $uri/ /index.html;

    # DONT CACHE JSON FILES
    location ~* .(json)$ {
        expires -1;
        add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
    }

    # CACHE STATIC FILES
    location ~* .(js|css|png|jpg|jpeg|gif|ico|svg|eot|woff|woff2|ttf)$ {
      expires 1w;
      add_header Cache-Control "public";
    }

    location = /index.html {
      expires -1;
      add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
    }
  }


  location /app1/ {
      proxy_pass http://remote_app1/;
      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;
  }
}

I want the initial document being served to ALWAYS be the index.html from the host application and never tried to come from the remote.

Is there something I can add to nginx to get this to happen?