使用 NextJS 进行 Docker 热重载

Question

我在使用 Docker 和 NextJS 设置热重载时遇到问题，基本上当我尝试更改和保存文件时，它不会重新加载服务器。

以下是docker-compose.yml：

version: '3'
services:
  mainapp:
    build: ./mainapp
    restart: always
    volumes:
      - ./mainapp:/mainapp
  subapp:
    build: ./apps/subapp
    restart: always
    volumes:
      - ./apps/subapp:/subapp
  mainappdb:
    image: postgres:alpine
    restart: always
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=...
    ports:
      - 5432:5432
    volumes:
      - mainappdb:/var/lib/postgres/mainappdb
  nginx:
    build: ./nginx
    ports:
      - 80:80
volumes:
  mainappdb:
    driver: local

这是主应用程序的 Dockerfile：

FROM node:alpine

WORKDIR /usr/app

COPY ./ ./

EXPOSE 3000

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

这是子应用程序的 Dockerfile：

FROM node:alpine

WORKDIR /usr/app

COPY ./ ./

EXPOSE 3000

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

这是主应用程序的 next.config.js：

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

module.exports = nextConfig

这是子应用程序的next.config.js：

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

module.exports = nextConfig

目录树如下所示：

/myapplication/apps/subapp
    |
    |--> Dockerfile
    |
    |--> (all the nextjs code)
/myapplication/mainapp
    |
    |--> Dockerfile
    |
    |--> (all the nextjs code)
/myapplication/nginx
    |
    |--> Dockerfile
    |
    |--> default.conf
/myapplication/docker-compose.yml

也许问题是因为我在 Dockerfile 中使用了 WORKDIR 指令？

Answer 1

尝试放置 环境： - NODE_ENV=开发 这对我有用。