如何使用 Nginx 和 Kestrel 访问在 Linux 上运行的 Blazor 应用程序的 wwwroot？

Question

我是 Blazor 的初学者，出于学习目的，我决定使用 Raspberry Pi OS Lite 64 位、.Net Core 8.0、Nginx 和 Kestrel 设置一个小型服务器 Raspberry Pi。

我成功部署了与 Web API 通信的 BlazorWebApp 前端。除了以下情况：我无法访问 wwwroot 中的文件夹，因此我的页面无法加载图像或 JavaScript。

我已经在这个问题上思考了几个星期了，我快要疯了。我已经尝试过Nginx、Kestrel和program.cs中的各种配置。

Program.cs中通常需要的命令似乎根本没有作用。

builder.WebHost.UseStaticWebAssets();

app.UseStaticFiles();

我尝试了这些以及它们的各种变体。

我错过了什么，因为它是 Raspberry Pi 还是因为它不是 Ubuntu？也许我应该放弃 Nginx 并尝试 Apache？

我真的是在兜圈子。我很感激任何建议。

正如我所说，我在三个关键点尝试了多种配置：Program.cs、Nginx 和 Kestrel。我还更改了 wwwroot 和所有者的权限：root、www-data，但没有任何效果。应用程序日志“NLog”没有告诉我任何信息。尽管有活动日志，Nginx 日志始终为空（这可能是问题的一部分吗？）。

我在网上搜索了，但没有找到任何与在Raspberry Pi上部署相关的内容。

抱歉，我会尽力提供更多数据，并在文本中更加直接和技术性。

浏览器调试

如图所示，我在 wwwroot/javascript 中的文件中收到 404 错误，但 wwwroot 中的 aap.css 加载正常。我已经尝试将文件放置在没有子文件夹的 wwwroot 中，但没有成功。

这是我的默认 Nginx 文件中的一个片段，root 是使 wwwroot 可访问的最后尝试之一：

 #rasp Bank Statement (Frontend)
    location /bank/ {
        root /var/www/app/BlazorBankStatement/wwwroot;
        proxy_pass         http://192.168.0.156:5023;
        include            proxy_params;
        access_log         /var/log/nginx/srv.local-bank-access.log;
        error_log          /var/log/nginx/srv.local-bank-error.log;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For 
        $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_headers_hash_max_size 512;
        proxy_headers_hash_bucket_size 128; 
    }

这里是 kestrel 服务文件：

[Unit]
Description= FrontEnd BankStatement
After=network.target

[Service]
User=www-data
Group=www-data
WorkingDirectory=/var/www/app/BlazorBankStatement/
ExecStart=/usr/local/bin/dotnet /var/www/app/BlazorBankStatement/BlazorFront.dll
Restart=always
RestartSec=10
SyslogIdentifier=YourApp
Environment=ASPNETCORE_ENVIRONMENT=Production
Environment=DOTNET_PRINT_TELEMETRY_MESSAGE=false
Environment=ASPNETCORE_URLS=http://192.168.0.156:5023

[Install]
WantedBy=multi-user.target

最后是program.cs代码，由于我多次尝试访问wwwroot，它可能有点混乱：

using BlazorFront.Components;
using BlazorFront.Service;
using BlazorFront.Service.Interface;
using Microsoft.AspNetCore.HttpOverrides;
using Microsoft.AspNetCore.StaticFiles;
using NLog.Extensions.Logging;
using System.Net;

var builder = WebApplication.CreateBuilder(args);

// Adding Nlog to the pipeline
builder.Logging.AddNLog();

// Configure Kestrel to listen on all network interfaces on port 5023

// Adds the UseStaticWebAssets middleware to serve static files, including CSS, in production
if (!builder.Environment.IsDevelopment())
{
    builder.WebHost.ConfigureKestrel(options =>
    {
        options.Listen(IPAddress.Parse("192.168.0.156"), 5023);
        
    });
    
    builder.WebHost.UseStaticWebAssets();
    //builder.Services.AddDirectoryBrowser();
}

// Add services to the container.
builder.Services.AddRazorComponents()
                .AddInteractiveServerComponents();

// WEB API ADDRESS (change according to your deployment)
builder.Services.AddScoped(sp =>
    new HttpClient
    {
        BaseAddress = new Uri("http://192.168.0.156:5020")
    });

//Download Service
builder.Services.AddScoped<IFileDownloadService, FileDownloadService>();

var app = builder.Build();


app.UseStaticFiles();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseAntiforgery();

app.MapRazorComponents<App>().AddInteractiveServerRenderMode();

//Configuration of forwarded header to work with reverse proxy... Ngnix
app.UseForwardedHeaders(new ForwardedHeadersOptions
{
    ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto
});

//REMOVED TO AVOID AUTHENTICATION ERROR IN Microsoft.AspNetCore.Authentication.IAuthenticationSchemeProvider ON Raspbery PI
//app.UseAuthentication();

//app.UseFileServer();
//var provider = new FileExtensionContentTypeProvider();
//provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}";
//app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider });
//app.UseFileServer(enableDirectoryBrowsing: true);



app.Run();

项目及类型

Answer 1

嗯。为了解决这个问题，我几乎拆掉了我的服务器，但我终于找到了问题及其解决方案。

问题：

原始文件是 “javascript/downloadService.js”，但是当您将其拖动到 Visual Studio 2022 以利用自动路径包含时，VS 会将其从 “javascript/downloadService.js” 转换为 “javascript /downloadservice.js"，将所有内容都小写！

所以这里有一个提示，伙计们：在 IDE 中拖动文件时一定要小心。请务必检查文件名。无论如何，我在问题中发布的代码是正确的，我希望它可以帮助将来的人。