ホットリロード

Dockerで立ち上げたサーバーが遅すぎる。 「はい、サーバーが立ち上がるまで、5分かかりました」 なんていう先生の声が脳内でリフレインする。 docker compose up -d コマンドを打った後の話である。 何が言いたいかというと、Dockerで立ち上げたサーバーが以上に重い。 立ち上げ後、ブラウザが表示されるまで5分以上かかり、更新をクリック後、更新がかかるまで5分以上かかる。 これじゃ、なかなか作業が進まない。 それに前述、前回書いたようにホットリロードがかからないし、そもそも遅すぎてホットリロードが正常に機能しているかがわからない。 どう解決するか じゃあ、どうするべきか。 うまくいくかはわからないが、これもまた前回の記事で書いたように、「wsl上にファイルを置く」ということで少なくともホットリロードは解決するかもしれない。 またDockerもWSL上で動かしているので、開発環境のスピードも上がるかもしれない。 というのも下記のような内容のコメントを見つけた。 特殊な理由がない限り、複数のオペレーティング システム間でファイルを操作しないことをお勧めします。 Linux コマンド ライン (Ubuntu、OpenSUSE など) で作業している場合、最速のパフォーマンス速度を実現するには、ファイルを WSL ファイル システムに格納します。 Microsoft公式 - OS ファイル システム間でのパフォーマンス ということでやってみる。 ファイルを WSL ファイル システムに格納する まずはUbuntuを開く。そうするとターミナルが開くので pwd コマンドで自身がどこにいるかを確認する。たぶん/home/UserNameにいる。 次にそこにプロジェクトフォルダを作成する。 mkdir projectName 作成したプロジェクトに移動し、 cd projectName VsCodeを開く。 code . そこでプロジェクトを作成する。 今回は「DockerでnextJsとnestJsの環境構築をする」で作成したものと同じものを作成した。 次に拡張機能WSLを取ると、リモート接続してくれる。 そこでDockerを起動すれば上手く行くと思うが、起動後すぐに落ちる。 The command 'docker' could not be found in this WSL 2 distro. We recommend to activate the WSL integration in Docker Desktop settings....

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に追記するというもの。...