Docker Compose中React代码修改无法实时更新的问题及解决

问题背景 #

作为Docker新手，我维护一个包含ASP.NET Core、Nginx和React的多服务Docker Compose项目，前后端各自有独立的Dockerfile和.dockerignore文件。当前核心问题是：React前端代码修改后完全无法触发更新。尝试过docker-compose build --no-cache单独构建客户端服务，编译完成后前端毫无变化，只能删除整个Docker Compose环境后重新编译所有服务，开发效率被严重拖慢。

原配置文件 #

React前端Dockerfile

FROM node:16-alpine

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY ./package.json /app
RUN npm install

COPY . .

RUN npm run build
CMD ["npm", "start"] 

Docker Compose客户端服务片段

client:
  image: client
  build:
    context: ./walletfrontend
    dockerfile: Dockerfile
  environment:
    - WATCHPACK_POLLING=true

曾尝试添加WATCHPACK_POLLING=true环境变量，但未解决问题。

解决方案 #

参考等效的Docker运行命令：

docker run -d -p 3000:3000 -v /app/node_modules -v $(pwd):/app --name dockerized-react-app react-app-image:1

将其转换为Docker Compose配置，只需在客户端服务中添加正确的主机路径卷，修改后的完整配置如下：

client:
  image: client
  build:
    context: ./walletfrontend
    dockerfile: Dockerfile
  environment:
    - WATCHPACK_POLLING=true
  volumes:
    - /app/node_modules  # 保留容器内的node_modules，避免被本地目录覆盖
    - ./walletfrontend:/app  # 挂载本地代码目录到容器内实现实时同步

配置完成后，前端代码修改即可实时同步到容器中，无需重新构建整个服务，大幅提升开发效率。

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