How to serve a Blazor app using NginX on Ubuntu

Question

I'm trying to serve the default Blazor hello world app (https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/intro) to the public internet. I'm trying to make this happen by running NginX on a Ubuntu 20.04 LTS installation.

I run the hello world app using the command "dotnet run". This makes the app available at localhost:5000. I then use NginX to pass any requests to the servers public ip to localhost 5000. Instead of loading all files, I only get the raw html file, without any of the .css or .js files required.

Image: Html page without css or js files loaded

So when viewer the app trhoug localhost:5000, I get the working page. When viewing it throug the servers public IP, I only get the raw html, without js or css files. When viewing the app through localhost:5000/counter for example, the counter page gets loaded. When accessing it via the public internet using IP/counter, nothing gets loaded.

This is my nginx configuration under etc/nginx/sites-available/default. Unsure on what I need to change or where I can find more information on this.

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                proxy_pass http://localhost:5000/;
                try_files $uri $uri/ /css /wwwroot /Shared /Services =404;
            proxy_http_version 1.1;
            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;
        }

Answer 1

This is what I'm using on my temporary test platform (Raspbian). It works for me, but I make no guarantees that it's correct from a security standpoint, please do your own review before deploying.

server {
    listen 80;
    server_name xxxxx.duckdns.org;
    return 301 https://$host$request_uri;
}

server
{
    listen              443 ssl;
    server_name         xxxxx.duckdns.org;
    keepalive_timeout   70;

    ssl_certificate     /path/to/certs/xxxxx.duckdns.org/cert.pem;
    ssl_certificate_key /path/to/certs/xxxxx.duckdns.org/privkey.pem;
    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers         HIGH:!aNULL:!MD5;
    ssl_session_cache   shared:SSL:10m;
    ssl_session_timeout 10m;
    ssl_dhparam         /etc/nginx/ssl/dhparam.pem;
    add_header          Strict-Transport-Security "max-age=63072000; includeSubdomains";
    add_header          X-Frame-Options DENY;

    location /
    {
        proxy_pass http://localhost:5000;
    }
}