Docker Compose Watch文件不更新及容器用户异常求助

• 基于Vite的React前端项目，修改index.html中main.jsx的script标签路径后，容器内文件数小时未更新，多次修改无效
• 为解决权限问题在Dockerfile中切换为root用户（仅开发环境），但docker compose up后容器仍以node用户运行
• 本地修改的文件无法同步到容器，首次构建时文件也未生效

本地修改后的HTML代码 #

....html
    <div id="root"></div>
    <script type="module" src="./src/main.jsx"></script>
  </body>
</html>

后端Dockerfile #

#backend

FROM node:20-alpine

WORKDIR /app

COPY package*.json ./

USER root

RUN npm install

COPY . .

EXPOSE 8000

CMD npm start

前端Dockerfile #

#frontend

FROM node:20-alpine

WORKDIR /app

COPY package*.json ./

USER root

RUN npm install

COPY . .

EXPOSE 5173

CMD npm run dev

Docker Compose配置 #

version: "3.8"

services:
  web:
    depends_on:
      - api

    build: ./frontend

    ports:
      - 5173:5173

    environment:
      VITE_API_URL: http://localhost:8000

    develop:
      watch:
        - path: ./frontend/package.json
          x-initialSync: true
          action: rebuild
        - path: ./frontend/package-lock.json
          x-initialSync: true
          action: rebuild

        - path: ./frontend
          x-initialSync: true
          target: /app
          action: sync

  api:
    depends_on:
      - db

    build: ./backend

    ports:
      - 8000:8000

    environment:
      DB_URL: mongodb://db/anime

    develop:
      watch:
        - path: ./backend/package.json
          x-initialSync: true
          action: rebuild
        - path: ./backend/package-lock.json
          x-initialSync: true
          action: rebuild

        - path: ./backend
          x-initialSync: true
          target: /app
          action: sync

  db:
    image: mongo:latest

    ports:
      - 27017:27017

    volumes:
      - anime:/data/db

volumes:
  anime:

执行操作及结果 #

1. 运行命令：docker compose up --watch
2. 进入后端容器：docker exec -it backend-container sh
3. 查看当前用户：whoami，输出为node
4. 查看容器内index.html内容：

<div id="root"></div>
    <script type="module" src="/mern-docker/frontend/src/main.jsx"></script>
  </body>
</html>

1. 修复容器用户问题 #

Dockerfile中USER root仅在RUN npm install阶段生效，后续CMD执行时会被node镜像默认用户覆盖。要确保容器始终以root运行，有两种方式：

方法一：调整Dockerfile（前后端同理） #

将USER root移至CMD之前，确保运行阶段以root身份执行：

#frontend

FROM node:20-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

USER root

EXPOSE 5173

CMD npm run dev

方法二：在Docker Compose中强制指定用户 #

在web和api服务配置中添加user: root：

services:
  web:
    # ... 其他配置
    user: root
  api:
    # ... 其他配置
    user: root

2. 修复文件同步问题 #

当前同步逻辑可能存在权限或缓存问题，按以下步骤处理：

• 清理旧容器、镜像和缓存，确保环境干净：

docker compose down -v
docker system prune -f

• 修改Compose的watch配置，添加权限同步参数（可选）：

develop:
  watch:
    - path: ./frontend
      x-initialSync: true
      target: /app
      action: sync
      x-bind-propagation: shared

• 重启容器时强制重建，规避Vite缓存：

docker compose up --watch --force-recreate

3. 验证同步效果 #

修改本地index.html后，执行以下命令检查容器内文件是否更新：

docker exec -it web-container cat /app/index.html

若仍未更新，检查本地文件路径是否与Compose中path配置一致，确保本地文件权限为当前用户可读写。

内容的提问来源于stack exchange，提问作者userWantsToCode