Docker Compose无法找到package.json，React/TypeScript项目容器化失败

核心原因 #

容器内/app目录没有正确挂载到本地包含package.json的路径，导致npm找不到依赖配置文件。

具体排查点与修复方案 #

• 检查本地项目路径结构
  确认你的docker-compose.yml放在FULL-STACK-CHALLENGE根目录下，且根目录里存在frontend文件夹，该文件夹内必须包含package.json。如果你的React项目的package.json不在frontend子目录（比如直接在根目录），需要修改卷挂载路径：

  volumes:
    - ./:/app  # 把根目录挂载到容器/app，对应package.json在根目录的情况
  

• 替换docker-compose run为docker-compose up
docker-compose run是临时运行容器的命令，默认不会启用你配置的端口映射，且容器执行完命令后会直接退出。要长期运行服务并启用端口映射，改用：

  docker-compose up -d frontend
  

  之后就能通过localhost:3000访问应用。

• 检查文件系统同步（针对Windows/WSL或macOS）
  如果是WSL环境，可能存在文件系统同步延迟，导致容器无法读取挂载的文件。可以尝试重启Docker服务，或者检查WSL与Windows文件系统的挂载权限。

修正后的完整docker-compose.yml示例 #

假设你的项目结构是：

FULL-STACK-CHALLENGE/
  docker-compose.yml
  frontend/
    package.json
    src/
    ...

配置如下：

version: '3.5'

services:
  frontend:
    image: node:latest
    volumes:
      - ./frontend:/app
    ports:
      - "3000:3000"
    working_dir: /app
    command: bash -c "npm install && npm start"

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