これはなに

Docker Desktop for WindowsでNuxt.jsを用いてWebアプリケーションを作成した際に、ホットリロードが効かなかった際の対処法を残す。

環境

• Windows 11
• Docker Desktop for Windows v4.19.0
• Nuxt.js 3.4.3
• Node.js v19.9.0
• npm 9.6.3

どうやらDocker Desktop for Windowsを利用してホストマシン（Windows）でNuxtアプリケーションを実行すると発生する問題のようだ。ホストマシンがWindowsでも、WSL2内でDockerコンテナを立てWSL2内のコンテナから実行する場合は、ホットリロードが効かない問題は発生していない。

忙しい人のための結論

まず、24678番のポートをポートフォワーディングする。 たとえば、docker runの際に-p 24678:24678のオプションを追加すればよい。

次に、nuxt.config.tsに以下の記述を追加する。

export default defineNuxtConfig({
  vite: {
    server: {
      watch: {
        usePolling: true,
      },
    },
  },
})

これでホットリロードが効くようになる。

ホットリロードとは

ホットリロードとは、コードを変更したときに自動的に反映してくれる機能のことである。コードを書いている最中に、ブラウザの画面が自動的に更新されるので、変更内容をすぐに確認できる。

ホットリロードが効かない問題を再現する最小限の手順

まず、Nuxt.jsでWebアプリケーションを開発するための環境をDocker Desktop for Windowsで構築する。以下のDockerfileをつくる。

FROM node:19-bullseye-slim

USER node
WORKDIR /home/node

EXPOSE 3000

作ったDockerfileをビルドする。

docker build -t test-nuxt .

ビルドしたイメージを用いてコンテナを立ち上げる。

docker run --name test-nuxt-app -it --rm -p 3000:3000 -v ${pwd}:/home/node test-nuxt /bin/bash

次に、Nuxt.jsのWebアプリケーションを生成し起動する。

cd ~/
npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev

この時点で、ソースコードを変更し、ホットリロードが効くか確認する。ソースコードの変更がリアルタイムで反映されない場合、ホットリロードが機能していないとわかる。

解決法

まず、24678番のポートをポートフォワーディングする。Nuxt3では、ホットリロード用に24678ポートで接続を待ち受けるためである。 ポートフォワーディングは、たとえば、docker runの際に-p 24678:24678のオプションを追加すればよい。Docker Composeを利用しているなら、portsに24678:24678を追加する¹。

docker run --name test-nuxt-app -it --rm -p 3000:3000 24678:24678 -v ${pwd}:/home/node test-nuxt /bin/bash

次に、nuxt.config.tsに以下の記述を追加する。

export default defineNuxtConfig({
  vite: {
    server: {
      watch: {
        usePolling: true,
      },
    },
  },
})

このコードにより、ホットリロードが有効化され、ソースコードの変更がリアルタイムで反映されるようになる。

手順が正しく行われ、ホットリロードが有効になったかを確認するには、npm run devでアプリケーションを起動し、ソースコードを変更してみれば良い。ソースコードを変更すると、その変更がリアルタイムで反映され、手動でリロードすることなくアプリケーションの挙動を確認できる。

参考文献・URL

• Nuxt3で実務想定の実装環境を構築する - Qiita