Zenn
🔥

Nuxt3 on Docker でホットリロード(HMR)が効かない

2022/11/12に公開
Docker
Nuxt
tech

環境

Nuxt: 3.0.0-rc.13
PC: M1 Mac Ventura

nuxi init で nuxt環境構築

問題

Docker 環境でNuxt3の開発サーバーを起動後、
vueファイルを修正してもホットリロードが効かず、
画面が自動で更新されない。

また、Developerツールを見ると以下のエラーが発生している。

client.ts:324 GET http://localhost:24678/_nuxt/ net::ERR_CONNECTION_REFUSED

原因

Nuxt3 では ホットリロード用に 24678 ポートで接続を待ち受けるが、
docker でポートフォワード設定をしていないため、
ブラウザからアクセスできず接続エラーが発生していた。

問題が発生していたときの docker-compose.yml

# docker-compose.yml
version: '3.7'

services:
  front:
    image: node:19.0-bullseye-slim
    user: node
    ports:
      - 62080:3000
    volumes:
      - ./:/project
    working_dir: /project/front
    command: [ npm, run, dev ]

対策

24678 ポートへのポートフォワード設定を追加する。

# docker-compose.yml
version: '3.7'

services:
  front:
    image: node:19.0-bullseye-slim
    user: node
    ports:
      - 62080:3000
      - 24678:24678 # HMR用のポートを追加
    volumes:
      - ./:/project
    working_dir: /project/front
    command: [ npm, run, dev ]
GitHubで編集を提案

Discussion