I'm a beginner in using Blazor, and for study purposes, I decided to set up a small server Raspberry Pi with Raspberry Pi OS Lite 64 Bits, .Net Core 8.0, Nginx, and Kestrel.
I successfully deployed a BlazorWebApp frontend that communicates with a Web API. Except for the following: I can't access the folders in wwwroot so my page doesn't load images or JavaScript.
I've been on this issue for a few weeks and I'm going crazy. I've tried all kinds of configurations in Nginx, Kestrel, and program.cs.
The commands that are usually needed in Program.cs seem to have no effect at all.
builder.WebHost.UseStaticWebAssets();app.UseStaticFiles();I tried these and various variations of them.
Am I missing something because it's a Raspberry Pi or because it's not Ubuntu? Maybe I should leave Nginx behind and try Apache?
I'm really going in circles here. I appreciate any advice.
As I said, I tried multiple configurations in the three key points: Program.cs, Nginx, and Kestrel. I also changed the permissions of wwwroot and the owner: root, www-data, but nothing works. The application log "NLog" doesn't tell me anything. And despite having active logs, the Nginx logs are always empty (could this be part of the problem?).
I searched the internet, but I couldn't find anything related to deployment on Raspberry Pi.
Sorry, I'll try to provide more data and be more direct and technical in the text.
As you can see in the image, I'm getting a 404 error for a file that is in wwwroot/javascript, yet aap.css that is in wwwroot loads normally. I've already tried placing the files in wwwroot without subfolders, without success.
Here's a snippet from my default Nginx file, root was one of the last attempts to make wwwroot accessible:
#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; }Here the kestrel Service file:
[Unit]Description= FrontEnd BankStatementAfter=network.target[Service]User=www-dataGroup=www-dataWorkingDirectory=/var/www/app/BlazorBankStatement/ExecStart=/usr/local/bin/dotnet /var/www/app/BlazorBankStatement/BlazorFront.dllRestart=alwaysRestartSec=10SyslogIdentifier=YourAppEnvironment=ASPNETCORE_ENVIRONMENT=ProductionEnvironment=DOTNET_PRINT_TELEMETRY_MESSAGE=falseEnvironment=ASPNETCORE_URLS=http://192.168.0.156:5023[Install]WantedBy=multi-user.targetAnd finally the program.cs code, it may be a little messed up due to my several attempts to access 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 pipelinebuilder.Logging.AddNLog();// Configure Kestrel to listen on all network interfaces on port 5023// Adds the UseStaticWebAssets middleware to serve static files, including CSS, in productionif (!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 Servicebuilder.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... Ngnixapp.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();