Vue-cli (Webpack?) のビルド先にdockerのVolumeを指定すると落ちてしまう問題

前提

# docker-compose.yml
version: '3'

services:
  client:
    build: client
    volumes:
      - ./client/src:/app/src:ro
      - www:/app/dist
    depends_on:
      - nginx
  nginx:
    image: nginx:latest
    ports:
      - 80:80
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d:ro
      - www:/www/app:ro

volumes:
  www:

# default.conf
server {
  listen 80;
  server_name localhost;

  location / {
    root /www/app;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

結論

clientでは dist/ の親ディレクトリをVolume (www) にマウントした上で

# docker-compose.yml: services -> client
volumes:
    - ./client/src:/app/src:ro
    - www:/app  # 元 www:/app/dist

nginxのrootディレクトリをVolume下の dist/ に設定することで解決

# default.conf -> server
location / {
  root /www/app/dist;  # 元 root /www/app;
  index index.html;
  try_files $uri $uri/ /index.html;
}

考察

エラーは以下

client_1  | yarn run v1.10.1
client_1  | $ vue-cli-service build --watch
client_1  | 
client_1  | -  Building for development...
client_1  |  ERROR  Error: EBUSY: resource busy or locked, rmdir '/app/dist'
client_1  | Error: EBUSY: resource busy or locked, rmdir '/app/dist'
client_1  | error Command failed with exit code 1.
client_1  | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
<project_name>_client_1 exited with code 1

不穏な rmdir の文字

どうやら再ビルドの際に dist/ を消して作り直しているよう

volumes:
    - ./client/src:/app/src:ro
    - www:/app/dist

Volumeを直接 dist/ に当ててしまっていると、このディレクトリの削除はすなわちVolumeをまるごと消す命令になってしまって怒られているのでは…

実際にnginxコンテナに入ってVolumeのあたっているディレクトリを消そうとしてみると同様にbusyのエラーが出る

$ docker exec -it <project_name>_nginx_1 bash
  root@b0a0e3b107c7:/# cd www
  root@b0a0e3b107c7:/www# rm -r app/
    rm: cannot remove 'app/': Device or resource busy

ぷはー