如何为MERN栈应用配置Docker卷实现代码热更新？

我对Docker构建和MERN栈了解不多，正在查文档给项目做容器。现在镜像和容器能正常创建，但改了源码后必须重新构建应用才生效，想实现改代码后自动同步到Docker服务，不用重新构建镜像。附上项目目录结构、前后端Dockerfile和docker-compose.yml，请问哪里配置错了？

项目目录结构 #

└───Docstree
    │   docker-compose.yml
    │
    ├───DocsTree-Backend
    │   │   .env
    │   │   .gitignore
    │   │   Dockerfile
    │   │   index.js
    │   │   nodesource_setup.sh
    │   │   package-lock.json
    │   │   package.json
    │   │   README.md
    │   │
    │   ├───controllers
    │   ├───html_to_send_by_email
    │   ├───Maildir
    │   ├───middleware
    │   ├───misc
    │   ├───models
    │   ├───node_modules
    │   ├───routes
    │   ├───uploads
    │   └───utils
    └───DocsTree-Frontend
        │   .gitignore
        │   Dockerfile
        │   package-lock.json
        │   package.json
        │   postcss.config.js
        │   README.md
        │   tailwind.config.js
        │   virtualmin-install.log
        │   yarn.lock
        │
        ├───node_modules
        ├───public
        └───src

前端Dockerfile #

FROM node:16.16.0-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install -f
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

后端Dockerfile #

FROM node:16.16.0-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install -f
RUN npm install -g nodemon
COPY . .
EXPOSE 5000
CMD ["nodemon", "run", "index.js"]

docker-compose.yml #

version: '3'

services:
  backend:
    build:
      context: ./DocsTree-Backend
      dockerfile: Dockerfile
    container_name: backend
    ports:
      - 5000:5000
    networks:
      - my-app-network

  frontend:
    depends_on:
      - backend
    build:
      context: ./DocsTree-Frontend
      dockerfile: Dockerfile
    container_name: frontend
    volumes:
      - ./DocsTree-Frontend:/usr/app
      - /usr/app/node_modules    
    ports:
      - 3000:3000
    networks:
      - my-app-network

networks:
  my-app-network:

volumes:
    node_modules:

问题分析与修复方案 #

1. 后端未配置源码挂载，启动命令有误 #

后端服务没有挂载本地源码目录，导致本地修改无法同步到容器；同时nodemon的启动命令多了run参数，会导致启动失败。

修复：

• 修改docker-compose.yml的backend服务，添加挂载卷：

  backend:
    build:
      context: ./DocsTree-Backend
      dockerfile: Dockerfile
    container_name: backend
    ports:
      - 5000:5000
    volumes:
      - ./DocsTree-Backend:/app  # 本地源码目录挂载到容器工作目录
      - /app/node_modules  # 保留容器内的node_modules，避免本地依赖覆盖
    networks:
      - my-app-network
  

• 修正后端Dockerfile的启动命令：

  CMD ["nodemon", "index.js"]
  

2. 前端挂载路径与工作目录不匹配 #

前端Dockerfile里设置的工作目录是/app，但docker-compose.yml里挂载到了/usr/app，路径不一致导致挂载失效，本地修改无法同步到容器。

修复：
修改docker-compose.yml的frontend服务挂载路径，和Dockerfile的WORKDIR保持一致：

frontend:
  depends_on:
    - backend
  build:
    context: ./DocsTree-Frontend
    dockerfile: Dockerfile
  container_name: frontend
  volumes:
    - ./DocsTree-Frontend:/app  # 改为和WORKDIR一致的/app
    - /app/node_modules    
  ports:
    - 3000:3000
  networks:
    - my-app-network

3. 额外说明 #

• 挂载/app/node_modules是为了避免本地的node_modules覆盖容器内安装的依赖，保证环境一致性。
• 前端用npm start（Create React App默认命令）自带热重载，挂载正确后修改src文件会自动刷新页面。
• 后端安装的nodemon会监听源码变化，挂载后修改文件会自动重启服务。

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