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

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

投稿日 · 2023-02-12 · 更新日 · 2024-06-07 · 1 分 · nove-b

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

NextJsとNestJsをDockerで立ち上げる あくまでもDockerのハンズオンなので別に何でもいいのだが、どうせならということで、次に考えている構成でやってみることにした。 ちなみに【環境構築】NestJS+Next.js+TypeScript+Dockerの環境構築ハンズオンに倣うようにすすめていくので、こちらの記事を参考にした方がいいかもしれない。 docker-compose.ymlファイルを作成する プロジェクトのルートでdocker-compose.ymlファイルを作成する。そのために下記コマンドを実行する。 touch docker-compose.yml 実行後、docker-compose.ymlという名前の空ファイルができていることを確認することができる。 このファイルにDockerの設定を書いていく。 version: "3.7" services: backend: build: context: . dockerfile: ./docker/backend/Dockerfile tty: true volumes: - type: bind source: ./backend target: /api ports: , "3000:3000" 設定内容は把握できていないが、これでバックエンドのdocker-compose.ymlが作成できたらしい。 まずはバックエンドのみで起動するためフロントエンドの設定は書かない。 バックエンドの設定 それではバックエンド、つまりNestJs側の設定をすすめていく。 Dockerファイルの作成 設定ファイルに書いた dockerfile: ./docker/backend/Dockerfile で指示したディレクトリを作成する。 mkdir docker cd docker mkdir backend 作成したディレクトリにDockerfileを作成する。 cd backend touch Dockerfile 作成が完了したら以下の内容を記述する。 FROM node:16.18.0 WORKDIR /api CMD ["npm", "run", "start"] ちなみにnodeのバージョンは参考にした記事の通りではなく、なんとなく現在他案件で使用しているバージョンにしてみた。 ↓のちに下記に変更した(よくわからないけど)。 FROM node:16-alpine3.16 これでDocker側の設定は完了。 NestJsをインストールする 次にNestJsをインストールする。 cd ../.. プロジェクトのルートに戻り、nest newを実行※1する。...

投稿日 · 2023-02-08 · 更新日 · 2024-06-07 · 2 分 · nove-b