【Nuxt.js】DockerやNginxを使用した開発でもホットリロードを行う

この記事について

Nuxt.jsで開発中、Nuxt.jsのみの開発ではホットリロードが自動でできるようになっているかと思いますが、DockerやNginxを使用するとホットリロードできなくなる場面がありましたので、対処法を記載したいと思います。

環境

内容	バージョン
node	16.14.2
nuxt	2.15.8

結論

nuxt.config.js や環境変数に以下を追加したことろうまく動作しました。

nuxt.config.js

export default {
  // これでDockerやNginx使用時でもserverMiddleware以外はホットリロード可能となりました（実際にはポーリングによって定期的にソースの変更チェックを行っている）
  watchers: {
    webpack: {
      ignored: /node_modules/,
      poll: true,
    },
  },
}

以下の環境変数の追加によってserverMiddleware側もホットリロード可能となりました。

.env

CHOKIDAR_USEPOLLING=true

参考

Nuxt - The watchers property
Next.js + Docker 開発で Hot Reload を有効化する