Docker容器化部署NextJS应用请求响应耗时过长问题

近几日尝试对一个极其基础的NextJS应用进行容器化部署，目前应用可正常启动访问，但访问仅包含H1测试元素的index.js首页时，单次请求最长需要1.14分钟才能返回响应，检索相关技术资料未找到对应解决方案，相关配置及代码如下：

• 访问页面后FireFox开发者工具网络面板截图：
• 启动应用使用的命令：docker-compose -f docker-compose.yml -f docker-compose.dev.yml up -d --build

Dockerfile #

FROM node:17
WORKDIR /app
COPY package.json /.

# This line makes sure that no dev dependences are install in a production environment
ARG NODE_ENV
RUN if [ "$NODE_ENV" = "development" ]; \
        then npm --production=false install; \
        else npm install --only=production ; \
        fi
COPY . ./

ENV PORT 3000
EXPOSE $PORT

CMD ["npm", "run", "dev"]

docker-compose.yml（已移除运行正常的API、Mongo服务配置） #

version: '3'

services:
  dashboard:
    build: ./client/dashboard
    env_file:
      - ./environment/dashboard.env
    ports:
      - "3000:3000"
    environment:
      - PORT=3000
    command: npm run dev
    depends_on:
      - api

docker-compose.dev.yml（与上述配置共同运行，已移除API、Mongo相关配置） #

version: '3'

services:
  dashboard:
    volumes:
      - ./client/dashboard:/app
    build:
      context: ./client/dashboard
      args:
        NODE_ENV: development
    command: npm run dev
    environment:
      - NODE_ENV=developmet

NextJS页面代码 #

pages/index.js #

function IndexPage() {
    return (<div>
        <h1>Hello World Number Seven!</h1>
    </div>)
}

export default IndexPage

pages/_app.js #

import { VechaiProvider } from "@vechaiui/react";

function MyApp({ Component, pageProps }) {
  return (<VechaiProvider>
      <Component {...pageProps} />
    </VechaiProvider>)
}

export default MyApp

next.config.js #

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    outputStandalone: true,
  },
  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300,
    }
    return config
  },
}

module.exports = nextConfig

三个配置错误叠加导致响应极慢，和NextJS本身、VechaiUI依赖无关：

• 第一，docker-compose.dev.yml里NODE_ENV拼写错误，写成了developmet（少了最后一个n）。NextJS识别不到合法的development/production/test环境标识时，会启动大量冗余的环境探测逻辑，大幅拖慢编译速度。
• 第二，Dockerfile里COPY package.json /.写法错误，这行指令会把package.json复制到容器根目录/下，而非WORKDIR指定的/app目录。后续执行npm install时在/app路径下找不到package.json，等于容器内根本没安装项目依赖，NextJS启动后会递归扫描整个容器文件系统查找依赖，这部分占了总等待时间的80%左右。
• 第三，本地项目目录挂载到容器/app路径时，没有排除容器内的node_modules目录。如果本地是Windows/macOS系统，本地安装的node_modules里的二进制依赖和容器Linux环境不兼容，NextJS会反复尝试重编译这些不兼容的包，进一步拉长响应时间。

1. 修正Dockerfile里的文件复制路径，把COPY package.json /.改为COPY package.json ./
2. 修正docker-compose.dev.yml里的NODE_ENV拼写错误，把NODE_ENV=developmet改为NODE_ENV=development
3. 在docker-compose.dev.yml的volumes配置中新增匿名卷，排除容器内的node_modules目录，修改后配置如下：

volumes:
  - ./client/dashboard:/app
  - /app/node_modules

4. 清除旧容器缓存后重新构建启动：

docker-compose -f docker-compose.yml -f docker-compose.dev.yml down -v
docker-compose -f docker-compose.yml -f docker-compose.dev.yml up -d --build

修复后首次页面编译响应时间会降到3秒以内，二次访问响应时间稳定在100ms级别。

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