VS示例ASP.NET Core+Angular应用Docker配置无效，访问无响应求助

我尝试给Visual Studio创建的ASP.NET Core应用及其Angular客户端配置Docker，但不管用Linux还是Windows容器都没法得到可用配置。

项目目录结构 #

SPA代理配置 #

{
  "name": "project2",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "prestart": "node aspnetcore-https",
    "start": "run-script-os",
    "start:windows": "ng serve --port 44419 --ssl --ssl-cert %APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem --ssl-key %APPDATA%\\ASP.NET\\https\\%npm_package_name%.key",
    "start:default": "ng serve --port 44419 --ssl --ssl-cert $HOME/.aspnet/https/${npm_package_name}.pem --ssl-key $HOME/.aspnet/https/${npm_package_name}.key",
    "build": "ng build",
    "build:ssr": "ng run Project2:server:dev",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  ...
}

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

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

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

当前问题 #

运行容器后访问localhost:44419得到空响应，请问我遗漏了什么配置？

问题根源及修正方案 #

1. 端口映射不匹配

Dockerfile中暴露的是80/443端口，但你访问的是宿主机的44419端口，两者没有建立映射关系。容器内ASP.NET Core默认监听80/443，所以需要把宿主机端口转发到容器对应端口。

修正：
运行容器时添加端口映射命令：

# Linux/macOS
docker run -p 44419:443 你的镜像名称
# Windows
docker run -p 44419:443 你的镜像名称

2. Angular静态资源未被打包进发布包

当前Dockerfile只处理了ASP.NET Core项目的编译发布，但没有构建Angular项目，导致容器内缺少SPA的静态文件，ASP.NET Core无法返回前端内容。

修正：
修改Dockerfile，在build阶段加入Node.js环境并构建Angular：

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
# 安装Node.js（适配Angular 14+建议用Node 16.x）
RUN curl -sL https://deb.nodesource.com/setup_16.x | bash -
RUN apt-get install -y nodejs

COPY ["Project3.csproj", "."]
RUN dotnet restore "./Project3.csproj"
COPY . .
WORKDIR "/src/."

# 进入Angular项目目录执行构建
WORKDIR "/src/ClientApp"
RUN npm install
RUN npm run build -- --prod

# 返回ASP.NET Core目录完成编译
WORKDIR "/src/."
RUN dotnet build "Project3.csproj" -c Release -o /app/build

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

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

注：如果你的Angular项目不在ClientApp目录，请自行调整路径

3. HTTPS证书缺失

容器内没有ASP.NET Core所需的HTTPS证书，导致HTTPS服务无法正常启动，访问时出现空响应。

修正：
运行容器时挂载本地证书目录并配置环境变量：

# Linux/macOS
docker run -p 44419:443 \
-v $HOME/.aspnet/https:/https/ \
-e ASPNETCORE_Kestrel__Certificates__Default__Path=/https/project2.pem \
-e ASPNETCORE_Kestrel__Certificates__Default__KeyPath=/https/project2.key \
你的镜像名称

# Windows
docker run -p 44419:443 ^
-v %APPDATA%\ASP.NET\https:/https/ ^
-e ASPNETCORE_Kestrel__Certificates__Default__Path=/https/project2.pem ^
-e ASPNETCORE_Kestrel__Certificates__Default__KeyPath=/https/project2.key ^
你的镜像名称

4. 验证SPA中间件配置

确保ASP.NET Core项目的Program.cs中已正确配置SPA中间件：

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (app.Environment.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

生产环境下该中间件会自动读取ClientApp/dist目录的静态文件，这也是为什么必须确保Angular构建产物被包含的原因。

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