Angular+.NET6 Docker构建后Client App未复制打包问题

• 端口映射顺序写反：-p参数格式为宿主机端口:容器端口，你写的-p 443:3000是将容器3000端口映射到宿主机443，但ASP.NET Core镜像默认仅监听80、443端口，容器内根本没有跑在3000端口的服务，直接访问localhost:3000必然失败。
• 路径分隔符不兼容：csproj中SpaRoot配置使用Windows专属的反斜杠\，Linux容器无法识别该路径，导致发布阶段执行前端构建的PublishRunWebpack目标找不到ClientApp目录，完全没有执行npm安装、Angular构建步骤，前端静态文件根本没生成，所以镜像体积仅比基础镜像大1MB左右。
• Node安装流程有缺陷：原配置中安装curl前未更新apt源，也未加自动确认参数，部分基础镜像版本下会出现curl安装不全的问题，导致nvm、Node安装隐形失败；Angular高版本依赖安装时容易出现peer依赖冲突，默认npm install会静默失败。
• 开发代理未关闭：配置中的SpaProxy是本地开发调试用的，会把前端请求转发到本地启动的Angular开发服务，生产环境下该服务不存在，就算静态文件生成了也会出现请求错误。

1. 替换原有Dockerfile #

# 调整自Visual Studio生成的容器调试配置
FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
# 提前更新源并安装基础依赖，避免curl安装失败
RUN apt update && apt install -y curl
ENV NODE_VERSION=16.13.0
RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
ENV NVM_DIR=/root/.nvm
RUN . "$NVM_DIR/nvm.sh" && nvm install ${NODE_VERSION}
RUN . "$NVM_DIR/nvm.sh" && nvm use v${NODE_VERSION}
RUN . "$NVM_DIR/nvm.sh" && nvm alias default v${NODE_VERSION}
ENV PATH="/root/.nvm/versions/node/v${NODE_VERSION}/bin/:${PATH}"
RUN node --version
RUN npm --version

WORKDIR /src
COPY ["projectName.csproj", "."]
RUN dotnet restore "./projectName.csproj"
COPY . .
WORKDIR "/src/."
# 直接执行发布，自动触发前端构建
RUN dotnet publish "projectName.csproj" -c Release -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
# 强制指定生产环境，关闭开发代理
ENV ASPNETCORE_ENVIRONMENT=Production
ENTRYPOINT ["dotnet", "projectName.dll"]

2. 修改csproj配置 #

• 将SpaRoot的路径分隔符改为Linux兼容的正斜杠：

<SpaRoot>ClientApp/</SpaRoot>

• 给npm安装命令加兼容参数，避免依赖冲突导致构建失败，找到PublishRunWebpack节点下的npm命令，修改为：

<Exec WorkingDirectory="$(SpaRoot)" Command="npm install --legacy-peer-deps" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />

• 补充生产环境静态文件和Angular路由支持，在项目的Program.cs（或Startup.cs）的请求配置管道中添加以下代码，放在路由配置之前：

app.UseStaticFiles();
// 处理Angular前端路由回退，避免刷新页面出现404
app.MapFallbackToFile("index.html");

3. 修正容器运行命令 #

如果要通过本地3000端口访问服务，将宿主机3000端口映射到容器默认的80端口即可：

docker run -tdp 3000:80 containerName

如果需要用HTTPS访问，再补充443端口映射：-p 443:443。

构建完成后可以执行以下命令进入容器查看文件：

docker run --rm -it --entrypoint sh containerName

进入后执行ls /app/wwwroot，如果能看到index.html、打包后的js、css文件，说明前端构建成功，此时镜像体积会比基础aspnet镜像大30~100MB（依Angular项目体积而定），退出容器后用修正后的run命令启动，访问localhost:3000即可正常打开页面。

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