多节点负载均衡下Next.js应用ChunkLoadError问题求助（非粘性方案）

问题背景 #

• 部署环境：AWS ECS Docker容器 + Auto Scaling Group + Application Load Balancer
• 单节点运行正常，多节点部署时出现静态Chunk加载404错误
• 已配置generateBuildId统一构建ID，但问题仍存在
• 拒绝使用会话粘性（Stickiness），避免影响负载均衡效果

当前配置 #

next.config.js #

const nextConfig = {
  generateBuildId: async () => "default-build",
  experimental: {
    isrMemoryCacheSize: 0,
  },
};

module.exports = nextConfig;

Dockerfile #

ARG base_image_build="node:18.17.1"
ARG base_image_run="node:18.17.1-slim"

FROM ${base_image_build} AS builder
WORKDIR /opt/app
COPY . .

RUN yarn install --frozen-lockfile --production

FROM ${base_image_run} AS runner
ENV NODE_ENV=production
USER node
WORKDIR /opt/app

COPY --chown=node:node --from=builder /opt/app /opt/app
COPY --chown=node:node --from=builder /opt/app/node_modules ./node_modules
CMD ["yarn", "docker"]

yarn docker命令 #

yarn build && yarn start

错误信息 #

浏览器控制台日志 #

Failed to load resource: the server responded with a status of 404(Not Found)

ChunkLoadError: Loading chunk 84 failed.
(error: http://replaced-this-url/_next/static/chunks/app/%5Blang%5D/layout-332c238ae51cc7a7.js)
    at d.f.j(webpack - 8b6d851d58492f7f.js: 1: 3285)
    at webpack - 8b6d851d58492f7f.js: 1: 1427
    at Array.reduce(<anonymous>)
        at d.e (webpack-8b6d851d58492f7f.js:1:1393)
        at self.__next_chunk_load__ (488-4c8bbce90f9d2c06.js:1:3713)
        at 488-4c8bbce90f9d2c06.js:9:5403
        at 488-4c8bbce90f9d2c06.js:9:5813
        at N (488-4c8bbce90f9d2c06.js:9:6016)
        at t (488-4c8bbce90f9d2c06.js:9:8912)

Uncaught Error: Minified React error #423; 请使用非压缩开发环境查看完整错误信息及额外警告。
        at iv (2443530c-01613f55fe4aacb8.js:9:113059)
        at oR (2443530c-01613f55fe4aacb8.js:9:90030)
        at 2443530c-01613f55fe4aacb8.js:9:89879
        at oD (2443530c-01613f55fe4aacb8.js:9:89886)
        at ow (2443530c-01613f55fe4aacb8.js:9:87588)
        at ok (2443530c-01613f55fe4aacb8.js:9:86450)
        at E (488-4c8bbce90f9d2c06.js:25:1398)
        at MessagePort.C (488-4c8bbce90f9d2c06.js:25:1951)

ChunkLoadError: Loading chunk 84 failed.
        (error: http://replaced-this-url/_next/static/chunks/app/%5Blang%5D/layout-332c238ae51cc7a7.js)
        at d.f.j (webpack-8b6d851d58492f7f.js:1:3285)
        at webpack-8b6d851d58492f7f.js:1:1427
        at Array.reduce (<anonymous>)
            at d.e (webpack-8b6d851d58492f7f.js:1:1393)
            at self.__next_chunk_load__ (488-4c8bbce90f9d2c06.js:1:3713)
            at 488-4c8bbce90f9d2c06.js:9:5403
            at 488-4c8bbce90f9d2c06.js:9:5813
            at N (488-4c8bbce90f9d2c06.js:9:6016)
            at t (488-4c8bbce90f9d2c06.js:9:8912)
            window.console.error @ 488-4c8bbce90f9d2c06.js:1
Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

应用端解决方案 #

1. 统一构建产物，避免容器内重复构建 #

当前每个容器启动时单独执行yarn build，会因环境变量、文件系统顺序等因素导致Webpack生成的chunk哈希不一致。修改方案：

• 在镜像构建阶段完成编译，确保所有节点使用完全一致的构建产物
• 运行阶段仅启动服务，不再执行构建

修改后的Dockerfile：

ARG base_image_build="node:18.17.1"
ARG base_image_run="node:18.17.1-slim"

FROM ${base_image_build} AS builder
WORKDIR /opt/app
COPY . .

RUN yarn install --frozen-lockfile --production
# 构建阶段完成编译，保证产物统一
RUN yarn build

FROM ${base_image_run} AS runner
ENV NODE_ENV=production
USER node
WORKDIR /opt/app

# 仅复制必要的构建产物和依赖
COPY --chown=node:node --from=builder /opt/app/.next ./.next
COPY --chown=node:node --from=builder /opt/app/node_modules ./node_modules
COPY --chown=node:node --from=builder /opt/app/package.json ./package.json
COPY --chown=node:node --from=builder /opt/app/public ./public

CMD ["yarn", "start"]

同时将package.json中的docker命令修改为仅yarn start，或直接在Dockerfile中指定启动命令。

2. 优化静态资源缓存与路径配置 #

在next.config.js中添加静态资源持久化缓存策略，确保浏览器缓存的资源在所有节点都存在：

const nextConfig = {
  generateBuildId: async () => "default-build",
  experimental: {
    isrMemoryCacheSize: 0,
  },
  // 配置静态资源长期缓存
  headers: async () => [
    {
      source: '/_next/static/(.*)',
      headers: [
        {
          key: 'Cache-Control',
          value: 'public, max-age=31536000, immutable',
        },
      ],
    },
  ],
};

module.exports = nextConfig;

3. 验证静态资源一致性 #

• 构建镜像后，检查_next/static目录下的文件哈希是否完全一致
• 可选：将静态资源上传至S3等统一存储服务，通过CDN访问，彻底消除节点间资源差异

关键原因说明 #

问题核心是不同节点的构建产物不一致：即使指定了统一Build ID，容器启动时单独构建仍会导致Webpack生成的chunk哈希不同。当负载均衡将请求分发到不同节点时，浏览器请求的chunk在目标节点不存在，从而触发404和ChunkLoadError。

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