DockerでNuxt.jsを立ち上げたときホットリロードが遅い、もしくは動作が重いとき
今回はDockerを使ってNuxt.jsを立ち上げたときにホットリロードが遅かったり、アプリケーションの動作が重いときの対処法の案についてご紹介させていただきます。
Contents
DockerでNuxt.jsを立ち上げたときホットリロードが遅い、もしくは動作が重いとき
改善案としては次の二つがあります。
・node_modulesを名前付きボリュームや匿名ボリュームとして外に出す(Volume Trick)
・nuxt.config.jsのwatchOptionsにignored: /node_modules/ を追記する
・node_modulesを名前付きボリュームや匿名ボリュームとして外に出す(Volume Trick)
「Volume Trick」と言われる技です。
次のように名前付きボリュームや匿名ボリュームを用いてマウントするnode_modulesを外に出しておきましょう。
・名前付きボリュームを用いてnode_modulesを外へ
|
1 2 3 4 5 6 7 8 |
version: '3' services: test_app: build: . volumes: - front_node_modules:/myapp/node_modules volumes: front_node_modules: |
・匿名ボリュームを用いてnode_modulesを外へ
|
1 2 3 4 5 6 |
version: '3' services: test_app: build: . volumes: - ./testApp/node_modules:/myapp/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が軽くなります。
|
1 2 3 4 5 6 7 8 9 10 |
export default { devServer: { proxy: 'http://localhost:3000', watchOptions: { ignored: /node_modules/, poll: true }, disableHostCheck: true } }; |
終わりに
今回はDockerを使ってNuxt.jsを立ち上げたときにホットリロードが遅かったり、アプリケーションの動作が重いときの対処法の案についてご紹介させていただきました。