Next.js多区域开发环境Fast Refresh跨容器刷新问题求助

问题根源 #

当前app1的webpackDevMiddleware仅监听自身容器内的文件变更，app2的文件修改事件无法传递到app1的客户端；而直接访问app2时，app2自身的webpack监听机制正常工作。要实现全局刷新，需要让app2的热更新信号能通过app1的路由转发到客户端，同时让app1的rewrite规则支持热更新WebSocket路径。

分步解决方案 #

1. 配置app2的next.config.js #

修改app2的配置，确保热更新WebSocket能被app1的客户端正确访问：

const isDev = process.env.NODE_ENV === 'development';

module.exports = {
  ...(isDev ? {
    webpackDevMiddleware: (config) => {
      config.watchOptions = {
        poll: 1000,
        aggregateTimeout: 300,
      };
      config.devServer = {
        ...config.devServer,
        host: '0.0.0.0', // 允许容器外部访问dev server
        allowedHosts: 'all', // 开发环境下允许所有主机访问
        client: {
          // 指定WebSocket连接路径，适配app1的路由前缀
          webSocketURL: {
            pathname: '/app2/_next/webpack-hmr',
            hostname: 'localhost', // 主机访问app1的域名
            port: 3000, // app1映射到主机的端口
          },
        },
      };
      return config;
    },
  } : {}),
  basePath: '/app2', // 统一app2的路由前缀，避免和app1冲突
  output: 'standalone',
};

2. 更新app1的next.config.js #

添加WebSocket路径的rewrite规则，确保app2的热更新信号能被正确转发：

const { APP2_URL } = process.env;
const isDev = process.env.NODE_ENV === 'development';

module.exports = {
  webpackDevMiddleware: (config) => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300,
    };
    return config;
  },
  output: "standalone",
  async rewrites() {
    const baseRewrites = [
      {
        source: "/app1",
        destination: "/",
      },
      {
        source: "/app2",
        destination: `${APP2_URL}/app2`,
      },
      {
        source: "/app2/:path*",
        destination: `${APP2_URL}/app2/:path*`,
      },
    ];

    // 开发环境下添加WebSocket转发规则
    if (isDev) {
      baseRewrites.push({
        source: "/app2/_next/webpack-hmr",
        destination: `${APP2_URL}/_next/webpack-hmr`,
      });
    }

    return baseRewrites;
  },
};

3. 调整Docker网络配置 #

• 确保两个容器加入同一个自定义Docker网络，这样app1可以通过容器名访问app2（比如APP2_URL=http://app2:3000，其中app2是app2容器的名称）。
• 仅映射app1的3000端口到主机（比如docker run -p 3000:3000 app1），app2无需映射端口，通过app1的路由访问即可。

验证效果 #

1. 启动两个容器，访问localhost:3000/app1。
2. 路由到/app2，修改app2的代码文件。
3. 此时app2的webpack会触发热更新，信号通过app1转发到客户端，页面将自动刷新展示最新内容。

注意事项 #

• 上述配置仅针对开发环境，生产环境无需热更新相关设置，可通过NODE_ENV判断跳过。
• poll: 1000是Docker环境下必须的，因为容器文件系统通常不支持原生文件监听。
• allowedHosts: 'all'仅适合开发环境，生产环境需设置具体的允许主机列表。

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