Next.js docker on windowsでhot reloadが効かない場合の対処法

結論

next.config.jsにwebpackDevMiddlewareの設定を追加する

next.config.js

module.exports = {
  reactStrictMode: true,
// ここから
  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 800,
      aggregateTimeout: 300,
    }
    return config
  },
// ここまで
}

dockerfile

version: '3'
services:
    node:
        platform: linux/x86_64
        build:
            context: .
            dockerfile: ./docker/Dockerfile
        volumes:
            - ./source:/usr/src/app
        command: sh -c "cd app && npm i && npm run dev"
        ports:
            - "3000:3000"
        restart: always
        depends_on:
            - db
        environment:
            - CHOKIDAR_USEPOLLING=true
    db:
        platform: linux/x86_64
        image: mysql:5.7
        command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
        environment:
            MYSQL_ROOT_PASSWORD: password
        ports:
            - "3306:3306"
        volumes:
            - ./db:/var/lib/mysql

上記の様に設定ファイルを書き換えることで、windows上のdockerでもファイルの変更を検知しブラウザの更新が走るようになった。

その他の解決策①

ググった結果CHOKIDAR_USEPOLLING=trueにするといいというのを真っ先に見つけ、なんだそれだけかと思ってやってみましたが当環境ではホットリロードができず。
追加場所はdocker-compose.yml

その他の解決策②

次に試したのが、最終的にうまくいった方法と似ているが少し違う書き方。

next.config.js

module.exports = {
  reactStrictMode: true,
  watchers: {
    webpack: {
      poll: true
    }
  }
}

最後に

私は好きな場所で作業をしたいときにmacを使い、集中してマルチスクリーンで作業したいときはwindowsを使います。そのためmacで構築したdockerがなに不自由なく動いているのに、windowsで作業しようと思ったときにうまく動かなかったりもします。

自分だけで使う分には全く問題ないけど、そうでないときのほうが多いので、mac,win共に快適に動くdocker環境を用意できるように意識をしたいと思いました。