やりたいこと

dockerで立てたViteでホットリロードさせたい

状況

使用パソコンはM３チップのMacbookPro
docker-compose.yamlでdockerを起動させる構成
docker起動後npm run devコマンドでアプリを立ち上げる仕様
なぜかホットリロードが効かない（コンテナイメージをビルドし直さないと反映されない）

調査したこと

ググった結果Windowsではよくある事例らしいがMacでは出てこなかった。
ChatGPTに聞いてみると考えられる原因の一つにマウント不良があったのでディレクトリ構成を見直した。

原因

docker-compose.yamlのマウント設定が不適切だった。

# ディレクトリ構成
project
├── frontend
│   ├── app
│   └── Dockerfile
├── backend
│   ├── app
│   └── Dockerfile
└── docker-compose.yaml


# project/frontend/Dockerfileのコード
FROM node:20.12.2-bullseye-slim

ENV NODE_ENV=development

WORKDIR /code

COPY . .


# project/docker-compose.yamlのコードの一部（当初）
  project_frontend:
    container_name: project_frontend
    build:
      context: .
      dockerfile: ./frontend/Dockerfile
    volumes:
      - ./frontend:/frontend
    ports:
      - "5173:5173"  # フロントエンドのポート設定
    tty: true
    command: >
      /bin/bash -c '
      cd frontend/app/ &&
      npm ci --cache /tmp/empty-cache &&
      npm run dev
      '

マウントの設定を適切にしないとViteの監視がうまくできずホットリロードしないみたい

# project/docker-compose.yamlのコードの変更部分
    （略）
    volumes:
      - ./frontend:/code
    （略）
    command: >
      /bin/bash -c '
      cd app/ &&
      npm ci --cache /tmp/empty-cache &&
      npm run dev
      '

解決策

docker-compose.yamlのマウント設定を適切に行う。

終わりに

時間がかかったが何とか解決できた。基本的な概念や書き方をしっかり身につけないとこういうとこでハマるんだなと実感した。