DockerでNuxt.jsを立ち上げたときホットリロードが遅い、もしくは動作が重いとき

2024年4月24日

今回はDockerを使ってNuxt.jsを立ち上げたときにホットリロードが遅かったり、アプリケーションの動作が重いときの対処法の案についてご紹介させていただきます。



DockerでNuxt.jsを立ち上げたときホットリロードが遅い、もしくは動作が重いとき

改善案としては次の二つがあります。
・node_modulesを名前付きボリュームや匿名ボリュームとして外に出す(Volume Trick)
・nuxt.config.jsのwatchOptionsにignored: /node_modules/ を追記する

・node_modulesを名前付きボリュームや匿名ボリュームとして外に出す(Volume Trick)

「Volume Trick」と言われる技です。

次のように名前付きボリュームや匿名ボリュームを用いてマウントするnode_modulesを外に出しておきましょう。

・名前付きボリュームを用いてnode_modulesを外へ

・匿名ボリュームを用いてnode_modulesを外へ

詳しい説明は他のサイトに任せることとします。

ちなみに私が確認したところ、匿名ボリュームよりも名前付きボリュームの方がパフォーマンスは良かったです。
Dockerで匿名ボリュームと名前付きボリュームどちらの方がCPUのパフォーマンスが良い?

・nuxt.config.jsのwatchOptionsにignored: /node_modules/ を追記する

ホットリロードが遅かったり、アプリケーションの動作が重いときはCPUの使用率が100パーセントに近くなっていることが原因の可能性が高いです。(docker statsで各コンテナのCPU使用率などを確認することができます)

nuxt.config.jsにwatchOptionsとignored: /node_modules/という記述を足しましょう。
これでnode_modulesを監視する必要がなくなり、CPUが軽くなります。

終わりに

今回はDockerを使ってNuxt.jsを立ち上げたときにホットリロードが遅かったり、アプリケーションの動作が重いときの対処法の案についてご紹介させていただきました。

最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

直接契約ができるフリーランスエージェント「エンハンス」を立ち上げました。
詳しくは下記LPをご参照ください。
https://enhance.decryption.co.jp/

Youtubeチャンネル開設いたしました。
チャンネル登録者10,000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw






Docker

Posted by ちこ