From bbe7567365af011a4fc517ed268ae04109e60dd9 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Thu, 6 Jan 2022 12:14:32 -0600 Subject: [PATCH 01/11] Blazor Linux hosting --- .../blazor/host-and-deploy/webassembly.md | 161 ++++++++++++++++++ 1 file changed, 161 insertions(+) diff --git a/aspnetcore/blazor/host-and-deploy/webassembly.md b/aspnetcore/blazor/host-and-deploy/webassembly.md index 8a14378bd6cc..973f6a0e1b42 100644 --- a/aspnetcore/blazor/host-and-deploy/webassembly.md +++ b/aspnetcore/blazor/host-and-deploy/webassembly.md @@ -166,6 +166,167 @@ For more information, see the following articles: * Deployment to Azure App Service: * Blazor project templates: +## Hosted deployment on Linux + +For a hosted Blazor WebAssembly app accessible via requests at the root URL (`/`), additional app configuration isn't required. + +For a hosted Blazor WebAssembly accessible at a sub-app path (for example, `/blazor`): + +* In `Program.cs` of the **`Server`** project: + + * Add a `using` statement to the top of the file for the namespace: + + ```csharp + using Microsoft.AspNetCore.HttpOverrides; + ``` + + * Configure to forward : + + ```csharp + app.UseForwardedHeaders(new ForwardedHeadersOptions + { + ForwardedHeaders = + ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto + }); + + app.UsePathBase("/blazor"); + ``` + +* In `wwwroot/index.html` of the **`Client`** project, set the [app base path](xref:blazor/host-and-deploy/index#app-base-path) to the app's sub-app path. A trailing slash is required. Replace the `{PATH}` placeholder with the sub-app path in the following markup: + + ```html + + ``` + + For an app that loads requests at `/blazor`, the `href` attribute is set to a value of `/blazor/`: + + ```html + + ``` + +* In links throughout the app, do ***not*** prefix with a forward slash. Either don't use a path segment separator or use dot-slash (`./`) notation: + + * ❌ Incorrect: `` + * ✔️ Correct: `` + * ✔️ Correct: `` + +* In [web API requests with the `HttpClient` service](xref:blazor/call-web-api?pivots=webassembly), confirm that JSON helpers () do ***not*** prefix URLs with a forward slash (`/`): + + * ❌ Incorrect: `var rsp = await client.GetFromJsonAsync("/api/Account");` + * ✔️ Correct: `var rsp = await client.GetFromJsonAsync("api/Account");` + +### Nginx + +The following example hosts the app at a root URL (no sub-app path): + +``` +server { + listen 80; + server_name example.com *.example.com; + location / { + proxy_pass http://0.0.0.0:5000; + 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; + } +} +``` + +To configure the server to host the app at a sub-app path, the `{PATH}` placeholder in the following `location` entry is the sub-app path: + +``` +server { + ... + location /{PATH} { + ... + } +} +``` + +For an app that loads requests at `/blazor`: + +``` +server { + ... + location /blazor { + ... + } +} +``` + +For more information, see . + +### Apache + +The following example hosts the app at a root URL (no sub-app path): + +``` + + RequestHeader set "X-Forwarded-Proto" expr=%{REQUEST_SCHEME} + + + + ProxyRequests On + ProxyPreserveHost On + ProxyPass / http://0.0.0.0:5000/ + ProxyPassReverse / http://0.0.0.0:5000/ + ProxyPassMatch ^/_blazor/(.*) http://0.0.0.0:5000/_blazor/$1 + ProxyPass /_blazor ws://0.0.0.0:5000/_blazor + ServerName www.example.com + ServerAlias *.example.com + ErrorLog ${APACHE_LOG_DIR}helloapp-error.log + CustomLog ${APACHE_LOG_DIR}helloapp-access.log common + +``` + +To configure the server to host the app at a sub-app path, the `{PATH}` placeholder in the following `location` entry is the sub-app path: + +``` + + RequestHeader set "X-Forwarded-Proto" expr=%{REQUEST_SCHEME} + + + + ProxyRequests On + ProxyPreserveHost On + ProxyPass / http://0.0.0.0:5000/{PATH} + ProxyPassReverse / http://0.0.0.0:5000/{PATH} + ProxyPassMatch ^/_blazor/(.*) http://0.0.0.0:5000/{PATH}/_blazor/$1 + ProxyPass /_blazor ws://0.0.0.0:5000/{PATH}/_blazor + ServerName www.example.com + ServerAlias *.example.com + ErrorLog ${APACHE_LOG_DIR}helloapp-error.log + CustomLog ${APACHE_LOG_DIR}helloapp-access.log common + +``` + +For an app that loads requests at `/blazor`: + +``` + + RequestHeader set "X-Forwarded-Proto" expr=%{REQUEST_SCHEME} + + + + ProxyRequests On + ProxyPreserveHost On + ProxyPass / http://0.0.0.0:5000/blazor + ProxyPassReverse / http://0.0.0.0:5000/blazor + ProxyPassMatch ^/_blazor/(.*) http://0.0.0.0:5000/blazor/_blazor/$1 + ProxyPass /_blazor ws://0.0.0.0:5000/blazor/_blazor + ServerName www.example.com + ServerAlias *.example.com + ErrorLog ${APACHE_LOG_DIR}helloapp-error.log + CustomLog ${APACHE_LOG_DIR}helloapp-access.log common + +``` + +For more information, see . + ## Hosted deployment with multiple Blazor WebAssembly apps ### App configuration From 0c59c82e1e2a134bc88c9709bffec79e3cc55f10 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Thu, 6 Jan 2022 12:20:32 -0600 Subject: [PATCH 02/11] Updates --- aspnetcore/blazor/host-and-deploy/webassembly.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/aspnetcore/blazor/host-and-deploy/webassembly.md b/aspnetcore/blazor/host-and-deploy/webassembly.md index 973f6a0e1b42..1b0c00d5607a 100644 --- a/aspnetcore/blazor/host-and-deploy/webassembly.md +++ b/aspnetcore/blazor/host-and-deploy/webassembly.md @@ -242,7 +242,7 @@ To configure the server to host the app at a sub-app path, the `{PATH}` placehol server { ... location /{PATH} { - ... + ... } } ``` @@ -253,7 +253,7 @@ For an app that loads requests at `/blazor`: server { ... location /blazor { - ... + ... } } ``` @@ -283,7 +283,7 @@ The following example hosts the app at a root URL (no sub-app path): ``` -To configure the server to host the app at a sub-app path, the `{PATH}` placeholder in the following `location` entry is the sub-app path: +To configure the server to host the app at a sub-app path, the `{PATH}` placeholder in the following entires is the sub-app path: ``` From ff4fadf18ca8319941fb74de779e1d760ba097b3 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 7 Jan 2022 10:52:48 -0600 Subject: [PATCH 03/11] Updates --- .../blazor/host-and-deploy/webassembly.md | 57 ++++++++++++++++--- 1 file changed, 48 insertions(+), 9 deletions(-) diff --git a/aspnetcore/blazor/host-and-deploy/webassembly.md b/aspnetcore/blazor/host-and-deploy/webassembly.md index 1b0c00d5607a..de10d44638aa 100644 --- a/aspnetcore/blazor/host-and-deploy/webassembly.md +++ b/aspnetcore/blazor/host-and-deploy/webassembly.md @@ -168,7 +168,29 @@ For more information, see the following articles: ## Hosted deployment on Linux -For a hosted Blazor WebAssembly app accessible via requests at the root URL (`/`), additional app configuration isn't required. +### Apps accessible at the root URL + +For a hosted Blazor WebAssembly app accessible via requests at the root URL (`/`), update `Program.cs` of the **`Server`** project: + +* Add a `using` statement to the top of the file for the namespace: + + ```csharp + using Microsoft.AspNetCore.HttpOverrides; + ``` + +* Configure to forward the `X-Forwarded-For` and `X-Forwarded-Proto` headers: + + ```csharp + app.UseForwardedHeaders(new ForwardedHeadersOptions + { + ForwardedHeaders = + ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto + }); + ``` + +For more information, see . + +### Apps accessible at a sub-app path For a hosted Blazor WebAssembly accessible at a sub-app path (for example, `/blazor`): @@ -180,7 +202,19 @@ For a hosted Blazor WebAssembly accessible at a sub-app path (for example, `/bla using Microsoft.AspNetCore.HttpOverrides; ``` - * Configure to forward : + * Configure to forward the `X-Forwarded-For` and `X-Forwarded-Proto` headers, and call to add middleware that extracts the specified path base from request path and postpend it to the request path base: + + ```csharp + app.UseForwardedHeaders(new ForwardedHeadersOptions + { + ForwardedHeaders = + ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto + }); + + app.UsePathBase("{PATH}"); + ``` + + In the preceding example, the `{PATH}` placeholder is the sub-app path. In the following example, the app's sub-app path is `/blazor`: ```csharp app.UseForwardedHeaders(new ForwardedHeadersOptions @@ -192,19 +226,24 @@ For a hosted Blazor WebAssembly accessible at a sub-app path (for example, `/bla app.UsePathBase("/blazor"); ``` -* In `wwwroot/index.html` of the **`Client`** project, set the [app base path](xref:blazor/host-and-deploy/index#app-base-path) to the app's sub-app path. A trailing slash is required. Replace the `{PATH}` placeholder with the sub-app path in the following markup: + For more information, see the following resources: + + * + * + +* In `wwwroot/index.html` of the **`Client`** project, set the [app base path](xref:blazor/host-and-deploy/index#app-base-path) to the app's sub-app path. **A trailing slash is required.** Replace the `{PATH}` placeholder with the sub-app path in the following markup: ```html ``` - For an app that loads requests at `/blazor`, the `href` attribute is set to a value of `/blazor/`: + For an app that loads requests at `/blazor`, the `href` attribute is set to a value of `/blazor/`. Note that the trailing slash in the following example is required: ```html ``` -* In links throughout the app, do ***not*** prefix with a forward slash. Either don't use a path segment separator or use dot-slash (`./`) notation: +* In links throughout the app, do ***not*** prefix with a forward slash. Either avoid the use of a path segment separator or use dot-slash (`./`) relative path notation: * ❌ Incorrect: `` * ✔️ Correct: `` @@ -215,7 +254,7 @@ For a hosted Blazor WebAssembly accessible at a sub-app path (for example, `/bla * ❌ Incorrect: `var rsp = await client.GetFromJsonAsync("/api/Account");` * ✔️ Correct: `var rsp = await client.GetFromJsonAsync("api/Account");` -### Nginx +#### Nginx The following example hosts the app at a root URL (no sub-app path): @@ -247,7 +286,7 @@ server { } ``` -For an app that loads requests at `/blazor`: +For an app that responds to requests at `/blazor`: ``` server { @@ -260,7 +299,7 @@ server { For more information, see . -### Apache +#### Apache The following example hosts the app at a root URL (no sub-app path): @@ -304,7 +343,7 @@ To configure the server to host the app at a sub-app path, the `{PATH}` placehol ``` -For an app that loads requests at `/blazor`: +For an app that responds to requests at `/blazor`: ``` From 1000fc6edb47dee068c6a9c8ec3baaf8065d25c7 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Sat, 8 Jan 2022 07:04:39 -0600 Subject: [PATCH 04/11] Updates --- aspnetcore/blazor/host-and-deploy/index.md | 275 +++++++++++++----- aspnetcore/blazor/host-and-deploy/server.md | 23 +- .../blazor/host-and-deploy/webassembly.md | 8 +- aspnetcore/signalr/scale.md | 2 +- 4 files changed, 223 insertions(+), 85 deletions(-) diff --git a/aspnetcore/blazor/host-and-deploy/index.md b/aspnetcore/blazor/host-and-deploy/index.md index 643304b84e26..2a2edad12cc7 100644 --- a/aspnetcore/blazor/host-and-deploy/index.md +++ b/aspnetcore/blazor/host-and-deploy/index.md @@ -5,7 +5,7 @@ description: Discover how to host and deploy Blazor apps. monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 11/09/2021 +ms.date: 01/08/2022 no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] uid: blazor/host-and-deploy/index --- @@ -73,58 +73,89 @@ Without specifying additional configuration for `CoolApp`, the sub-app in this s To provide configuration for the Blazor app's base path of `https://www.contoso.com/CoolApp/`, set the relative root path. -Blazor WebAssembly (`wwwroot/index.html`): +By configuring the relative URL path for an app, a component that isn't in the root directory can construct URLs relative to the app's root path. Components at different levels of the directory structure can build links to other resources at locations throughout the app. The app base path is also used to intercept selected hyperlinks where the `href` target of the link is within the app base path URI space. The Blazor router handles the internal navigation. -```html - -``` +In many hosting scenarios, the relative URL path to the app is the root of the app. In these default cases, the app's relative URL base path is the following: + +* Blazor WebAssembly: `/` configured as `` in `wwwroot/index.html`. +* Blazor Server: `~/` configured as `` in `Pages/_Layout.cshtml`. -**The trailing slash is required.** +In other hosting scenarios, such as GitHub Pages and IIS sub-apps, the app base path must be set to the server's relative URL path of the app. -In a Blazor Server app, use ***either*** of the following approaches: +* Standalone Blazor WebAssembly: -* Option 1: Use the `` tag in `Pages/_Layout.cshtml` to set the app's base path: + `wwwroot/index.html`: ```html ``` - + **The trailing slash is required.** -* Option 2: Call in the app's request pipeline (`Program.cs`): +* Hosted Blazor WebAssembly: + + In the **`Client`** project, `wwwroot/index.html`: + + ```html + + ``` + + **The trailing slash is required.** + + In the **`Server`** project, call in the app's request pipeline (`Program.cs`): ```csharp app.UsePathBase("/CoolApp"); ``` + +* In a Blazor Server app, use ***either*** of the following approaches: + + * Option 1: Use the `` tag in `Pages/_Layout.cshtml` to set the app's base path: + + ```html + + ``` + + **The trailing slash is required.** + + * Option 2: Call in the app's request pipeline (`Program.cs`): + + ```csharp + app.UsePathBase("/CoolApp"); + ``` + + Calling is recommended when you also wish to run the Blazor Server app locally. For example, supply the launch URL in `Properties/launchSettings.json`: - This approach (Option 2) is recommended when you also wish to run the Blazor Server app locally. For example, supply the launch URL in `Properties/launchSettings.json`: - - ```xml - "launchUrl": "https://localhost:{PORT}/CoolApp", - ``` - - The `{PORT}` placeholder in the preceding example is the port that matches the secure port in the `applicationUrl` configuration path. The following example shows the full launch profile for an app at port 7279: - - ```xml - "BlazorSample": { - "commandName": "Project", - "dotnetRunMessages": true, - "launchBrowser": true, - "applicationUrl": "https://localhost:7279;http://localhost:5279", - "launchUrl": "https://localhost:7279/CoolApp", - "environmentVariables": { - "ASPNETCORE_ENVIRONMENT": "Development" - } - ``` + ```xml + "launchUrl": "https://localhost:{PORT}/CoolApp", + ``` + + The `{PORT}` placeholder in the preceding example is the port that matches the secure port in the `applicationUrl` configuration path. The following example shows the full launch profile for an app at port 7279: + ```xml + "BlazorSample": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "applicationUrl": "https://localhost:7279;http://localhost:5279", + "launchUrl": "https://localhost:7279/CoolApp", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + ``` + > [!NOTE] > In typical configurations for Azure/IIS hosting, additional configuration usually isn't required. In some non-IIS hosting and reverse proxy hosting scenarios, additional Static File Middleware configuration might be required to serve static files correctly (for example, `app.UseStaticFiles("/CoolApp");`). The required configuration might require further configuration to serve the Blazor script (`_framework/blazor.server.js` or `_framework/blazor.webassembly.js`). For more information, see . -> -> For third-party host support, check the host provider's documentation and interact with developers on public support forums to implement the correct configuration. Common general support forums include: [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor), [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/), and [Blazor Gitter](https://gitter.im/aspnet/Blazor). *The preceding forums are not owned or controlled by Microsoft.* - -By providing the relative URL path, a component that isn't in the root directory can construct URLs relative to the app's root path. Components at different levels of the directory structure can build links to other resources at locations throughout the app. The app base path is also used to intercept selected hyperlinks where the `href` target of the link is within the app base path URI space. The Blazor router handles the internal navigation. - -In many hosting scenarios, the relative URL path to the app is the root of the app. In these cases, the app's relative URL base path is a forward slash (`` for Blazor WebAssembly or `` for Blazor Server), which is the default configuration for a Blazor app. In other hosting scenarios, such as GitHub Pages and IIS sub-apps, the app base path must be set to the server's relative URL path of the app. +> +> For additional third-party host support: +> +> * and +> * +> * Consult the host provider's documentation. +> * Consult developers on non-Microsoft support forums: +> * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) +> * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) +> * [Blazor Gitter](https://gitter.im/aspnet/Blazor). For a Blazor WebAssembly app with a non-root relative URL path (for example, ``), the app fails to find its resources *when run locally*. To overcome this problem during local development and testing, you can supply a *path base* argument that matches the `href` value of the `` tag at runtime. **Don't include a trailing slash.** To pass the path base argument when running the app locally, execute the `dotnet run` command from the app's directory with the `--pathbase` option: @@ -144,13 +175,13 @@ The Blazor WebAssembly app responds locally at `http://localhost:port/CoolApp`. In scenarios where an app requires a separate area with custom resources and Razor components: -* Create a folder within the app's `Pages` folder to hold the resources. For example, an administator section of an app is created in a new folder named `Admin` (`Pages/Admin`). +* Create a folder within the app's `Pages` folder to hold the resources. For example, an administrator section of an app is created in a new folder named `Admin` (`Pages/Admin`). * Create a root page (`_Host.cshtml`) for the area. For example, create a `Pages/Admin/_Host.cshtml` file from the app's main root page (`Pages/_Host.cshtml`). Don't provide an `@page` directive in the Admin `_Host` page. * Add a layout to the area's folder (for example, `Pages/Admin/_Layout.razor`). In the layout for the separate area, set the `` tag `href` to match the area's folder (for example, ``). For demonstration purposes, add `~/` to the static resources in the page. For example: * `~/css/bootstrap/bootstrap.min.css` * `~/css/site.css` * `~/BlazorSample.styles.css` (the example app's namespace is `BlazorSample`) - * `~/_framework/blazor.server.js` for the Blazor script + * `~/_framework/blazor.server.js` (Blazor script) * If the area should have its own static asset folder, add the folder and specify its location to Static File Middleware in `Program.cs` (for example, `app.UseStaticFiles("/Admin/wwwroot")`). * Razor components are added to the area's folder. At a minimum, add an `Index` component to the area folder with the correct `@page` directive for the area. For example, add a `Pages/Admin/Index.razor` file based on the app's default `Pages/Index.razor` file. Indicate the Admin area as the route template at the top of the file (`@page "/admin"`). Add additional components as needed. For example, `Pages/Admin/Component1.razor` with an `@page` directive and route template of `@page "/admin/component1`. * In `Program.cs`, call for the area's request path immediately before the fallback root page path to the `_Host` page: @@ -238,38 +269,89 @@ Without specifying additional configuration for `CoolApp`, the sub-app in this s To provide configuration for the Blazor app's base path of `https://www.contoso.com/CoolApp/`, set the relative root path. -Blazor WebAssembly (`wwwroot/index.html`): +By configuring the relative URL path for an app, a component that isn't in the root directory can construct URLs relative to the app's root path. Components at different levels of the directory structure can build links to other resources at locations throughout the app. The app base path is also used to intercept selected hyperlinks where the `href` target of the link is within the app base path URI space. The Blazor router handles the internal navigation. -```html - -``` +In many hosting scenarios, the relative URL path to the app is the root of the app. In these default cases, the app's relative URL base path is the following: -**The trailing slash is required.** +* Blazor WebAssembly: `/` configured as `` in `wwwroot/index.html`. +* Blazor Server: `~/` configured as `` in `Pages/_Host.cshtml`. -In a Blazor Server app, use ***either*** of the following approaches: +In other hosting scenarios, such as GitHub Pages and IIS sub-apps, the app base path must be set to the server's relative URL path of the app. -* Option 1: Use the `` tag in `Pages/_Host.cshtml` to set the app's base path: +* Standalone Blazor WebAssembly: + + `wwwroot/index.html`: ```html ``` - + + **The trailing slash is required.** + +* Hosted Blazor WebAssembly: + + In the **`Client`** project, `wwwroot/index.html`: + + ```html + + ``` + **The trailing slash is required.** -* Option 2: Call in the app's request pipeline (`Program.cs`): + In the **`Server`** project, call in the app's request pipeline (`Startup.cs`): ```csharp app.UsePathBase("/CoolApp"); ``` -> [!NOTE] -> In typical configurations for Azure/IIS hosting, additional configuration usually isn't required. In some non-IIS hosting and reverse proxy hosting scenarios, additional Static File Middleware configuration might be required to serve static files correctly (for example, `app.UseStaticFiles("/CoolApp");`). The required configuration might require further configuration to serve the Blazor script (`_framework/blazor.server.js` or `_framework/blazor.webassembly.js`). For more information, see . -> -> For third-party host support, check the host provider's documentation and interact with developers on public support forums to implement the correct configuration. Common general support forums include: [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor), [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/), and [Blazor Gitter](https://gitter.im/aspnet/Blazor). *The preceding forums are not owned or controlled by Microsoft.* +* In a Blazor Server app, use ***either*** of the following approaches: + + * Option 1: Use the `` tag in `Pages/_Host.cshtml` to set the app's base path: -By providing the relative URL path, a component that isn't in the root directory can construct URLs relative to the app's root path. Components at different levels of the directory structure can build links to other resources at locations throughout the app. The app base path is also used to intercept selected hyperlinks where the `href` target of the link is within the app base path URI space. The Blazor router handles the internal navigation. + ```html + + ``` -In many hosting scenarios, the relative URL path to the app is the root of the app. In these cases, the app's relative URL base path is a forward slash (`` for Blazor WebAssembly or `` for Blazor Server), which is the default configuration for a Blazor app. In other hosting scenarios, such as GitHub Pages and IIS sub-apps, the app base path must be set to the server's relative URL path of the app. + **The trailing slash is required.** + + * Option 2: Call in the app's request pipeline (`Startup.cs`): + + ```csharp + app.UsePathBase("/CoolApp"); + ``` + + Calling is recommended when you also wish to run the Blazor Server app locally. For example, supply the launch URL in `Properties/launchSettings.json`: + + ```xml + "launchUrl": "https://localhost:{PORT}/CoolApp", + ``` + + The `{PORT}` placeholder in the preceding example is the port that matches the secure port in the `applicationUrl` configuration path. The following example shows the full launch profile for an app at port 7279: + + ```xml + "BlazorSample": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "applicationUrl": "https://localhost:7279;http://localhost:5279", + "launchUrl": "https://localhost:7279/CoolApp", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + ``` + +> [!NOTE] +> In typical configurations for Azure/IIS hosting, additional configuration usually isn't required. In some non-IIS hosting and reverse proxy hosting scenarios, additional Static File Middleware configuration might be required to serve static files correctly (for example, `app.UseStaticFiles("/CoolApp");`). The required configuration might require further configuration to serve the Blazor script (`_framework/blazor.server.js` or `_framework/blazor.webassembly.js`). For more information, see . +> +> For additional third-party host support: +> +> * and +> * +> * Consult the host provider's documentation. +> * Consult developers on non-Microsoft support forums: +> * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) +> * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) +> * [Blazor Gitter](https://gitter.im/aspnet/Blazor). For a Blazor WebAssembly app with a non-root relative URL path (for example, ``), the app fails to find its resources *when run locally*. To overcome this problem during local development and testing, you can supply a *path base* argument that matches the `href` value of the `` tag at runtime. **Don't include a trailing slash.** To pass the path base argument when running the app locally, execute the `dotnet run` command from the app's directory with the `--pathbase` option: @@ -289,13 +371,13 @@ The Blazor WebAssembly app responds locally at `http://localhost:port/CoolApp`. In scenarios where an app requires a separate area with custom resources and Razor components: -* Create a folder within the app's `Pages` folder to hold the resources. For example, an administator section of an app is created in a new folder named `Admin` (`Pages/Admin`). +* Create a folder within the app's `Pages` folder to hold the resources. For example, an administrator section of an app is created in a new folder named `Admin` (`Pages/Admin`). * Create a root page (`_Host.cshtml`) for the area. For example, create a `Pages/Admin/_Host.cshtml` file from the app's main root page (`Pages/_Host.cshtml`). Don't provide an `@page` directive in the Admin `_Host` page. * Add a layout to the area's folder (for example, `Pages/Admin/_Layout.razor`). In the layout for the separate area, set the `` tag `href` to match the area's folder (for example, ``). For demonstration purposes, add `~/` to the static resources in the page. For example: * `~/css/bootstrap/bootstrap.min.css` * `~/css/site.css` * `~/BlazorSample.styles.css` (the example app's namespace is `BlazorSample`) - * `~/_framework/blazor.server.js` for the Blazor script + * `~/_framework/blazor.server.js` (Blazor script) * If the area should have its own static asset folder, add the folder and specify its location to Static File Middleware in `Program.cs` (for example, `app.UseStaticFiles("/Admin/wwwroot")`). * Razor components are added to the area's folder. At a minimum, add an `Index` component to the area folder with the correct `@page` directive for the area. For example, add a `Pages/Admin/Index.razor` file based on the app's default `Pages/Index.razor` file. Indicate the Admin area as the route template at the top of the file (`@page "/admin"`). Add additional components as needed. For example, `Pages/Admin/Component1.razor` with an `@page` directive and route template of `@page "/admin/component1`. * In `Startup.Configure`, call for the area's request path immediately before the fallback root page path to the `_Host` page: @@ -383,38 +465,89 @@ Without specifying additional configuration for `CoolApp`, the sub-app in this s To provide configuration for the Blazor app's base path of `https://www.contoso.com/CoolApp/`, set the relative root path. -Blazor WebAssembly (`wwwroot/index.html`): +By configuring the relative URL path for an app, a component that isn't in the root directory can construct URLs relative to the app's root path. Components at different levels of the directory structure can build links to other resources at locations throughout the app. The app base path is also used to intercept selected hyperlinks where the `href` target of the link is within the app base path URI space. The Blazor router handles the internal navigation. -```html - -``` +In many hosting scenarios, the relative URL path to the app is the root of the app. In these default cases, the app's relative URL base path is the following: -**The trailing slash is required.** +* Blazor WebAssembly: `/` configured as `` in `wwwroot/index.html`. +* Blazor Server: `~/` configured as `` in `Pages/_Host.cshtml`. -In a Blazor Server app, use ***either*** of the following approaches: +In other hosting scenarios, such as GitHub Pages and IIS sub-apps, the app base path must be set to the server's relative URL path of the app. -* Option 1: Use the `` tag in `Pages/_Host.cshtml` to set the app's base path: +* Standalone Blazor WebAssembly: + + `wwwroot/index.html`: ```html ``` - + + **The trailing slash is required.** + +* Hosted Blazor WebAssembly: + + In the **`Client`** project, `wwwroot/index.html`: + + ```html + + ``` + **The trailing slash is required.** -* Option 2: Call in the app's request pipeline (`Program.cs`): + In the **`Server`** project, call in the app's request pipeline (`Startup.cs`): ```csharp app.UsePathBase("/CoolApp"); ``` -> [!NOTE] -> In typical configurations for Azure/IIS hosting, additional configuration usually isn't required. In some non-IIS hosting and reverse proxy hosting scenarios, additional Static File Middleware configuration might be required to serve static files correctly (for example, `app.UseStaticFiles("/CoolApp");`). The required configuration might require further configuration to serve the Blazor script (`_framework/blazor.server.js` or `_framework/blazor.webassembly.js`). For more information, see . -> -> For third-party host support, check the host provider's documentation and interact with developers on public support forums to implement the correct configuration. Common general support forums include: [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor), [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/), and [Blazor Gitter](https://gitter.im/aspnet/Blazor). *The preceding forums are not owned or controlled by Microsoft.* +* In a Blazor Server app, use ***either*** of the following approaches: + + * Option 1: Use the `` tag in `Pages/_Host.cshtml` to set the app's base path: -By providing the relative URL path, a component that isn't in the root directory can construct URLs relative to the app's root path. Components at different levels of the directory structure can build links to other resources at locations throughout the app. The app base path is also used to intercept selected hyperlinks where the `href` target of the link is within the app base path URI space. The Blazor router handles the internal navigation. + ```html + + ``` -In many hosting scenarios, the relative URL path to the app is the root of the app. In these cases, the app's relative URL base path is a forward slash (`` for Blazor WebAssembly or `` for Blazor Server), which is the default configuration for a Blazor app. In other hosting scenarios, such as GitHub Pages and IIS sub-apps, the app base path must be set to the server's relative URL path of the app. + **The trailing slash is required.** + + * Option 2: Call in the app's request pipeline (`Startup.cs`): + + ```csharp + app.UsePathBase("/CoolApp"); + ``` + + Calling is recommended when you also wish to run the Blazor Server app locally. For example, supply the launch URL in `Properties/launchSettings.json`: + + ```xml + "launchUrl": "https://localhost:{PORT}/CoolApp", + ``` + + The `{PORT}` placeholder in the preceding example is the port that matches the secure port in the `applicationUrl` configuration path. The following example shows the full launch profile for an app at port 7279: + + ```xml + "BlazorSample": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "applicationUrl": "https://localhost:7279;http://localhost:5279", + "launchUrl": "https://localhost:7279/CoolApp", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + ``` + +> [!NOTE] +> In typical configurations for Azure/IIS hosting, additional configuration usually isn't required. In some non-IIS hosting and reverse proxy hosting scenarios, additional Static File Middleware configuration might be required to serve static files correctly (for example, `app.UseStaticFiles("/CoolApp");`). The required configuration might require further configuration to serve the Blazor script (`_framework/blazor.server.js` or `_framework/blazor.webassembly.js`). For more information, see . +> +> For additional third-party host support: +> +> * and +> * +> * Consult the host provider's documentation. +> * Consult developers on non-Microsoft support forums: +> * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) +> * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) +> * [Blazor Gitter](https://gitter.im/aspnet/Blazor). For a Blazor WebAssembly app with a non-root relative URL path (for example, ``), the app fails to find its resources *when run locally*. To overcome this problem during local development and testing, you can supply a *path base* argument that matches the `href` value of the `` tag at runtime. **Don't include a trailing slash.** To pass the path base argument when running the app locally, execute the `dotnet run` command from the app's directory with the `--pathbase` option: @@ -434,13 +567,13 @@ The Blazor WebAssembly app responds locally at `http://localhost:port/CoolApp`. In scenarios where an app requires a separate area with custom resources and Razor components: -* Create a folder within the app's `Pages` folder to hold the resources. For example, an administator section of an app is created in a new folder named `Admin` (`Pages/Admin`). +* Create a folder within the app's `Pages` folder to hold the resources. For example, an administrator section of an app is created in a new folder named `Admin` (`Pages/Admin`). * Create a root page (`_Host.cshtml`) for the area. For example, create a `Pages/Admin/_Host.cshtml` file from the app's main root page (`Pages/_Host.cshtml`). Don't provide an `@page` directive in the Admin `_Host` page. * Add a layout to the area's folder (for example, `Pages/Admin/_Layout.razor`). In the layout for the separate area, set the `` tag `href` to match the area's folder (for example, ``). For demonstration purposes, add `~/` to the static resources in the page. For example: * `~/css/bootstrap/bootstrap.min.css` * `~/css/site.css` * `~/BlazorSample.styles.css` (the example app's namespace is `BlazorSample`) - * `~/_framework/blazor.server.js` for the Blazor script + * `~/_framework/blazor.server.js` (Blazor script) * If the area should have its own static asset folder, add the folder and specify its location to Static File Middleware in `Program.cs` (for example, `app.UseStaticFiles("/Admin/wwwroot")`). * Razor components are added to the area's folder. At a minimum, add an `Index` component to the area folder with the correct `@page` directive for the area. For example, add a `Pages/Admin/Index.razor` file based on the app's default `Pages/Index.razor` file. Indicate the Admin area as the route template at the top of the file (`@page "/admin"`). Add additional components as needed. For example, `Pages/Admin/Component1.razor` with an `@page` directive and route template of `@page "/admin/component1`. * In `Startup.Configure.cs`, call for the area's request path immediately before the fallback root page path to the `_Host` page: diff --git a/aspnetcore/blazor/host-and-deploy/server.md b/aspnetcore/blazor/host-and-deploy/server.md index f52b307d3ba9..1880578fcdf2 100644 --- a/aspnetcore/blazor/host-and-deploy/server.md +++ b/aspnetcore/blazor/host-and-deploy/server.md @@ -5,7 +5,7 @@ description: Learn how to host and deploy a Blazor Server app using ASP.NET Core monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 11/09/2021 +ms.date: 01/08/2022 no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] uid: blazor/host-and-deploy/server --- @@ -42,7 +42,7 @@ Blazor works best when using [WebSockets](xref:fundamentals/websockets) as the S Blazor Server emits a console warning if it detects Long Polling is utilized: -> Failed to connect via WebSockets, using the Long Polling fallback transport. This may be due to a VPN or proxy blocking the connection. To troubleshoot this, visit https://aka.ms/blazor-server-using-fallback-long-polling. +> Failed to connect via WebSockets, using the Long Polling fallback transport. This may be due to a VPN or proxy blocking the connection. ## Azure SignalR Service @@ -136,8 +136,8 @@ metadata: For SignalR WebSockets to function properly, confirm that the proxy's `Upgrade` and `Connection` headers are set to the following values and that `$connection_upgrade` is mapped to either: -* The Upgrade header value by default. -* `close` when the Upgrade header is missing or empty. +* The `Upgrade` header value by default. +* `close` when the `Upgrade` header is missing or empty. ``` http { @@ -149,13 +149,17 @@ http { server { listen 80; server_name example.com *.example.com + location / { proxy_pass http://localhost:5000; proxy_http_version 1.1; + proxy_cache off; + proxy_cache_bypass $http_upgrade; + proxy_buffering off; + proxy_read_timeout 100s; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; 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; } @@ -165,6 +169,7 @@ http { For more information, see the following articles: +* * [NGINX as a WebSocket Proxy](https://www.nginx.com/blog/websocket-nginx/) * [WebSocket proxying](http://nginx.org/docs/http/websocket.html) * @@ -337,8 +342,8 @@ metadata: For SignalR WebSockets to function properly, confirm that the proxy's `Upgrade` and `Connection` headers are set to the following values and that `$connection_upgrade` is mapped to either: -* The Upgrade header value by default. -* `close` when the Upgrade header is missing or empty. +* The `Upgrade` header value by default. +* `close` when the `Upgrade` header is missing or empty. ``` http { @@ -563,8 +568,8 @@ metadata: For SignalR WebSockets to function properly, confirm that the proxy's `Upgrade` and `Connection` headers are set to the following values and that `$connection_upgrade` is mapped to either: -* The Upgrade header value by default. -* `close` when the Upgrade header is missing or empty. +* The `Upgrade` header value by default. +* `close` when the `Upgrade` header is missing or empty. ``` http { diff --git a/aspnetcore/blazor/host-and-deploy/webassembly.md b/aspnetcore/blazor/host-and-deploy/webassembly.md index de10d44638aa..116d4ba95725 100644 --- a/aspnetcore/blazor/host-and-deploy/webassembly.md +++ b/aspnetcore/blazor/host-and-deploy/webassembly.md @@ -5,7 +5,7 @@ description: Learn how to host and deploy a Blazor app using ASP.NET Core, Conte monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 11/09/2021 +ms.date: 01/08/2022 no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] uid: blazor/host-and-deploy/webassembly --- @@ -202,7 +202,7 @@ For a hosted Blazor WebAssembly accessible at a sub-app path (for example, `/bla using Microsoft.AspNetCore.HttpOverrides; ``` - * Configure to forward the `X-Forwarded-For` and `X-Forwarded-Proto` headers, and call to add middleware that extracts the specified path base from request path and postpend it to the request path base: + * Configure to forward the `X-Forwarded-For` and `X-Forwarded-Proto` headers, and call to add middleware that extracts the specified path base from request path and adds it to the end of the request path base: ```csharp app.UseForwardedHeaders(new ForwardedHeadersOptions @@ -280,13 +280,13 @@ To configure the server to host the app at a sub-app path, the `{PATH}` placehol ``` server { ... - location /{PATH} { + location {PATH} { ... } } ``` -For an app that responds to requests at `/blazor`: +For an app that responds to requests at `/blazor`, the `{PATH}` placeholder is set to `/blazor`: ``` server { diff --git a/aspnetcore/signalr/scale.md b/aspnetcore/signalr/scale.md index e22d06cfd7e0..2956b5071165 100644 --- a/aspnetcore/signalr/scale.md +++ b/aspnetcore/signalr/scale.md @@ -111,7 +111,7 @@ http { map $http_connection $connection_upgrade { "~*Upgrade" $http_connection; default keep-alive; -} + } server { listen 80; From 2c1dbec2560290f2fd773abf8caec876d4db8174 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Sat, 8 Jan 2022 07:29:21 -0600 Subject: [PATCH 05/11] Updates --- aspnetcore/blazor/host-and-deploy/webassembly.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/host-and-deploy/webassembly.md b/aspnetcore/blazor/host-and-deploy/webassembly.md index 116d4ba95725..93362e044faf 100644 --- a/aspnetcore/blazor/host-and-deploy/webassembly.md +++ b/aspnetcore/blazor/host-and-deploy/webassembly.md @@ -263,7 +263,7 @@ server { listen 80; server_name example.com *.example.com; location / { - proxy_pass http://0.0.0.0:5000; + proxy_pass http://localhost:5000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection keep-alive; From 0d92e5e819f661ff3b9cd33920d461fd4100db38 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Sat, 8 Jan 2022 07:50:34 -0600 Subject: [PATCH 06/11] Updates --- aspnetcore/blazor/host-and-deploy/index.md | 69 +++++++++---------- aspnetcore/blazor/host-and-deploy/server.md | 28 ++++++-- .../blazor/host-and-deploy/webassembly.md | 20 +++++- 3 files changed, 73 insertions(+), 44 deletions(-) diff --git a/aspnetcore/blazor/host-and-deploy/index.md b/aspnetcore/blazor/host-and-deploy/index.md index 2a2edad12cc7..9d00ca3ebc83 100644 --- a/aspnetcore/blazor/host-and-deploy/index.md +++ b/aspnetcore/blazor/host-and-deploy/index.md @@ -144,18 +144,7 @@ In other hosting scenarios, such as GitHub Pages and IIS sub-apps, the app base } ``` -> [!NOTE] -> In typical configurations for Azure/IIS hosting, additional configuration usually isn't required. In some non-IIS hosting and reverse proxy hosting scenarios, additional Static File Middleware configuration might be required to serve static files correctly (for example, `app.UseStaticFiles("/CoolApp");`). The required configuration might require further configuration to serve the Blazor script (`_framework/blazor.server.js` or `_framework/blazor.webassembly.js`). For more information, see . -> -> For additional third-party host support: -> -> * and -> * -> * Consult the host provider's documentation. -> * Consult developers on non-Microsoft support forums: -> * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) -> * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) -> * [Blazor Gitter](https://gitter.im/aspnet/Blazor). +In typical configurations for Azure/IIS hosting, additional configuration usually isn't required. In some non-IIS hosting and reverse proxy hosting scenarios, additional Static File Middleware configuration might be required to serve static files correctly (for example, `app.UseStaticFiles("/CoolApp");`). The required configuration might require further configuration to serve the Blazor script (`_framework/blazor.server.js` or `_framework/blazor.webassembly.js`). For more information, see . For a Blazor WebAssembly app with a non-root relative URL path (for example, ``), the app fails to find its resources *when run locally*. To overcome this problem during local development and testing, you can supply a *path base* argument that matches the `href` value of the `` tag at runtime. **Don't include a trailing slash.** To pass the path base argument when running the app locally, execute the `dotnet run` command from the app's directory with the `--pathbase` option: @@ -171,6 +160,16 @@ dotnet run --pathbase=/CoolApp The Blazor WebAssembly app responds locally at `http://localhost:port/CoolApp`. +For additional third-party host support: + +* and +* +* Consult the host provider's documentation. +* Consult developers on non-Microsoft support forums: + * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) + * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) + * [Blazor Gitter](https://gitter.im/aspnet/Blazor) + ### Blazor Server `MapFallbackToPage` configuration In scenarios where an app requires a separate area with custom resources and Razor components: @@ -340,19 +339,6 @@ In other hosting scenarios, such as GitHub Pages and IIS sub-apps, the app base } ``` -> [!NOTE] -> In typical configurations for Azure/IIS hosting, additional configuration usually isn't required. In some non-IIS hosting and reverse proxy hosting scenarios, additional Static File Middleware configuration might be required to serve static files correctly (for example, `app.UseStaticFiles("/CoolApp");`). The required configuration might require further configuration to serve the Blazor script (`_framework/blazor.server.js` or `_framework/blazor.webassembly.js`). For more information, see . -> -> For additional third-party host support: -> -> * and -> * -> * Consult the host provider's documentation. -> * Consult developers on non-Microsoft support forums: -> * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) -> * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) -> * [Blazor Gitter](https://gitter.im/aspnet/Blazor). - For a Blazor WebAssembly app with a non-root relative URL path (for example, ``), the app fails to find its resources *when run locally*. To overcome this problem during local development and testing, you can supply a *path base* argument that matches the `href` value of the `` tag at runtime. **Don't include a trailing slash.** To pass the path base argument when running the app locally, execute the `dotnet run` command from the app's directory with the `--pathbase` option: ```dotnetcli @@ -367,6 +353,16 @@ dotnet run --pathbase=/CoolApp The Blazor WebAssembly app responds locally at `http://localhost:port/CoolApp`. +For additional third-party host support: + +* and +* +* Consult the host provider's documentation. +* Consult developers on non-Microsoft support forums: + * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) + * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) + * [Blazor Gitter](https://gitter.im/aspnet/Blazor) + ### Blazor Server `MapFallbackToPage` configuration In scenarios where an app requires a separate area with custom resources and Razor components: @@ -536,19 +532,6 @@ In other hosting scenarios, such as GitHub Pages and IIS sub-apps, the app base } ``` -> [!NOTE] -> In typical configurations for Azure/IIS hosting, additional configuration usually isn't required. In some non-IIS hosting and reverse proxy hosting scenarios, additional Static File Middleware configuration might be required to serve static files correctly (for example, `app.UseStaticFiles("/CoolApp");`). The required configuration might require further configuration to serve the Blazor script (`_framework/blazor.server.js` or `_framework/blazor.webassembly.js`). For more information, see . -> -> For additional third-party host support: -> -> * and -> * -> * Consult the host provider's documentation. -> * Consult developers on non-Microsoft support forums: -> * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) -> * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) -> * [Blazor Gitter](https://gitter.im/aspnet/Blazor). - For a Blazor WebAssembly app with a non-root relative URL path (for example, ``), the app fails to find its resources *when run locally*. To overcome this problem during local development and testing, you can supply a *path base* argument that matches the `href` value of the `` tag at runtime. **Don't include a trailing slash.** To pass the path base argument when running the app locally, execute the `dotnet run` command from the app's directory with the `--pathbase` option: ```dotnetcli @@ -563,6 +546,16 @@ dotnet run --pathbase=/CoolApp The Blazor WebAssembly app responds locally at `http://localhost:port/CoolApp`. +For additional third-party host support: + +* and +* +* Consult the host provider's documentation. +* Consult developers on non-Microsoft support forums: + * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) + * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) + * [Blazor Gitter](https://gitter.im/aspnet/Blazor) + ### Blazor Server `MapFallbackToPage` configuration In scenarios where an app requires a separate area with custom resources and Razor components: diff --git a/aspnetcore/blazor/host-and-deploy/server.md b/aspnetcore/blazor/host-and-deploy/server.md index 1880578fcdf2..3caac3a7828e 100644 --- a/aspnetcore/blazor/host-and-deploy/server.md +++ b/aspnetcore/blazor/host-and-deploy/server.md @@ -338,6 +338,14 @@ metadata: nginx.ingress.kubernetes.io/session-cookie-max-age: "14400" ``` +For additional Kubernetes host support, consult the following resources: + +* [Kubernetes documentation](https://kubernetes.io/docs/home/) +* Developers on non-Microsoft support forums: + * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) + * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) + * [Blazor Gitter](https://gitter.im/aspnet/Blazor) + ## Linux with Nginx For SignalR WebSockets to function properly, confirm that the proxy's `Upgrade` and `Connection` headers are set to the following values and that `$connection_upgrade` is mapped to either: @@ -369,11 +377,16 @@ http { } ``` -For more information, see the following articles: +For additional Nginx host support, consult the following resources: -* [NGINX as a WebSocket Proxy](https://www.nginx.com/blog/websocket-nginx/) -* [WebSocket proxying](http://nginx.org/docs/http/websocket.html) * +* Nginx documentation: + * [NGINX as a WebSocket Proxy](https://www.nginx.com/blog/websocket-nginx/) + * [WebSocket proxying](http://nginx.org/docs/http/websocket.html) +* Developers on non-Microsoft support forums: + * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) + * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) + * [Blazor Gitter](https://gitter.im/aspnet/Blazor) ## Linux with Apache @@ -408,7 +421,14 @@ Check the browser console for WebSockets errors. Example errors: * Error: Unable to connect to the server with any of the available transports. WebSockets failed * Error: Cannot send data if the connection is not in the 'Connected' State. -For more information, see the [Apache documentation](https://httpd.apache.org/docs/current/mod/mod_proxy.html). +For additional Apache host support, consult the following resources: + +* +* [Apache documentation](https://httpd.apache.org/docs/current/mod/mod_proxy.html) +* Developers on non-Microsoft support forums: + * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) + * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) + * [Blazor Gitter](https://gitter.im/aspnet/Blazor) ## Measure network latency diff --git a/aspnetcore/blazor/host-and-deploy/webassembly.md b/aspnetcore/blazor/host-and-deploy/webassembly.md index 93362e044faf..ea288aa0e916 100644 --- a/aspnetcore/blazor/host-and-deploy/webassembly.md +++ b/aspnetcore/blazor/host-and-deploy/webassembly.md @@ -297,7 +297,16 @@ server { } ``` -For more information, see . +For additional Nginx host support, consult the following resources: + +* +* Nginx documentation: + * [NGINX as a WebSocket Proxy](https://www.nginx.com/blog/websocket-nginx/) + * [WebSocket proxying](http://nginx.org/docs/http/websocket.html) +* Developers on non-Microsoft support forums: + * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) + * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) + * [Blazor Gitter](https://gitter.im/aspnet/Blazor) #### Apache @@ -364,7 +373,14 @@ For an app that responds to requests at `/blazor`: ``` -For more information, see . +For additional Apache host support, consult the following resources: + +* +* [Apache documentation](https://httpd.apache.org/docs/current/mod/mod_proxy.html) +* Developers on non-Microsoft support forums: + * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) + * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) + * [Blazor Gitter](https://gitter.im/aspnet/Blazor) ## Hosted deployment with multiple Blazor WebAssembly apps From fecc59e09ef481df2aafeb0817bb2b073b78afc7 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Mon, 10 Jan 2022 06:09:23 -0600 Subject: [PATCH 07/11] Updates --- aspnetcore/blazor/host-and-deploy/webassembly.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/aspnetcore/blazor/host-and-deploy/webassembly.md b/aspnetcore/blazor/host-and-deploy/webassembly.md index ea288aa0e916..9e86367eacf0 100644 --- a/aspnetcore/blazor/host-and-deploy/webassembly.md +++ b/aspnetcore/blazor/host-and-deploy/webassembly.md @@ -254,6 +254,12 @@ For a hosted Blazor WebAssembly accessible at a sub-app path (for example, `/bla * ❌ Incorrect: `var rsp = await client.GetFromJsonAsync("/api/Account");` * ✔️ Correct: `var rsp = await client.GetFromJsonAsync("api/Account");` +* In [Navigation Manager links](xref:blazor/fundamentals/routing#uri-and-navigation-state-helpers), do ***not*** prefix with a forward slash. Either avoid the use of a path segment separator or use dot-slash (`./`) relative path notation: + + * ❌ Incorrect: `NavigationManager.NavigateTo("/other");` + * ✔️ Correct: `NavigationManager.NavigateTo("other");` + * ✔️ Correct: `NavigationManager.NavigateTo("./other");` + #### Nginx The following example hosts the app at a root URL (no sub-app path): From dc34f2461c9e1069aa8c5e08b88283291ea7dbd5 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Mon, 10 Jan 2022 06:58:52 -0600 Subject: [PATCH 08/11] Updates --- .../blazor/host-and-deploy/webassembly.md | 66 ++++++++++--------- aspnetcore/host-and-deploy/linux-nginx.md | 8 +-- 2 files changed, 40 insertions(+), 34 deletions(-) diff --git a/aspnetcore/blazor/host-and-deploy/webassembly.md b/aspnetcore/blazor/host-and-deploy/webassembly.md index 9e86367eacf0..a4ecebaf5e31 100644 --- a/aspnetcore/blazor/host-and-deploy/webassembly.md +++ b/aspnetcore/blazor/host-and-deploy/webassembly.md @@ -265,18 +265,20 @@ For a hosted Blazor WebAssembly accessible at a sub-app path (for example, `/bla The following example hosts the app at a root URL (no sub-app path): ``` -server { - listen 80; - server_name example.com *.example.com; - location / { - proxy_pass http://localhost:5000; - 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; +http { + server { + listen 80; + server_name example.com *.example.com; + location / { + proxy_pass http://localhost:5000; + 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; + } } } ``` @@ -284,10 +286,12 @@ server { To configure the server to host the app at a sub-app path, the `{PATH}` placeholder in the following `location` entry is the sub-app path: ``` -server { - ... - location {PATH} { +http { + server { ... + location {PATH} { + ... + } } } ``` @@ -295,10 +299,12 @@ server { For an app that responds to requests at `/blazor`, the `{PATH}` placeholder is set to `/blazor`: ``` -server { - ... - location /blazor { +http { + server { ... + location /blazor { + ... + } } } ``` @@ -326,10 +332,10 @@ The following example hosts the app at a root URL (no sub-app path): ProxyRequests On ProxyPreserveHost On - ProxyPass / http://0.0.0.0:5000/ - ProxyPassReverse / http://0.0.0.0:5000/ - ProxyPassMatch ^/_blazor/(.*) http://0.0.0.0:5000/_blazor/$1 - ProxyPass /_blazor ws://0.0.0.0:5000/_blazor + ProxyPass / http://localhost:5000/ + ProxyPassReverse / http://localhost:5000/ + ProxyPassMatch ^/_blazor/(.*) http://localhost:5000/_blazor/$1 + ProxyPass /_blazor ws://localhost:5000/_blazor ServerName www.example.com ServerAlias *.example.com ErrorLog ${APACHE_LOG_DIR}helloapp-error.log @@ -347,10 +353,10 @@ To configure the server to host the app at a sub-app path, the `{PATH}` placehol ProxyRequests On ProxyPreserveHost On - ProxyPass / http://0.0.0.0:5000/{PATH} - ProxyPassReverse / http://0.0.0.0:5000/{PATH} - ProxyPassMatch ^/_blazor/(.*) http://0.0.0.0:5000/{PATH}/_blazor/$1 - ProxyPass /_blazor ws://0.0.0.0:5000/{PATH}/_blazor + ProxyPass / http://localhost:5000/{PATH} + ProxyPassReverse / http://localhost:5000/{PATH} + ProxyPassMatch ^/_blazor/(.*) http://localhost:5000/{PATH}/_blazor/$1 + ProxyPass /_blazor ws://localhost:5000/{PATH}/_blazor ServerName www.example.com ServerAlias *.example.com ErrorLog ${APACHE_LOG_DIR}helloapp-error.log @@ -368,10 +374,10 @@ For an app that responds to requests at `/blazor`: ProxyRequests On ProxyPreserveHost On - ProxyPass / http://0.0.0.0:5000/blazor - ProxyPassReverse / http://0.0.0.0:5000/blazor - ProxyPassMatch ^/_blazor/(.*) http://0.0.0.0:5000/blazor/_blazor/$1 - ProxyPass /_blazor ws://0.0.0.0:5000/blazor/_blazor + ProxyPass / http://localhost:5000/blazor + ProxyPassReverse / http://localhost:5000/blazor + ProxyPassMatch ^/_blazor/(.*) http://localhost:5000/blazor/_blazor/$1 + ProxyPass /_blazor ws://localhost:5000/blazor/_blazor ServerName www.example.com ServerAlias *.example.com ErrorLog ${APACHE_LOG_DIR}helloapp-error.log diff --git a/aspnetcore/host-and-deploy/linux-nginx.md b/aspnetcore/host-and-deploy/linux-nginx.md index 8a12fb103eb2..62b209844861 100644 --- a/aspnetcore/host-and-deploy/linux-nginx.md +++ b/aspnetcore/host-and-deploy/linux-nginx.md @@ -128,7 +128,7 @@ Verify a browser displays the default landing page for Nginx. The landing page i To configure Nginx as a reverse proxy to forward HTTP requests to your ASP.NET Core app, modify `/etc/nginx/sites-available/default`. Open it in a text editor, and replace the contents with the following snippet: -```nginx +``` server { listen 80; server_name example.com *.example.com; @@ -149,7 +149,7 @@ If the app is a SignalR or Blazor Server app, see Date: Mon, 10 Jan 2022 12:28:17 -0600 Subject: [PATCH 09/11] Updates --- aspnetcore/blazor/host-and-deploy/server.md | 36 ++---------- .../blazor/host-and-deploy/webassembly.md | 58 +++++-------------- 2 files changed, 19 insertions(+), 75 deletions(-) diff --git a/aspnetcore/blazor/host-and-deploy/server.md b/aspnetcore/blazor/host-and-deploy/server.md index 3caac3a7828e..114e046be789 100644 --- a/aspnetcore/blazor/host-and-deploy/server.md +++ b/aspnetcore/blazor/host-and-deploy/server.md @@ -134,45 +134,17 @@ metadata: ## Linux with Nginx -For SignalR WebSockets to function properly, confirm that the proxy's `Upgrade` and `Connection` headers are set to the following values and that `$connection_upgrade` is mapped to either: - -* The `Upgrade` header value by default. -* `close` when the `Upgrade` header is missing or empty. - -``` -http { - map $http_upgrade $connection_upgrade { - default Upgrade; - '' close; - } - - server { - listen 80; - server_name example.com *.example.com +Follow the guidance for an [ASP.NET Core SignalR app](xref:signalr/scale#linux-with-nginx) with the following changes: - location / { - proxy_pass http://localhost:5000; - proxy_http_version 1.1; - proxy_cache off; - proxy_cache_bypass $http_upgrade; - proxy_buffering off; - proxy_read_timeout 100s; - proxy_set_header Upgrade $http_upgrade; - proxy_set_header Connection $connection_upgrade; - proxy_set_header Host $host; - proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; - proxy_set_header X-Forwarded-Proto $scheme; - } - } -} -``` +* Change the `location` path from `/hubroute` (`location /hubroute { ... }`) to the root path `/` (`location / { ... }`). +* Remove the configuration for proxy buffering (`proxy_buffering off;`) because the setting only applies to Server-Sent Events (SSE), which aren't relevant for Blazor apps. For more information, see the following articles: * +* * [NGINX as a WebSocket Proxy](https://www.nginx.com/blog/websocket-nginx/) * [WebSocket proxying](http://nginx.org/docs/http/websocket.html) -* ## Linux with Apache diff --git a/aspnetcore/blazor/host-and-deploy/webassembly.md b/aspnetcore/blazor/host-and-deploy/webassembly.md index a4ecebaf5e31..3e83bf4f978b 100644 --- a/aspnetcore/blazor/host-and-deploy/webassembly.md +++ b/aspnetcore/blazor/host-and-deploy/webassembly.md @@ -262,55 +262,27 @@ For a hosted Blazor WebAssembly accessible at a sub-app path (for example, `/bla #### Nginx -The following example hosts the app at a root URL (no sub-app path): - -``` -http { - server { - listen 80; - server_name example.com *.example.com; - location / { - proxy_pass http://localhost:5000; - 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; - } - } -} -``` +Follow the guidance for an [ASP.NET Core SignalR app](xref:signalr/scale#linux-with-nginx) with the following changes: -To configure the server to host the app at a sub-app path, the `{PATH}` placeholder in the following `location` entry is the sub-app path: - -``` -http { - server { - ... - location {PATH} { - ... - } - } -} -``` +* Remove the configuration for proxy buffering (`proxy_buffering off;`) because the setting only applies to Server-Sent Events (SSE), which aren't relevant for Blazor apps. +* 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. -For an app that responds to requests at `/blazor`, the `{PATH}` placeholder is set to `/blazor`: + For an app that responds to requests at `/blazor`, the `{PATH}` placeholder is set to `/blazor`: -``` -http { - server { - ... - location /blazor { - ... - } - } -} -``` + ``` + http { + server { + ... + location /blazor { + ... + } + } + } + ``` For additional Nginx host support, consult the following resources: +* * * Nginx documentation: * [NGINX as a WebSocket Proxy](https://www.nginx.com/blog/websocket-nginx/) From b4fb5bfc823cb481150eb9e92bf262e74ef2c685 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Thu, 13 Jan 2022 09:27:02 -0600 Subject: [PATCH 10/11] Updates --- aspnetcore/blazor/host-and-deploy/index.md | 33 +- aspnetcore/blazor/host-and-deploy/server.md | 23 +- .../blazor/host-and-deploy/webassembly.md | 333 +++++++----------- 3 files changed, 170 insertions(+), 219 deletions(-) diff --git a/aspnetcore/blazor/host-and-deploy/index.md b/aspnetcore/blazor/host-and-deploy/index.md index 9d00ca3ebc83..a5bf4dcdc3fc 100644 --- a/aspnetcore/blazor/host-and-deploy/index.md +++ b/aspnetcore/blazor/host-and-deploy/index.md @@ -5,7 +5,7 @@ description: Discover how to host and deploy Blazor apps. monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 01/08/2022 +ms.date: 01/13/2022 no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] uid: blazor/host-and-deploy/index --- @@ -144,6 +144,23 @@ In other hosting scenarios, such as GitHub Pages and IIS sub-apps, the app base } ``` +Do ***not*** prefix links throughout the app with a forward slash. Either avoid the use of a path segment separator or use dot-slash (`./`) relative path notation: + +* ❌ Incorrect: `` +* ✔️ Correct: `` +* ✔️ Correct: `` + +In [Blazor WebAssembly web API requests with the `HttpClient` service](xref:blazor/call-web-api?pivots=webassembly), confirm that JSON helpers () do ***not*** prefix URLs with a forward slash (`/`): + +* ❌ Incorrect: `var rsp = await client.GetFromJsonAsync("/api/Account");` +* ✔️ Correct: `var rsp = await client.GetFromJsonAsync("api/Account");` + +Do ***not*** prefix [Navigation Manager](xref:blazor/fundamentals/routing#uri-and-navigation-state-helpers) relative links with a forward slash. Either avoid the use of a path segment separator or use dot-slash (`./`) relative path notation: + +* ❌ Incorrect: `NavigationManager.NavigateTo("/other");` +* ✔️ Correct: `NavigationManager.NavigateTo("other");` +* ✔️ Correct: `NavigationManager.NavigateTo("./other");` + In typical configurations for Azure/IIS hosting, additional configuration usually isn't required. In some non-IIS hosting and reverse proxy hosting scenarios, additional Static File Middleware configuration might be required to serve static files correctly (for example, `app.UseStaticFiles("/CoolApp");`). The required configuration might require further configuration to serve the Blazor script (`_framework/blazor.server.js` or `_framework/blazor.webassembly.js`). For more information, see . For a Blazor WebAssembly app with a non-root relative URL path (for example, ``), the app fails to find its resources *when run locally*. To overcome this problem during local development and testing, you can supply a *path base* argument that matches the `href` value of the `` tag at runtime. **Don't include a trailing slash.** To pass the path base argument when running the app locally, execute the `dotnet run` command from the app's directory with the `--pathbase` option: @@ -160,17 +177,7 @@ dotnet run --pathbase=/CoolApp The Blazor WebAssembly app responds locally at `http://localhost:port/CoolApp`. -For additional third-party host support: - -* and -* -* Consult the host provider's documentation. -* Consult developers on non-Microsoft support forums: - * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) - * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) - * [Blazor Gitter](https://gitter.im/aspnet/Blazor) - -### Blazor Server `MapFallbackToPage` configuration +## Blazor Server `MapFallbackToPage` configuration In scenarios where an app requires a separate area with custom resources and Razor components: @@ -196,7 +203,7 @@ In scenarios where an app requires a separate area with custom resources and Raz app.Run(); ``` -### Host multiple Blazor WebAssembly apps +## Host multiple Blazor WebAssembly apps For more information on hosting multiple Blazor WebAssembly apps in a hosted Blazor solution, see . diff --git a/aspnetcore/blazor/host-and-deploy/server.md b/aspnetcore/blazor/host-and-deploy/server.md index 114e046be789..96fb34c589fc 100644 --- a/aspnetcore/blazor/host-and-deploy/server.md +++ b/aspnetcore/blazor/host-and-deploy/server.md @@ -5,7 +5,7 @@ description: Learn how to host and deploy a Blazor Server app using ASP.NET Core monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 01/08/2022 +ms.date: 01/13/2022 no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] uid: blazor/host-and-deploy/server --- @@ -137,14 +137,19 @@ metadata: Follow the guidance for an [ASP.NET Core SignalR app](xref:signalr/scale#linux-with-nginx) with the following changes: * Change the `location` path from `/hubroute` (`location /hubroute { ... }`) to the root path `/` (`location / { ... }`). -* Remove the configuration for proxy buffering (`proxy_buffering off;`) because the setting only applies to Server-Sent Events (SSE), which aren't relevant for Blazor apps. +* Remove the configuration for proxy buffering (`proxy_buffering off;`) because the setting only applies to [Server-Sent Events (SSE)](https://developer.mozilla.org/docs/Web/API/Server-sent_events), which aren't relevant to Blazor app client-server interactions. -For more information, see the following articles: +For more information and configuration guidance, consult the following resources: * * +* * [NGINX as a WebSocket Proxy](https://www.nginx.com/blog/websocket-nginx/) * [WebSocket proxying](http://nginx.org/docs/http/websocket.html) +* Consult developers on non-Microsoft support forums: + * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) + * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) + * [Blazor Gitter](https://gitter.im/aspnet/Blazor) ## Linux with Apache @@ -173,13 +178,21 @@ a2enmod proxy_wstunnel Check the browser console for WebSockets errors. Example errors: -* Firefox can't establish a connection to the server at ws://the-domain-name.tld/_blazor?id=XXX. +* Firefox can't establish a connection to the server at :::no-loc text="ws://the-domain-name.tld/_blazor?id=XXX"::: * Error: Failed to start the transport 'WebSockets': Error: There was an error with the transport. * Error: Failed to start the transport 'LongPolling': TypeError: this.transport is undefined * Error: Unable to connect to the server with any of the available transports. WebSockets failed * Error: Cannot send data if the connection is not in the 'Connected' State. -For more information, see the [Apache documentation](https://httpd.apache.org/docs/current/mod/mod_proxy.html). +For more information and configuration guidance, consult the following resources: + +* +* +* [Apache documentation](https://httpd.apache.org/docs/current/mod/mod_proxy.html) +* Consult developers on non-Microsoft support forums: + * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) + * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) + * [Blazor Gitter](https://gitter.im/aspnet/Blazor) ## Measure network latency diff --git a/aspnetcore/blazor/host-and-deploy/webassembly.md b/aspnetcore/blazor/host-and-deploy/webassembly.md index 3e83bf4f978b..6cddd1dafc36 100644 --- a/aspnetcore/blazor/host-and-deploy/webassembly.md +++ b/aspnetcore/blazor/host-and-deploy/webassembly.md @@ -5,7 +5,7 @@ description: Learn how to host and deploy a Blazor app using ASP.NET Core, Conte monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 01/08/2022 +ms.date: 01/13/2022 no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] uid: blazor/host-and-deploy/webassembly --- @@ -166,206 +166,6 @@ For more information, see the following articles: * Deployment to Azure App Service: * Blazor project templates: -## Hosted deployment on Linux - -### Apps accessible at the root URL - -For a hosted Blazor WebAssembly app accessible via requests at the root URL (`/`), update `Program.cs` of the **`Server`** project: - -* Add a `using` statement to the top of the file for the namespace: - - ```csharp - using Microsoft.AspNetCore.HttpOverrides; - ``` - -* Configure to forward the `X-Forwarded-For` and `X-Forwarded-Proto` headers: - - ```csharp - app.UseForwardedHeaders(new ForwardedHeadersOptions - { - ForwardedHeaders = - ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto - }); - ``` - -For more information, see . - -### Apps accessible at a sub-app path - -For a hosted Blazor WebAssembly accessible at a sub-app path (for example, `/blazor`): - -* In `Program.cs` of the **`Server`** project: - - * Add a `using` statement to the top of the file for the namespace: - - ```csharp - using Microsoft.AspNetCore.HttpOverrides; - ``` - - * Configure to forward the `X-Forwarded-For` and `X-Forwarded-Proto` headers, and call to add middleware that extracts the specified path base from request path and adds it to the end of the request path base: - - ```csharp - app.UseForwardedHeaders(new ForwardedHeadersOptions - { - ForwardedHeaders = - ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto - }); - - app.UsePathBase("{PATH}"); - ``` - - In the preceding example, the `{PATH}` placeholder is the sub-app path. In the following example, the app's sub-app path is `/blazor`: - - ```csharp - app.UseForwardedHeaders(new ForwardedHeadersOptions - { - ForwardedHeaders = - ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto - }); - - app.UsePathBase("/blazor"); - ``` - - For more information, see the following resources: - - * - * - -* In `wwwroot/index.html` of the **`Client`** project, set the [app base path](xref:blazor/host-and-deploy/index#app-base-path) to the app's sub-app path. **A trailing slash is required.** Replace the `{PATH}` placeholder with the sub-app path in the following markup: - - ```html - - ``` - - For an app that loads requests at `/blazor`, the `href` attribute is set to a value of `/blazor/`. Note that the trailing slash in the following example is required: - - ```html - - ``` - -* In links throughout the app, do ***not*** prefix with a forward slash. Either avoid the use of a path segment separator or use dot-slash (`./`) relative path notation: - - * ❌ Incorrect: `` - * ✔️ Correct: `` - * ✔️ Correct: `` - -* In [web API requests with the `HttpClient` service](xref:blazor/call-web-api?pivots=webassembly), confirm that JSON helpers () do ***not*** prefix URLs with a forward slash (`/`): - - * ❌ Incorrect: `var rsp = await client.GetFromJsonAsync("/api/Account");` - * ✔️ Correct: `var rsp = await client.GetFromJsonAsync("api/Account");` - -* In [Navigation Manager links](xref:blazor/fundamentals/routing#uri-and-navigation-state-helpers), do ***not*** prefix with a forward slash. Either avoid the use of a path segment separator or use dot-slash (`./`) relative path notation: - - * ❌ Incorrect: `NavigationManager.NavigateTo("/other");` - * ✔️ Correct: `NavigationManager.NavigateTo("other");` - * ✔️ Correct: `NavigationManager.NavigateTo("./other");` - -#### Nginx - -Follow the guidance for an [ASP.NET Core SignalR app](xref:signalr/scale#linux-with-nginx) 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 for Blazor apps. -* 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. - - For an app that responds to requests at `/blazor`, the `{PATH}` placeholder is set to `/blazor`: - - ``` - http { - server { - ... - location /blazor { - ... - } - } - } - ``` - -For additional Nginx host support, consult the following resources: - -* -* -* Nginx documentation: - * [NGINX as a WebSocket Proxy](https://www.nginx.com/blog/websocket-nginx/) - * [WebSocket proxying](http://nginx.org/docs/http/websocket.html) -* Developers on non-Microsoft support forums: - * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) - * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) - * [Blazor Gitter](https://gitter.im/aspnet/Blazor) - -#### Apache - -The following example hosts the app at a root URL (no sub-app path): - -``` - - RequestHeader set "X-Forwarded-Proto" expr=%{REQUEST_SCHEME} - - - - ProxyRequests On - ProxyPreserveHost On - ProxyPass / http://localhost:5000/ - ProxyPassReverse / http://localhost:5000/ - ProxyPassMatch ^/_blazor/(.*) http://localhost:5000/_blazor/$1 - ProxyPass /_blazor ws://localhost:5000/_blazor - ServerName www.example.com - ServerAlias *.example.com - ErrorLog ${APACHE_LOG_DIR}helloapp-error.log - CustomLog ${APACHE_LOG_DIR}helloapp-access.log common - -``` - -To configure the server to host the app at a sub-app path, the `{PATH}` placeholder in the following entires is the sub-app path: - -``` - - RequestHeader set "X-Forwarded-Proto" expr=%{REQUEST_SCHEME} - - - - ProxyRequests On - ProxyPreserveHost On - ProxyPass / http://localhost:5000/{PATH} - ProxyPassReverse / http://localhost:5000/{PATH} - ProxyPassMatch ^/_blazor/(.*) http://localhost:5000/{PATH}/_blazor/$1 - ProxyPass /_blazor ws://localhost:5000/{PATH}/_blazor - ServerName www.example.com - ServerAlias *.example.com - ErrorLog ${APACHE_LOG_DIR}helloapp-error.log - CustomLog ${APACHE_LOG_DIR}helloapp-access.log common - -``` - -For an app that responds to requests at `/blazor`: - -``` - - RequestHeader set "X-Forwarded-Proto" expr=%{REQUEST_SCHEME} - - - - ProxyRequests On - ProxyPreserveHost On - ProxyPass / http://localhost:5000/blazor - ProxyPassReverse / http://localhost:5000/blazor - ProxyPassMatch ^/_blazor/(.*) http://localhost:5000/blazor/_blazor/$1 - ProxyPass /_blazor ws://localhost:5000/blazor/_blazor - ServerName www.example.com - ServerAlias *.example.com - ErrorLog ${APACHE_LOG_DIR}helloapp-error.log - CustomLog ${APACHE_LOG_DIR}helloapp-access.log common - -``` - -For additional Apache host support, consult the following resources: - -* -* [Apache documentation](https://httpd.apache.org/docs/current/mod/mod_proxy.html) -* Developers on non-Microsoft support forums: - * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) - * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) - * [Blazor Gitter](https://gitter.im/aspnet/Blazor) - ## Hosted deployment with multiple Blazor WebAssembly apps ### App configuration @@ -862,6 +662,137 @@ The `--urls` argument sets the IP addresses or host addresses with ports and pro --urls=http://127.0.0.1:0 ``` +## Hosted deployment on Linux (Nginx) + +Configure the app with to forward the `X-Forwarded-For` and `X-Forwarded-Proto` headers by following the guidance in . + +For more information on setting the app's base path, including sub-app path configuration, see . + +Follow the guidance for an [ASP.NET Core SignalR app](xref:signalr/scale#linux-with-nginx) 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 for Blazor apps. +* 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 { + ... + } + } + } + ``` + +For more information and configuration guidance, consult the following resources: + +* +* +* Nginx documentation: + * [NGINX as a WebSocket Proxy](https://www.nginx.com/blog/websocket-nginx/) + * [WebSocket proxying](http://nginx.org/docs/http/websocket.html) +* Developers on non-Microsoft support forums: + * [Stack Overflow (tag: `blazor`)](https://stackoverflow.com/questions/tagged/blazor) + * [ASP.NET Core Slack Team](http://tattoocoder.com/aspnet-slack-sign-up/) + * [Blazor Gitter](https://gitter.im/aspnet/Blazor) + + + ## Configure the Trimmer Blazor performs Intermediate Language (IL) trimming on each Release build to remove unnecessary IL from the output assemblies. For more information, see . From b232ff4920b784cc4af20377c2b12bbe7bf33e15 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Thu, 13 Jan 2022 10:01:20 -0600 Subject: [PATCH 11/11] Updates --- .../blazor/host-and-deploy/webassembly.md | 3 +-- aspnetcore/toc.yml | 20 +++++++++---------- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/aspnetcore/blazor/host-and-deploy/webassembly.md b/aspnetcore/blazor/host-and-deploy/webassembly.md index 6cddd1dafc36..ebdf9c68258e 100644 --- a/aspnetcore/blazor/host-and-deploy/webassembly.md +++ b/aspnetcore/blazor/host-and-deploy/webassembly.md @@ -670,7 +670,7 @@ For more information on setting the app's base path, including sub-app path conf Follow the guidance for an [ASP.NET Core SignalR app](xref:signalr/scale#linux-with-nginx) 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 for Blazor apps. +* Remove the configuration for proxy buffering (`proxy_buffering off;`) because the setting only applies to [Server-Sent Events (SSE)](https://developer.mozilla.org/docs/Web/API/Server-sent_events), 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 `/`: @@ -701,7 +701,6 @@ Follow the guidance for an [ASP.NET Core SignalR app](xref:signalr/scale#linux-w For more information and configuration guidance, consult the following resources: -* * * Nginx documentation: * [NGINX as a WebSocket Proxy](https://www.nginx.com/blog/websocket-nginx/) diff --git a/aspnetcore/toc.yml b/aspnetcore/toc.yml index 949e324ba936..c11e4cdb6dfb 100644 --- a/aspnetcore/toc.yml +++ b/aspnetcore/toc.yml @@ -408,6 +408,14 @@ items: items: - name: Overview uid: blazor/security/index + - name: Blazor Server + items: + - name: Overview + uid: blazor/security/server/index + - name: Threat mitigation + uid: blazor/security/server/threat-mitigation + - name: Additional scenarios + uid: blazor/security/server/additional-scenarios - name: Blazor WebAssembly items: - name: Overview @@ -430,14 +438,6 @@ items: uid: blazor/security/webassembly/additional-scenarios - name: Graph API uid: blazor/security/webassembly/graph-api - - name: Blazor Server - items: - - name: Overview - uid: blazor/security/server/index - - name: Threat mitigation - uid: blazor/security/server/threat-mitigation - - name: Additional scenarios - uid: blazor/security/server/additional-scenarios - name: Content Security Policy uid: blazor/security/content-security-policy - name: State management @@ -458,10 +458,10 @@ items: items: - name: Overview uid: blazor/host-and-deploy/index - - name: Blazor WebAssembly - uid: blazor/host-and-deploy/webassembly - name: Blazor Server uid: blazor/host-and-deploy/server + - name: Blazor WebAssembly + uid: blazor/host-and-deploy/webassembly - name: Configure the Linker uid: blazor/host-and-deploy/configure-linker - name: Configure the Trimmer