构建Angular项目Docker容器时遇package.json无法复制问题

你的问题核心是Docker构建上下文与文件路径不匹配，导致COPY指令找不到package.json。结合你的文件结构（Solution/web-frontend下存放package.json），按以下步骤修正：

1. 修正docker-compose.yml配置 #

调整build的context和dockerfile路径，确保构建上下文指向web-frontend目录：

angular-app:
  build:
    context: ./web-frontend  # 指向package.json所在的目录
    dockerfile: Dockerfile   # Dockerfile就在web-frontend目录内，直接写文件名即可
  ports: 
    - '4200:4200'
  command: "ng serve --host 0.0.0.0 --port 4200 --disable-host-check"
  # 开发时可选：挂载本地目录实现热重载，避免每次改代码重新构建镜像
  volumes:
    - ./web-frontend:/app
    - /app/node_modules  # 隔离容器内的node_modules，避免本地文件覆盖

2. 修正Dockerfile配置 #

调整WORKDIR和COPY指令，适配新的构建上下文：

FROM node:18.10.0
WORKDIR /app

# 先复制依赖配置文件，利用Docker缓存层优化构建速度
COPY package.json package-lock.json ./
RUN npm ci
RUN npm install -g @angular/cli@15

# 复制项目其他源码文件
COPY . .

EXPOSE 4200
ENV PORT 4200

CMD ["ng", "serve", "--host", "0.0.0.0"]

关键说明 #

• 构建上下文（context）：docker-compose的build.context指定了Docker构建时能访问的文件根目录，必须指向包含package.json的web-frontend，否则Dockerfile里的COPY指令会找不到目标文件。
• 缓存优化：先复制package.json再执行依赖安装，这样只有当依赖配置变化时才会重新执行npm ci，大幅提升重复构建的效率。
• host 0.0.0.0：必须指定--host 0.0.0.0，否则容器内的Angular服务仅能在容器内部访问，外部无法通过端口映射访问到服务。

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