Docker部署Angular容器仅显示Nginx默认页，求适配配置及排查方案

关键原因：Angular构建产物路径和Docker复制路径不匹配 #

Angular执行npm run build --prod后，默认会把编译好的文件放到dist/[你的项目名]目录下（比如你的项目是member-dashboard，实际路径就是/app/dist/member-dashboard）。但你当前的Dockerfile里是直接复制/app/dist到Nginx的静态目录，这就导致/usr/share/nginx/html下根本没有Angular的index.html，Nginx只能加载自带的默认页面。

而React的npm run build产物直接在build根目录，所以同样的复制逻辑对React有效，但Angular不吃这一套。

修复步骤 #

• 调整Dockerfile的复制路径：修改Stage 2里的复制命令，指定Angular构建后的具体子目录：

# Stage 2: host using nginx
FROM nginx:alpine
ARG PORT
ENV PORT=${PORT}
COPY --from=build /app/nginx/nginx.conf /etc/nginx/conf.d/default.conf
# 这里加上项目名称member-dashboard，对应Angular的构建输出子目录
COPY --from=build /app/dist/member-dashboard /usr/share/nginx/html
EXPOSE ${PORT} 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]

• 本地验证构建路径（可选）：先在本地跑npm run build --prod，看看dist目录下是不是有个和项目名同名的子文件夹，里面装着index.html和其他静态资源，确认路径没错。

• 容器内核对文件（可选）：启动容器后，进入容器执行ls /usr/share/nginx/html，如果能看到index.html，说明复制对了；如果没有，再检查路径是否匹配。

额外说明 #

如果你的Angular项目修改过构建输出路径（在angular.json的projects -> [项目名] -> architect -> build -> options -> outputPath里配置），那Dockerfile里的复制路径也要跟着改。

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