Dockerで立ち上げたNextJs・NestJsのプロジェクトでホットリロードを可能にする
投稿日:2023年02月13日
最終更新日:2023年02月14日
前回の記事DockerでnextJsとnestJsの環境構築をするで
Dockerで立ち上げたプロジェクトでホットリロードを可能にする
なんて言っているが、ホットリロードという以前の問題で、ファイルを更新し、ブラウザを更新しても更新が走らないということに気が付いた。
更新更新、パニックになるがつまりそういうことで、更新されないことでパニックになってる。
というわけで原因を調査する。
目次
Dockerで環境構築したファイルを変更してもブラウザで表示が変更されない
そもそも作成した環境は下記記事の通り。
で、色々検証してみた結果、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系が効かなかったとき
この1つ目「wsl上にファイルを置いていない」が該当したので、確認してみることにした。
が、これがなかなか厄介で大変な気がする。
もっと簡単そうなのが、
env CHOKIDAR_USEPOLLING=true
をDockerfile
に記述する。
あるいは、
environment:
- CHOKIDAR_USEPOLLING=true
をdocker-compose.yml
に追記するというもの。
なんか採用しなかったけど、frontend
でも同じようなことをしている。
とりあえずdocker-compose.yml
で試してみることにした。
が、反応しない。
仕方ないので、Dockerfile
にもやってみる。
こちらも反応しない。
つまり、「wsl上にファイルを置く」必要があるのか。
いったん保留にする。
次に読むおすすめ記事
問題解決にいたらず、筆を置いているページもありますので、ご了承ください🙇♀️
この記事に対するコメント