如何容器化带Angular的ASP.NET Core 9应用？启动问题求助

我近期创建了一个带有Angular的ASP.NET Core 9应用，尝试将其容器化。构建成功，但Angular应用无法启动。

项目创建步骤 #

mkdir <solution_name>
cd <solution_name>
dotnet new sln --name <solution_name>
mkdir src
cd src
dotnet new angular -n App
Open <solution_name> soln
right click, create new folder called src
right click on src, add existing project App

我的Dockerfile内容 #

# Stage 1: Build Angular App
FROM mcr.microsoft.com/dotnet/aspnet:9.0 AS base
#do not install node

# Stage 2: Build .NET Application
FROM mcr.microsoft.com/dotnet/sdk:9.0 AS dotnet-build
RUN apt-get update && apt-get install -y nodejs npm
WORKDIR /src
COPY /src/App/App.csproj .
RUN dotnet restore
COPY ./src/App .

# Stage 3: Publish .Net
FROM dotnet-build AS dotnet-publish
RUN dotnet publish -c Release -o /app

# Stage 4: Combine Angular and .NET for Deployment
FROM base AS final
WORKDIR /app
COPY --from=dotnet-publish /app .
ENTRYPOINT ["dotnet", "App.dll"]

我能看到.NET应用已启动，但SPA Angular应用未启动，请问我遗漏了什么？

核心问题是你没有确保Angular应用的生产构建产物被正确生成并包含在最终镜像中，ASP.NET Core的SPA中间件找不到静态资源所以无法启动Angular。以下是具体修正方案：

修正后的Dockerfile（简化版） #

# 构建阶段：包含.NET SDK和Node.js，用于构建.NET和Angular
FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build
RUN apt-get update && apt-get install -y nodejs npm
WORKDIR /src
COPY /src/App/App.csproj .
RUN dotnet restore
COPY ./src/App .
# dotnet publish会自动触发Angular的npm install和build（依赖模板内置的MSBuild配置）
RUN dotnet publish -c Release -o /app

# 最终部署阶段：仅用ASP.NET运行时镜像，无需Node.js
FROM mcr.microsoft.com/dotnet/aspnet:9.0 AS final
WORKDIR /app
COPY --from=build /app .
ENTRYPOINT ["dotnet", "App.dll"]

关键说明 #

1. ASP.NET Core的Angular模板内置了MSBuild配置，在dotnet publish时会自动执行前端构建流程，但前提是构建环境（即sdk镜像）中安装了Node.js和npm，这一步你已经做了，但需要确保dotnet publish能完整执行前端构建。
2. 最终的aspnet镜像不需要Node.js，因为只需要运行.NET应用和加载已构建好的Angular静态文件（位于ClientApp/dist目录）。
3. 如果想更高效地分离前后端构建，可以单独加一个前端构建阶段，提前生成Angular产物再复制到.NET项目中，避免发布阶段重复安装依赖：

# 单独构建Angular
FROM mcr.microsoft.com/dotnet/sdk:9.0 AS frontend-build
RUN apt-get update && apt-get install -y nodejs npm
WORKDIR /src/App/ClientApp
COPY ./src/App/ClientApp/package*.json ./
RUN npm ci
COPY ./src/App/ClientApp .
RUN npm run build

# 构建并发布.NET
FROM mcr.microsoft.com/dotnet/sdk:9.0 AS dotnet-build
WORKDIR /src
COPY /src/App/App.csproj .
RUN dotnet restore
COPY ./src/App .
# 复制已构建好的Angular产物，跳过发布时的前端构建
COPY --from=frontend-build /src/App/ClientApp/dist ./ClientApp/dist
RUN dotnet publish -c Release -o /app

# 最终部署
FROM mcr.microsoft.com/dotnet/aspnet:9.0 AS final
WORKDIR /app
COPY --from=dotnet-build /app .
ENTRYPOINT ["dotnet", "App.dll"]

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