viteのreactアプリをdockerで立ち上げた後にローカルで起動しようとすると権限エラーが出る

環境構成

Dockerfile

FROM node:22.20.0
WORKDIR /code
COPY package.json /code/
RUN npm install
COPY . /code/

docker-compose.yml

web:
    build: .
    command: npm run dev -- --host --port 5173
    volumes:
      - .:/code
    ports:
      - "5173:5173"
    depends_on:
      - api

起動コマンド：

docker compose up -d

---

発生した問題

上記でコンテナを起動したあとに、ローカルで

npm run dev

を実行すると以下のエラーが発生。

11:49:40 PM [vite] (client) Re-optimizing dependencies because vite config has changed
error when starting dev server:
Error: EACCES: permission denied, unlink '/home/arunbababa/Dev/react×docker×playwright×guage×vitest×postgres×prisma/node_modules/.vite/deps/@prisma_client.js'

---

エラーの原因は主に2つ

1. Vite の再最適化

• Vite は起動時に config が変更されていると依存関係を再最適化する
• その際に node_modules/.vite のキャッシュを削除しようとする

2. 権限問題

• 先にdockerの方でviteアプリを起動している
• volumes でローカルをコンテナにマウントしているため
  コンテナ内で作られたファイルの権限が「親」となり
  その設定がローカルのディレクトリにも反映される
• その結果、ローカルユーザーが削除権限を持たず EACCES エラーが発生する

---

まとめ

• Vite の再最適化処理でキャッシュ削除が走る
• その削除処理が Docker コンテナ由来の権限設定に阻まれる
• 結果、ローカル実行時に permission denied が出る