ホストマシンのVSCodeに node_modulesが表示されない

Question

dockerでReactのコンテナを立てています。
ビルドツールはViteで、npmを使っています。末尾に、バージョン等を記載しています。

質問したいこと

コンテナの node_modules ディレクトリは中身が見えるのに、ホストマシンのVSCode上では node_modules が空になっているのを、見えるようにしたいです。

コンテナから実行されているので、アプリケーション自体は動きますが、ホストマシンのVSCode上では node_modulesが空なので、コードの静的解析ツールから無限に怒られてしまいます。

以下にソースコードを示します。

ソースコード

FROM node:20.13.1

WORKDIR /front

COPY package.json package-lock.json /front

RUN npm install

COPY . /front
EXPOSE 3000

CMD ["npm", "run", "dev", "--", "--host"]

（中略）
  front:
    container_name: front
    build:
      context: ./frontend
      dockerfile: Dockerfile.dev
    volumes:
      - ./frontend:/front
      - node_modules_volumes:/front/node_modules
    command: bash -c "npm install && npm run dev -- --host"
    ports:
      - "${FRONT_PORT}:5173"
# トップレベルのvolumes
volumes:
  mysql_db:
  node_modules_volumes:

試したこと

① Dockerfile から npm install せずに、compose.yamlの commandエントリから実行する
こちらの記事　を参考にしました。

② compose　の、トップレベルのvolumes に設定を追加する
こちらの記事　　を参考にして、試してもみました。
内容としては、以下のような変更です。

  node_modules:
    driver: local
    driver_opts:
      type: none
      device: ${PWD}/node_modules
      o: bind

いずれも表示されませんでした。
ちゃんとコードの意味理解してから書け、というのは自分でも責めたいところですが、なぜこうなっているのか、分からない所が分かっていない状態でパンクしてしまっています。
Dockerの公式ドキュメントにも当たってみましたが、なかなかクリーンヒットする部分が見つけられませんでした。

どなたか、お力添えを頂ければ幸いです。

バージョン

node	npm	vite
20.13.1	10.5.2	5.2.0

Answer 1

volumesの下記の行で別途マウントされているのが原因です。

   - node_modules_volumes:/front/node_modules

該当行を削除するか、VSCodeならdevcontainer環境を整えても良いかなと思います。devcontainerはコンテナ内で開発を行うので、ホスト上にはdocker以外不要となります。

Comments

[inoda]

回答してくださってありがとうございます。
少しこちらの事情に応じた対応が必要でしたが、ご指摘いただいた部分を変更して、無事ホストマシンに反映されました。ありがとうございました。

質問前の時点で、ご指摘いただいた部分をコメントアウトして docker compose down, buildしなおして、docker compose up しても、変化がありませんでしたが、もしかしたらと思って、
一度 image と volume を削除してから、volumesの行を削除して起動した所、無事にホストマシンにもコンテナと同じ内容が表示されました。

これはつまり、ボリュームマウントをやめて、node_modulesも含めてアプリケーションディレクトリをそのままコンテナにバインドマウントするようにしたため、他のアプリケーションコードと同じようにホストマシンにそのまま表示されるようになったのだと理解しています。volumeに関してはブラックボックスにしてしまっている部分が多くて、浅い質問になってしまって申し訳ありません。

devcontainer環境ですか、確かにホストマシンとの兼ね合いをあまり考えなくて良くなるし、毎回 docker compose exec front npm install ... のようにしなくても良くなるなら楽ですね（エイリアスは設定していますが）。教えてくださってありがとうございます。検討してみます。