Docker容器中.NET 8 Blazor Server应用Scoped CSS失效问题

问题详情 #

使用Visual Studio 2022创建的空白.NET 8 Blazor Server Web应用，在Docker容器中运行时功能正常，但样式完全混乱，Scoped生成的BlazorDemo.styles.css未生效。浏览器可正常加载app.css，控制台仅报两个WebSocket连接失败错误（涉及5000、5001端口）。

相关配置文件与命令 #

Dockerfile #

# Use .NET 8 SDK image for development
FROM mcr.microsoft.com/dotnet/sdk:8.0 AS dev

# Set working directory inside the container
WORKDIR /app

# Copy only the project file(s) to leverage Docker cache
COPY *.csproj ./
RUN dotnet restore

# Copy the rest of the application files
COPY . ./

# Install dependencies for watch mode
RUN dotnet dev-certs https --trust

# Expose the Blazor Server port
EXPOSE 5000
EXPOSE 5001

# Set the entrypoint to run in watch mode
ENTRYPOINT ["dotnet", "watch", "run", "--no-hot-reload", "--urls", "http://0.0.0.0:5000;https://0.0.0.0:5001"]

运行命令 #

docker run -it --rm -p 5000:5000 -p 5001:5001

App.razor头部代码 #

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="BlazorDemo.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />

解决方法 #

• 确认Scoped CSS文件存在性
  进入容器检查wwwroot目录下是否有BlazorDemo.styles.css：

  docker exec -it <容器ID> ls /app/wwwroot
  

  若文件缺失，在Dockerfile中添加编译步骤确保生成该文件：

  RUN dotnet build
  

• 修复WebSocket连接问题
  Blazor Server依赖WebSocket同步样式与状态，连接失败会导致Scoped CSS失效：

  1. 运行容器时添加WebSocket传输环境变量：

     docker run -it --rm -p 5000:5000 -p 5001:5001 -e ASPNETCORE_WS_TRANSPORT=WebSockets
     

  2. 在Program.cs中配置Hub选项，启用详细错误排查：

     builder.Services.AddServerSideBlazor().AddHubOptions(options =>
     {
         options.EnableDetailedErrors = true;
         options.ClientTimeoutInterval = TimeSpan.FromSeconds(30);
     });
     

• 改用多阶段构建流程
  多阶段构建能确保编译生成的静态文件完整拷贝到运行镜像，避免文件缺失：

  # 构建阶段
  FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
  WORKDIR /src
  COPY ["BlazorDemo.csproj", "."]
  RUN dotnet restore "./BlazorDemo.csproj"
  COPY . .
  RUN dotnet build "BlazorDemo.csproj" -c Release -o /app/build
  
  # 发布阶段
  FROM build AS publish
  RUN dotnet publish "BlazorDemo.csproj" -c Release -o /app/publish /p:UseAppHost=false
  
  # 运行阶段
  FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS final
  WORKDIR /app
  COPY --from=publish /app/publish .
  EXPOSE 5000
  EXPOSE 5001
  ENTRYPOINT ["dotnet", "BlazorDemo.dll", "--urls", "http://0.0.0.0:5000;https://0.0.0.0:5001"]
  

• 检查静态文件请求状态
  在浏览器开发者工具的Network面板查看BlazorDemo.styles.css的请求状态，若返回404，需确认base href设置正确，且文件路径与请求路径一致。

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