Docker ComposeでVite(Vue.js)のコンテナを起動したらホットリロードができなくなった

はじめに

今まではViteをnpm run devコマンドで起動していたが、Docker ComposeでViteを含めたコンポーネント一式起動するようにしたところVueのホットリロードが動かなくなってしまった。

環境

• Docker v27.4.0
• Docker Compose v2.31.0
• Vue.js v3.5.13
• Vite v6.0.3

対処方法

• docker-compose.ymlにvolumesを追加した
  • ローカルのViteディレクトリをボリュームとして、コンテナにマウントする
• volumesオプションには[ホスト側のディレクトリの相対パス]:[コンテナ側の絶対パス]という風にホストとコンテナの紐づけるディレクトリをそれぞれ記述する

services:
  app:
    container_name: app
    build:
      context: .
      dockerfile: ./app/Dockerfile
    ports:
      - "4040:4040"
    env_file:
      - ./app/.env
    volumes:       
      - ./app:/app <- ★ここ

原因

自分の解釈ですが...

• volumesを指定しないと、ホスト側のvueファイルを変更しても、コンテナ側は検知できずファイルは変更されないのでホットリロードは走らない
• ホスト側のディレクトリをボリュームとしてコンテナにマウントすると、コンテナ側でもvueファイルの変更を検知できるためホットリロードが行われる