Edit

Share via

Host and deploy ASP.NET Core Blazor WebAssembly with Nginx

  • Article

Note

This isn't the latest version of this article. For the current release, see the .NET 9 version of this article.

Warning

This version of ASP.NET Core is no longer supported. For more information, see the .NET and .NET Core Support Policy. For the current release, see the .NET 9 version of this article.

Important

This information relates to a pre-release product that may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.

For the current release, see the .NET 9 version of this article.

This article explains how to host and deploy Blazor WebAssembly using Nginx.

The following nginx.conf file is simplified to show how to configure Nginx to send the index.html file whenever it can't find a corresponding file on disk.

events { }
http {
    server {
        listen 80;

        location / {
            root      /usr/share/nginx/html;
            try_files $uri $uri/ /index.html =404;
        }
    }
}

When setting the NGINX burst rate limit with limit_req and limit_req_zone, Blazor WebAssembly apps may require a large burst/rate parameter values to accommodate the relatively large number of requests made by an app. Initially, set the value to at least 60:

http {
    limit_req_zone $binary_remote_addr zone=one:10m rate=60r/s;
    server {
        ...

        location / {
            ...

            limit_req zone=one burst=60 nodelay;
        }
    }
}

Increase the value if browser developer tools or a network traffic tool indicates that requests are receiving a 503 - Service Unavailable status code.

For more information on production Nginx web server configuration, see Creating NGINX Plus and NGINX Configuration Files.

Hosted deployment on Linux (Nginx)

Configure the app with ForwardedHeadersOptions to forward the X-Forwarded-For and X-Forwarded-Proto headers by following the guidance in Configure ASP.NET Core to work with proxy servers and load balancers.

For more information on setting the app's base path, including sub-app path configuration, see ASP.NET Core Blazor app base path.

Follow the guidance for an ASP.NET Core SignalR app with the following changes:

  • Remove the configuration for proxy buffering (proxy_buffering off;) because the setting only applies to Server-Sent Events (SSE), which aren't relevant to Blazor app client-server interactions.

  • Change the location path from /hubroute (location /hubroute { ... }) to the sub-app path /{PATH} (location /{PATH} { ... }), where the {PATH} placeholder is the sub-app path.

    The following example configures the server for an app that responds to requests at the root path /:

    http {
    server {
        ...
        location / {
            ...
        }
    }
}

    The following example configures the sub-app path of /blazor:

    http {
    server {
        ...
        location /blazor {
            ...
        }
    }
}

Additional resources