Dockerで立ち上げたNextJs・NestJsのプロジェクトでホットリロードを可能にする

前回の記事DockerでnextJsとnestJsの環境構築をする

Dockerで立ち上げたプロジェクトでホットリロードを可能にする

なんて言っているが、ホットリロードという以前の問題で、ファイルを更新し、ブラウザを更新しても更新が走らないということに気が付いた。

更新更新、パニックになるがつまりそういうことで、更新されないことでパニックになってる。

というわけで原因を調査する。

目次

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系が効かなかったとき

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

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

もっと簡単そうなのが、

env CHOKIDAR_USEPOLLING=true

Dockerfileに記述する。

あるいは、

environment:
  - CHOKIDAR_USEPOLLING=true

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

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

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

が、反応しない。

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

こちらも反応しない。

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

いったん保留にする。

次に読むおすすめ記事

Go LangでWebAPIを作成するために、まずはDockerでMySQLを構築する

Dockerに座学でざっくり入門してみる

DockerプロジェクトをWSL上に置き、ホットリロード問題解決を試みる

windows11にDockerをインストールする

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

この記事に対するコメント

お気軽にコメントを下さい

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このブログは製作者の開発ログであり、厳密なテックブログではありません。
問題解決にいたらず、筆を置いているページもありますので、ご了承ください🙇‍♀️