Asp.net 6.0+Angular14 Docker部署后Angular应用404问题求助

1. 补全Dockerfile的Angular构建流程 #

VS自动生成的Dockerfile通常不会包含Angular的编译步骤，导致容器内缺少静态资源。需添加多阶段构建，确保Angular产物被复制到.NET项目的wwwroot目录：

# 阶段1：构建Angular应用
FROM node:18-alpine AS angular-build
WORKDIR /app
COPY ClientApp/package*.json ./
RUN npm install
COPY ClientApp/ ./
# 替换为你的Angular项目构建命令，若angular.json配置了自定义outputPath需对应调整
RUN npm run build --prod

# 阶段2：构建.NET应用
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 ["YourProjectName.csproj", "."]
RUN dotnet restore "./YourProjectName.csproj"
COPY . .
WORKDIR "/src/."
RUN dotnet build "YourProjectName.csproj" -c Release -o /app/build

# 将Angular构建产物复制到.NET构建目录的wwwroot下
COPY --from=angular-build /app/dist/YourAngularAppName /app/build/wwwroot

FROM build AS publish
RUN dotnet publish "YourProjectName.csproj" -c Release -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "YourProjectName.dll"]

注意替换YourProjectName和YourAngularAppName为实际项目名称，Angular的dist目录名称以angular.json中outputPath配置为准。

2. 确认Program.cs的静态文件与SPA路由配置 #

确保.NET项目正确启用静态文件服务，并配置SPA路由回退（解决单页应用刷新404问题）：

var builder = WebApplication.CreateBuilder(args);

// 添加必要服务
builder.Services.AddControllersWithViews();
builder.Services.AddSpaStaticFiles(configuration =>
{
    // 此处路径要与Dockerfile中复制的Angular产物目录一致
    configuration.RootPath = "wwwroot";
});

var app = builder.Build();

// 中间件顺序不能乱
if (!app.Environment.IsDevelopment())
{
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseSpaStaticFiles(); // 必须添加此中间件加载SPA静态资源

app.UseRouting();

app.MapControllers();

// SPA路由回退配置
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    // 开发环境用Angular CLI服务器，生产环境自动使用wwwroot静态文件
    if (app.Environment.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

app.Run();

3. 验证容器内静态资源是否存在 #

进入运行中的容器，检查wwwroot目录是否有Angular构建文件：

# 获取容器ID
docker ps
# 进入容器
docker exec -it <容器ID> /bin/bash
# 查看wwwroot目录内容
ls /app/wwwroot

如果目录为空，说明Dockerfile的构建/复制步骤有误，需重新检查路径是否匹配。

4. 检查launchsettings.json的Docker启动配置 #

确保Docker启动时端口映射正确，且访问根路径而非API接口：

"Docker": {
  "commandName": "Docker",
  "launchBrowser": true,
  "launchUrl": "{Scheme}://{ServiceHost}:{ServicePort}",
  "publishAllPorts": true,
  "useSSL": true
}

手动访问容器映射的根地址（如https://localhost:xxxx/），而非API接口路径。

5. 确认Angular构建命令有效性 #

检查package.json中的build命令是否能正常生成产物：

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test"
}

若需生产环境优化构建，可使用npm run build --configuration production，需与angular.json中的配置对应。

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