如何在Dockerfile中整合Angular与ASP.NET Core Web API构建？

Angular构建阶段被完全静默跳过，本质是触发了Docker多阶段构建的默认执行逻辑：
Docker启动构建流程后，只会自动执行Dockerfile中第一行FROM定义的构建阶段，以及后续运行时阶段通过COPY --from显式引用到的构建阶段。你定义的ng-build阶段既没有排在构建流程最前端，也没有被后续的dotnet构建、运行时阶段通过--from参数关联引用，Docker构建时会直接跳过这个阶段的所有指令，自然不会输出npm安装、Angular编译的相关日志，也不会生成对应的前端构建产物。

• 第一步：强制触发Angular构建阶段的执行。只需要在后续的dotnet构建阶段或者最终运行时阶段，通过COPY --from=ng-build显式引用该阶段的产物，Docker检测到引用关系后，就会按顺序执行完这个阶段的所有指令，再继续后续的构建流程。
• 第二步：校准文件拷贝的相对路径。Docker中所有COPY指令的相对路径，都是相对于执行docker build时指定的构建上下文根目录计算的，不是相对于Dockerfile本身的存放位置。如果你的Dockerfile放在ASP.NET Core项目的子目录下，原Dockerfile中COPY ./ClientApp/...的路径会找不到文件，需要调整为对应层级的相对路径（比如../ClientApp/...）。同时建议优先拷贝package.json文件单独执行依赖安装，充分利用Docker的分层缓存机制，避免每次构建都全量重新下载npm依赖。
• 第三步：打通前端产物到后端发布目录的链路。把Angular构建生成的静态文件，提前拷贝到ASP.NET Core项目的wwwroot目录下，再执行dotnet publish流程，这样后端发布的产物会自动包含前端静态资源，不需要在运行时阶段单独做拷贝操作。

# 第一阶段：Angular生产构建
FROM node:12.7-alpine AS ng-build
WORKDIR /app
# 单独拷贝依赖清单，最大化利用构建缓存
COPY ./ClientApp/package.json ./
RUN npm install
# 拷贝全部前端源码执行生产构建
COPY ./ClientApp ./
RUN npm run build --prod


# 第二阶段：ASP.NET Core后端编译发布
FROM mcr.microsoft.com/dotnet/sdk:5.0 AS dotnet-build
WORKDIR /app
# 拷贝后端项目全量源码
COPY . .
# 把Angular构建产物拷贝到后端项目的静态文件目录，dotnet publish会自动把这部分文件打包进发布目录
COPY --from=ng-build /app/dist/[你的Angular项目名] /app/[你的ASP.NET Core项目名]/wwwroot/
RUN dotnet restore
RUN dotnet publish -c Release -o /publish


# 第三阶段：最终运行时镜像
FROM mcr.microsoft.com/dotnet/aspnet:5.0
WORKDIR /publish
# 直接拷贝已经包含前端静态文件的后端发布产物
COPY --from=dotnet-build /publish .
ENTRYPOINT [ "dotnet","/publish/DemoApp.dll" ]

• Angular CLI的默认生产构建输出路径为dist/[你的Angular项目名]，不是dist目录根路径，拷贝时要根据实际生成的路径调整源路径，否则会出现拷贝空目录的问题。
• 只要Docker检测到对ng-build阶段的引用关系，构建日志就会完整输出该阶段的所有执行细节，包括npm安装进度、Angular编译输出、构建报错信息等，不会再出现静默跳过的情况。
• 如果你希望严格保持前后端构建流程的解耦，也可以在最终运行时阶段直接从ng-build阶段拷贝产物到运行时镜像的静态文件目录，不需要把前端产物混到dotnet的发布目录中，只要保证最终运行时镜像中同时存在后端程序和可访问的前端静态文件即可。

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