ASP.NET Core+ReactJS Docker发布后镜像运行异常求助

问题描述 #

我正在创建一个基于ASP.NET Core运行SPAProxy的ReactJS项目，已按照官方快速指南创建基础项目，修改Dockerfile适配Linux容器后发布至Dockerhub，目的是验证客户端与ASP.NET Core代码在同一服务器运行。但运行镜像时未达预期，日志停留在应用启动阶段，无后续SPA相关输出。

启动日志 #

2023-07-04 12:22:50 warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
2023-07-04 12:22:50       Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed.
2023-07-04 12:22:50 warn: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[35]
2023-07-04 12:22:50       No XML encryptor configured. Key {9aff965f-0314-4b69-b047-1383abc2ab7c} may be persisted to storage in unencrypted form.
2023-07-04 12:22:50 info: Microsoft.Hosting.Lifetime[14]
2023-07-04 12:22:50       Now listening on: http://[::]:80
2023-07-04 12:22:50 info: Microsoft.Hosting.Lifetime[0]
2023-07-04 12:22:50       Application started. Press Ctrl+C to shut down.
2023-07-04 12:22:50 info: Microsoft.Hosting.Lifetime[0]
2023-07-04 12:22:50       Hosting environment: Production
2023-07-04 12:22:50 info: Microsoft.Hosting.Lifetime[0]
2023-07-04 12:22:50       Content root path: /app/

当前Dockerfile #

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs
WORKDIR /src
COPY ["SampleNETCoreReact/SampleNETCoreReact.csproj", "SampleNETCoreReact/"]
RUN dotnet restore "SampleNETCoreReact/SampleNETCoreReact.csproj"
COPY . .
WORKDIR "/src/SampleNETCoreReact"
RUN dotnet build "SampleNETCoreReact.csproj" -c Release -o /app/build

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

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

解决方案与排查步骤 #

1. 无需切换至Windows容器 #

Linux容器完全适配该场景，且镜像体积更小、性能更优，没必要切换到Windows容器。

2. 优化Dockerfile（移除生产环境不必要的Node.js依赖） #

生产环境下ASP.NET Core直接提供React静态文件，无需运行Node.js，可删除base阶段的Node.js安装步骤，精简镜像：

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
RUN apt-get update
RUN apt-get install -y curl libpng-dev libjpeg-dev libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs
WORKDIR /src
COPY ["SampleNETCoreReact/SampleNETCoreReact.csproj", "SampleNETCoreReact/"]
RUN dotnet restore "SampleNETCoreReact/SampleNETCoreReact.csproj"
COPY . .
WORKDIR "/src/SampleNETCoreReact"
RUN dotnet build "SampleNETCoreReact.csproj" -c Release -o /app/build

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

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

3. 确认React静态文件已正确构建并包含在发布包中 #

检查项目的.csproj文件，确保包含自动构建React的目标配置：

<PropertyGroup>
  <SpaRoot>ClientApp\</SpaRoot>
</PropertyGroup>

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />
  
  <ItemGroup>
    <DistFiles Include="$(SpaRoot)build\**" />
    <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
      <RelativePath>%(DistFiles.Identity)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
    </ResolvedFileToPublish>
  </ItemGroup>
</Target>

该配置会在dotnet publish阶段自动执行npm install和npm run build，并将React构建产物打包到发布目录。

4. 验证ASP.NET Core SPA路由配置 #

确保Program.cs中配置了静态文件服务和SPA路由回退：

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/build";
});

var app = builder.Build();

app.UseStaticFiles();
app.UseSpaStaticFiles();

app.UseRouting();

// 其他路由配置...

app.MapFallbackToFile("index.html");

app.Run();

缺少MapFallbackToFile会导致访问非根路径时出现404，根路径也无法正确加载React应用。

5. 容器运行时端口映射验证 #

运行容器时需正确映射端口，例如：

docker run -d -p 8080:80 your-dockerhub-username/samplenetcorereact:latest

访问http://localhost:8080即可验证React应用是否正常加载。

关于日志中的DataProtection警告 #

这两个警告属于容器环境下的正常提示，不影响应用运行：

• 密钥存储在容器内目录，容器销毁后密钥丢失，若需持久化可配置外部密钥存储。
• 未配置XML加密器，密钥以明文存储，生产环境可配置加密机制增强安全性。

内容的提问来源于stack exchange，提问作者Việt Tùng Nguyễn