Docker Compose运行TypeScript React单仓应用报错及热更新配置问题

问题重现 #

错误1：找不到index.js #

执行docker-compose up -d后容器日志报错：

> frontend@0.1.0 start
> react-scripts start

Could not find a required file.
  Name: index.js
  Searched in: /app/src   

错误2：找不到package.json #

修改docker-compose配置后，容器日志报错：

ENOENT: no such file or directory, open 'app/package.json'

环境信息 #

文件夹结构：

repo
 - backend
 - frontend
   - Dockerfile
   - build
   - public
   - src
     - index.tsx
 - docker-compose.yaml

Dockerfile内容：

FROM node
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

问题根源 #

1. docker-compose配置拼写错误：将build误写为builds，导致容器构建路径异常，无法正确识别项目文件。
2. 挂载路径逻辑问题：初始仅挂载src目录，缺少Create React App运行必需的根目录配置文件；全目录挂载后因拼写错误触发路径匹配失败。

正确解决方案 #

修正docker-compose.yaml配置，同时实现代码热更新：

version: "3.8"
services:
  frontend:
    build: ./frontend  # 修正拼写错误：builds -> build
    ports:
      - '3000:3000'
    volumes:
      - ./frontend:/app  # 同步主机frontend目录到容器/app目录
      - /app/node_modules  # 保留容器内的依赖包，避免被主机目录覆盖
    stdin_open: true
    tty: true

验证效果 #

执行docker-compose up -d后，容器可正常启动，主机修改frontend/src下的代码时，容器内会自动触发热更新。

临时方案说明 #

将docker-compose.yml移动到frontend目录下时，挂载路径./会直接映射到容器/app，因此能正常运行，但不利于后续管理Monorepo的多服务配置。

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