Docker Compose挂载卷后本地文件修改无法同步至容器求助

1. 修正路径不匹配问题 #

你的docker-compose.yml中front服务的构建路径写的是./reactualtor，但实际本地文件夹是front，这会导致挂载的文件和容器内应用读取的路径不对应，先修正配置：

services:
  front:
    build: ./front
    ports:
      - 3000:3000
    volumes:
      - ./front:/getting-started-with-docker/front
  api:
    build: ./api
    ports:
      - 4000:4000
    volumes:
      - ./api:/getting-started-with-docker/api

2. 对齐容器工作目录与挂载路径 #

检查两个服务的Dockerfile，必须设置WORKDIR为挂载的容器内路径，否则应用会读取其他路径的文件，挂载的本地修改不会生效。以front服务为例：

FROM node:18-alpine
WORKDIR /getting-started-with-docker/front
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "start"]

api服务的Dockerfile同理，将WORKDIR设为/getting-started-with-docker/api。

3. 启用开发环境热重载 #

• React项目：默认npm start支持热重载，但要确保应用监听0.0.0.0，修改package.json的启动命令：

  "scripts": {
    "start": "HOST=0.0.0.0 react-scripts start"
  }
  

• Node/Express项目：安装nodemon监听文件变化自动重启：

  npm install nodemon --save-dev
  

  然后修改package.json：

  "scripts": {
    "dev": "nodemon src/index.ts"
  }
  

  同时更新Dockerfile的CMD为["npm", "run", "dev"]。

4. 重启容器使配置生效 #

修改完成后，重新构建并启动容器：

docker-compose down
docker-compose up --build

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