Angular默认应用构建Docker镜像时报错，新手求排查帮助

问题排查与解决方案 #

1. 优先校验构建输出路径匹配性 #

你Dockerfile第二阶段复制的路径是/usr/src/app/dist/test-app，需要和Angular项目的实际构建输出路径完全对应，这是新手最容易踩的坑：

• 打开项目根目录下的angular.json文件，找到projects > 你的实际项目名 > architect > build > options > outputPath配置项
• 如果配置的输出路径不是dist/test-app，直接把Dockerfile中COPY语句的路径替换为实际的outputPath值即可，比如outputPath为dist/my-angular-demo就修改为：

COPY --from=build /usr/src/app/dist/my-angular-demo /usr/share/nginx/html

2. 修复Alpine镜像缺失构建依赖问题 #

你使用的node:14.17.5-alpine是精简版系统镜像，缺少Angular构建所需的基础系统依赖，很容易导致npm install或者npm run build阶段报错，修改构建阶段的配置提前安装依赖即可：

# 构建阶段
FROM node:14.17.5-alpine AS build
WORKDIR /usr/src/app
# 新增：安装Angular构建需要的系统依赖
RUN apk add --no-cache python3 make g++
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

3. 补充Nginx配置避免路由404 #

你注释掉了Nginx配置的复制语句，如果你的Angular项目使用了HTML5路由模式，后续部署后刷新页面会出现404问题，建议恢复这行配置，在项目根目录新建nginx.conf文件，参考内容如下：

events {}
http {
  include /etc/nginx/mime.types;
  server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    location / {
      try_files $uri $uri/ /index.html;
    }
  }
}

之后把Dockerfile中对应Nginx配置复制行的注释去掉即可。

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