Docker构建Angular 17镜像：产物未复制到/usr/share/nginx/html目录

出现这个问题的核心原因是Dockerfile中COPY的Angular构建产物路径不正确，导致Nginx默认文件未被覆盖。以下是具体排查和修复步骤：

• 先在本地执行npm run build，查看项目根目录下dist文件夹的实际结构：

  • Angular 17默认构建后，产物可能直接放在dist根目录下（而非子目录），或者子目录名称和你Dockerfile里写的myapp-frontend不一致。
  • 比如如果你的项目名称是my-app，构建后产物会在dist/my-app；若使用了新的构建配置，产物可能直接位于dist下。

• 修正Dockerfile中的COPY路径：
  根据本地dist的实际结构调整路径，示例如下：

  • 若产物在dist根目录：

    FROM node:21-alpine3.18 AS build
    WORKDIR /app
    COPY . .
    RUN npm install
    RUN npm run build
    
    FROM nginx:alpine
    EXPOSE 80
    COPY --from=build /app/dist /usr/share/nginx/html
    

  • 若产物在dist/my-actual-app-name子目录：

    COPY --from=build /app/dist/my-actual-app-name /usr/share/nginx/html
    

• 可选：在构建阶段添加验证步骤，确认产物路径
  在RUN npm run build后添加一行命令，构建时就能直观看到dist目录的结构：

  RUN ls -la /app/dist
  

• 补充说明：EXPOSE 80放在nginx阶段更合理，因为是nginx对外暴露端口，build阶段无需配置。

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