Docker部署Angular+ASP.NET应用API返回404及启动问题

两个问题均由中间件顺序错误、生产/开发环境配置混淆、容器监听配置错误共同导致，和localhost请求转发无关。

接口404核心原因 #

• 中间件执行顺序完全错误：你将UseSpa放在了UseRouting、MapControllers之前，所有请求（包括/api前缀的接口请求、Swagger请求）都会被SPA中间件优先拦截，直接尝试返回Angular静态文件，路径匹配失败就直接返回404，根本不会进入接口路由逻辑。
• Swagger仅在开发环境加载：代码中写了if (app.Environment.IsDevelopment())的判断才会启用Swagger，Docker容器默认运行在Production环境，本身Swagger端点就不会对外暴露，能打开Swagger页面基本是本地缓存或旧构建残留导致。
• 应用未正确监听容器外部请求：ASP.NET 6在容器内默认仅监听localhost地址，而容器内的localhost是网络隔离的，宿主机的外部请求根本无法打到应用进程上，必须配置监听0.0.0.0才能接收外部流量。

Angular无法正常启动核心原因 #

• 生产环境错误启用开发专用配置：UseAngularCliServer是仅用于本地开发的方法，运行时会执行npm start拉起Angular开发服务器。你在生产环境开启该配置，但最终运行镜像中只拷贝了Angular编译后的dist静态文件，没有拷贝Angular源码，启动时会直接报错，拖挂整个应用进程。
• 静态文件路径匹配逻辑失效：虽然你写了Spa静态文件路径配置，但因为中间件顺序错误，请求根本不会走到静态文件处理逻辑，自然无法返回Angular页面。

1. 修正Program.cs的中间件顺序与环境配置 #

严格按照ASP.NET Core中间件顺序要求注册组件，将接口、路由、Swagger相关逻辑放在SPA中间件之前，生产环境关闭Angular开发服务器，显式配置监听地址。
修正后的核心代码如下：

var builder = WebApplication.CreateBuilder(args);
// 配置应用监听所有容器网卡地址，避免仅监听localhost导致外部无法访问
builder.WebHost.UseUrls("http://0.0.0.0:80", "https://0.0.0.0:443");
var origin = builder.Configuration.GetValue<string>("SelfWebsiteAngular:Name");
var angularLink = builder.Configuration.GetValue<string>("SelfWebsiteAngular:Link");

builder.Services.AddCors(options =>
{
    options.AddPolicy(origin, builder =>
    {
        builder.WithOrigins(angularLink)
        .AllowAnyMethod()
        .AllowAnyHeader();
    });
});
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
// 原有DbContext、认证、AutoMapper、业务服务注册代码保持不变
builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "SelfWebsiteAngular/dist";
});

var app = builder.Build();

// 生产环境需要开放Swagger就去掉环境判断，不需要就保留判断仅开发环境启用
app.UseSwagger();
app.UseSwaggerUI();

// 严格按顺序注册中间件：重定向 -> 路由 -> CORS -> 认证授权 -> 接口映射
app.UseHttpsRedirection();
app.UseRouting();
app.UseCors(origin);
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();

// 接口路由配置完成后，再注册静态文件、SPA中间件
app.UseStaticFiles();
app.UseSpaStaticFiles();

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "SelfWebsiteAngular";
    // 仅开发环境启用Angular CLI开发服务器，生产环境直接读取预编译的静态文件
    if (app.Environment.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

app.Run();

2. 修正Dockerfile配置 #

最终运行镜像不需要安装Node，仅保留.NET运行时、编译后的.NET程序、Angular静态产物即可，减小镜像体积同时避免运行时不必要的依赖。注意Angular默认编译输出会带一层项目名子目录，拷贝时需要对齐路径。
修正后的Dockerfile如下：

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
WORKDIR /src
COPY ["SelfWebsiteApi/SelfWebsiteApi.csproj", "SelfWebsiteApi/"]
RUN dotnet restore "SelfWebsiteApi/SelfWebsiteApi.csproj"
COPY . .
WORKDIR "/src/SelfWebsiteApi"
RUN dotnet build "SelfWebsiteApi.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "SelfWebsiteApi.csproj" -c Release -o /app/publish

# Angular构建阶段
FROM node:16 as nodebuilder
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY SelfWebsiteApi/SelfWebsiteAngular/package.json ./
RUN npm install
RUN npm install -g @angular/cli
COPY SelfWebsiteApi/SelfWebsiteAngular/ ./
RUN npm run build --prod

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
# 拷贝Angular编译产物到静态文件目录，注意对齐angular.json中配置的输出路径
COPY --from=nodebuilder /usr/src/app/dist/ ./SelfWebsiteAngular/dist/
# 配置运行时环境变量
ENV ASPNETCORE_ENVIRONMENT=Production
ENV ASPNETCORE_URLS=http://0.0.0.0:80;https://0.0.0.0:443
ENTRYPOINT ["dotnet", "SelfWebsiteApi.dll"]

3. 验证修复 #

• 重新构建镜像：docker build -t your-app-name .
• 启动容器时映射端口：docker run -d -p 8080:80 -p 8081:443 your-app-name
• 访问http://localhost:8080/swagger可正常打开接口文档，调用/api/ping/ping接口正常返回1
• 访问http://localhost:8080可正常加载Angular页面，接口请求无404错误

• 如果生产环境不需要对外暴露Swagger，记得把Program.cs中Swagger相关的环境判断加回，避免接口文档泄露带来安全风险。
• 检查Angular项目下angular.json的build outputPath配置，确保编译输出路径和Dockerfile中COPY的源路径一致，避免出现静态文件找不到的问题。
• 容器启动后可通过docker logs [容器ID]查看运行日志，如果有静态文件路径报错，优先检查Angular产物拷贝路径是否正确。

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