Dockerで環境構築したファイルを変更してもブラウザで表示が変更されない

そもそも作成した環境は下記記事の通り。

DockerでnextJsとnestJsの環境構築をする

で、色々検証してみた結果、Dockerを止め、再度立ち上げれば更新されているということが分かった。原因が分かった、これで一件落着とはならない。 何でも不便すぎる。

そこでホットリロードが効くように調査してみた。

結論（いったん諦める）

フロントエンドに限り、ブラウザを更新すれば、表示が更新されることは確認できた。

フロントエンド（NextJs）

フロントエンド（NextJs）側の設定は、docker-compose.ymlに下記変更を加えたらホットリロードが効くようになった。

  frontend:
    build:
      context: .
      dockerfile: ./docker/frontend/Dockerfile
    tty: true
    volumes:
      - type: bind
        source: ./frontend
        target: /app
    + environment:
    +  - WATCHPACK_POLLING=true
    ports:
      , "3333:3333"

…ただめちゃくちゃ重い。

何回かやっていると、なんかうまくいかなくなったので、 上記の追加分を削除し、下記で対応した。

next.config.jsに下記を追加。

  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300,
    }
    return config
  },

これで同じく重いけど、リロードに対応した。

ホットリロードにも対応しているようだけど、Dockerが重すぎてわからない。

バックエンド（NestJs）

NestJsを色々調べてもよくわかなかったので、Dockerについて調べると、下記記事を見つけた。

Dockerを使っていてhot reload系が効かなかったとき

この１つ目「wsl上にファイルを置いていない」が該当したので、確認してみることにした。

が、これがなかなか厄介で大変な気がする。

もっと簡単そうなのが、

env CHOKIDAR_USEPOLLING=true

をDockerfileに記述する。

あるいは、

environment:
  - CHOKIDAR_USEPOLLING=true

をdocker-compose.ymlに追記するというもの。

なんか採用しなかったけど、frontendでも同じようなことをしている。

とりあえずdocker-compose.ymlで試してみることにした。

が、反応しない。

仕方ないので、Dockerfileにもやってみる。

こちらも反応しない。

つまり、「wsl上にファイルを置く」必要があるのか。

いったん保留にする。