使用 nginx 在 docker 中托管时缺少 Blazor WASM 样式

Question

我有一个奇怪的问题，当我尝试使用 Nginx 托管我的 blazor WASM 项目时，我的样式被破坏了。我尝试遵循几个不同的指南，它们很相似，对我来说也有同样的问题。

我这里有代码：https://github.com/TopSwagCode/Dotnet.IdentityServer/tree/master/src/BlazorClient

当我在本地调试或在本地发布并从 dotnet 服务提供服务时，我得到以下信息：

但是当我使用 Nginx 在 docker 中发布并尝试运行它时，我得到了这个：

我的按钮还在，但我看不到它们，因为它们是白色的。

我的 docker 文件非常简单：

FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build-env
WORKDIR /app
COPY . ./
RUN dotnet publish -c Release -o output
FROM nginx:alpine
WORKDIR /var/www/web
COPY --from=build-env /app/output/wwwroot .
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

我的 nginx 配置

events { }
http {
    include mime.types;
    types {
        application/wasm wasm;
    }

    server {
        listen 80;

        # Here, we set the location for Nginx to serve the files
        # by looking for index.html
        location / {
            root /var/www/web;
            try_files $uri $uri/ /index.html =404;
        }
    }
}

我在网络选项卡中找不到任何“未找到”或类似内容。

编辑：

当并排比较两个运行ning 时，我找不到线性渐变的 CSS，它是菜单的紫色面。再深入一点，似乎 MainLayout.razor.css 中的所有 CSS 都没有被发现。

https://github.com/TopSwagCode/Dotnet.IdentityServer/blob/master/src/BlazorClient/Shared/MainLayout.razor.css

当运行在本地时：

当运行ning使用Docker+Nginx

在我看来，CSS 以某种方式丢失了？？？

编辑 2：

CSS 的构建散列在部署后似乎不匹配。所以我发现我的页面上链接的 CSS 文件如下所示：

但是我的 HTML 不匹配。它看起来像这样：

不知道如何在 Docker+Nginx 的构建和部署期间中断？？？我的 docker 文件有什么地方做错了吗？？？

Answer 1

经过长时间调试这个问题，我终于让它工作了。我找到了这个项目：https://github.com/waelkdouh/DockerizedClientSideBlazor/ 并开始比较。我唯一能看到的不同之处在于，他有一个 .dockerignore 我复制了一份，一切都开始工作了。不知道是什么问题。看不到列出的任何文件如何破坏 CSS.....

Answer 2

我之前也运行关注过这个问题。删除您的 bin a obj 文件夹。似乎存在一些缓存问题，其中范围 css 中生成的范围在调试和发布之间不匹配。

使用 nginx 在 docker 中托管时缺少 Blazor WASM 样式

Blazor WASM styling missing when hosted in docker using nginx

nginx

docker

.net-core

blazor-webassembly