基于Docker与Nginx实现NX MFE独立部署的路由问题排查

问题核心是当前配置会把所有/app1/路径的请求都代理到MFE容器，导致直接访问该路径时返回MFE的index.html。通过调整Nginx的路由规则，让只有MFE的静态资源文件被代理，而所有路径访问（包括/app1）都返回主机的index.html，即可解决问题。

具体配置修改 #

替换原有Nginx配置中的location /app1/块，新增精准匹配MFE资源的规则，并保留主机根路径的处理逻辑：

upstream remote_app1 {
  server remote_app1_container:80;  
}

server {
  # 保留原有listen、server_name等基础配置
  ..

  # 1. 优先代理MFE的静态资源文件
  location ~ ^/app1/(remoteEntry\.js|main\.js|polyfills\.js|runtime\.js|styles\.css|assets/.*)$ {
      proxy_pass http://remote_app1/$1;
      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;
      
      # 对MFE静态资源应用缓存策略（和主机一致）
      expires 1w;
      add_header Cache-Control "public";
  }

  # 2. 主机应用的根路径处理，所有未匹配资源的请求都走这里
  location / {
    alias /usr/share/nginx/html/host/;
    try_files $uri $uri/ /index.html;

    # 禁止缓存JSON文件
    location ~* \.(json)$ {
        expires -1;
        add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
    }

    # 缓存静态文件
    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';
    }
  }
}

关键逻辑说明 #

• 当直接访问www.my-site.com/app1时，请求会进入location /块，触发try_files规则，返回主机的index.html。主机Angular应用加载完成后，会自动请求MFE的remoteEntry.js等资源，这些请求会匹配到第一个location规则，被代理到MFE容器获取对应文件。
• 从根路径跳转至/app1时，逻辑完全一致，依然由主机的index.html主导加载流程，保持原有正常功能。
• 正则规则中的资源列表可根据MFE实际构建产物补充（比如如果有其他命名的chunk文件，需要添加到正则中）。

配套调整MFE容器的Nginx配置 #

为避免意外情况，确保MFE容器的Nginx只返回静态资源，不处理路由返回自身的index.html：

server {
  listen 80;
  root /usr/share/nginx/html;

  location / {
    try_files $uri =404; # 仅返回存在的文件，找不到则返回404
  }

  # 静态资源缓存策略
  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|eot|woff|woff2|ttf)$ {
    expires 1w;
    add_header Cache-Control "public";
  }
}

内容的提问来源于stack exchange，提问作者Dale