Why NextJS using Docker container did not reload after changed code for dev environment?

Question

I'm trying to run the NextJS on a Docker container using Dockerfile and running via docker-compose, after I changed my code in a JS file (such as index.js) the Next server did not reload.

But when I've tried to run outside without using Docker (by executing the "npm run dev" command directly) the Next server did reload smoothly.

I've also tried to run the server by "nodemon" command (inside a container), it did not make it either.

Dockerfile:

FROM node:10.14.2-alpine
COPY . /home/next_app
WORKDIR /home/next_app
RUN npm install

docker-compose.yml:

version: "3.6"
services:
  self_nextjs:
    container_name: self_nextjs
    build:
        context: ./app
        dockerfile: Dockerfile
    ports:
        - 3000:3000
    volumes:
        - ./app:/home/next_app
        - /home/next_app/node_modules
    networks:
        - zen_frontend
    restart: always
    command: npm run dev

networks:
  zen_frontend:
      name: zen_frontend
      driver: bridge

Any suggestions would be appreciated.

Answer 1

I had the same issue on Windows 10. I followed some of the instructions in this thread https://github.com/zeit/next.js/issues/6417. Basically, you have to add a next.config.js to poll for changes. I'm not sure if MacOS has the same problem.

module.exports = {
  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 800,
      aggregateTimeout: 300,
    }
    return config
  },
}

Answer 2

Have you tested by exposing webpack default hot reload port?

add to your Dockerfile

...
EXPOSE 49153
...

and update your docker-compose.yml

version: "3.6"
services:
  self_nextjs:
    container_name: self_nextjs
    build:
        context: ./app
        dockerfile: Dockerfile
    ports:
        - 3000:3000
        - 49153:49153
    volumes:
        - ./app:/home/next_app
        - /home/next_app/node_modules
    networks:
        - zen_frontend
    restart: always
    command: npm run dev

networks:
  zen_frontend:
      name: zen_frontend
      driver: bridge

Hope this help,

Regards