Размещение и развертывание ASP.NET Core Blazor

В этой статье объясняется, как размещать и развертывать Blazor приложения.

Публикация приложения

Приложения публикуются для развертывания в конфигурации выпуска.

Visual Studio

1. Выберите команду "Опубликовать {APPLICATION}" в меню "Сборка", где {APPLICATION} заполнитель имени приложения.
2. Выберите целевой объект публикации. Чтобы опубликовать объект в локальной среде, выберите папку.
3. Оставьте расположение по умолчанию в поле выбора папки или укажите другое расположение. Выберите кнопку Publish.

Интерфейс командной строки.NET

Используйте команду dotnet publish, чтобы опубликовать приложение с конфигурацией выпуска.

dotnet publish -c Release

Публикация приложения активирует восстановление зависимостей проекта и выполняет сборку проекта, прежде чем создавать ресурсы для развертывания. В ходе процесса построения удаляются неиспользуемые методы и сборки, чтобы уменьшить размер скачиваемого приложения и время загрузки.

Расположения публикации.

• Blazor Web App: приложение публикуется в папке /bin/Release/{TARGET FRAMEWORK}/publish . Разверните содержимое папки publish на узле.
• Blazor WebAssembly: приложение публикуется в папке bin\Release\net8.0\browser-wasm\publish\ . Чтобы развернуть приложение как статический сайт, скопируйте содержимое папки wwwroot на узел статического сайта.

В {TARGET FRAMEWORK} предыдущих путях используется целевая платформа (например, net8.0).

IIS

Сведения о размещении Blazor приложения в IIS см. в следующих ресурсах:

• Размещение IIS
  • Публикация приложения ASP.NET Core в IIS
  • Размещение ASP.NET Core в Windows со службами IIS
• Размещение и развертывание приложений на стороне Blazor сервера ASP.NET: серверные приложения, работающие в СЛУЖБАх IIS, включая СЛУЖБЫ IIS с azure Виртуальные машины (виртуальными машинами) под управлением ОС Windows и службы приложение Azure.
• Узел и развертывание ASP.NET CoreBlazor WebAssembly: включает дополнительные рекомендации для Blazor WebAssembly приложений, размещенных в СЛУЖБАх IIS, включая размещение статических сайтов, пользовательские web.config файлы, перезапись URL-адресов, вложенные приложения, сжатие и служба хранилища Azure размещение статических файлов.
• Размещение вложенных приложений IIS
  • Следуйте инструкциям в разделе "Базовый путь приложения" для Blazor приложения перед публикацией приложения. В примерах используется базовый путь приложения и показано, как получить базовый путь /CoolApp из параметров приложения или других поставщиков конфигурации.
  • Следуйте инструкциям по настройке вложенных приложений в расширенной конфигурации. Путь к папке дочернего приложения под корневым сайтом становится виртуальным путем вложенного приложения. Для базового пути /CoolAppBlazor приложения приложение помещается в папку с именем CoolApp корневого сайта, а вложенное приложение принимает виртуальный путь/CoolApp.

Совместное использование пула приложений среди приложений ASP.NET Core не поддерживается, включая приложения Blazor. Используйте один пул приложений для каждого приложения при размещении с IIS и избегайте использования виртуальных каталогов IIS для размещения нескольких приложений.

Базовый путь приложения

Базовый путь приложения  — это корневой URL-путь приложения. Для успешной маршрутизации в Blazor приложениях требуется конфигурация платформы для любого корневого URL-адреса, который не используется по базовому пути /по умолчанию.

Рассмотрим следующее приложение ASP.NET Core и подприложение Blazor:

• Приложение ASP.NET Core называется MyApp:
  • Физическое расположение приложения: d:/MyApp.
  • запросы принимаются по адресу: https://www.contoso.com/{MYAPP RESOURCE}.
• Имя Blazor CoolApp приложения — это вложенное приложение MyApp:
  • Физическое расположение дочернего приложения: d:/MyApp/CoolApp.
  • запросы принимаются по адресу: https://www.contoso.com/CoolApp/{COOLAPP RESOURCE}.

Если для CoolApp не указана дополнительная конфигурация, дочернее приложение в этом сценарии не имеет сведений о своем местоположении на сервере. Например, приложение не может создавать правильные относительные URL-адреса к своим ресурсам, если ему неизвестно, что оно находится по относительному пути URL /CoolApp/. Это также применяется в различных сценариях размещения и использования обратного прокси-сервера, когда приложение не размещается по корневому пути URL.

Общие сведения

Назначениеhref тега привязки () можно создать с двумя конечными точками:

• Абсолютные расположения, включающие схему (по умолчанию для схемы страницы, если она опущена), узел, порт и путь или просто косая черта (/) и путь (), за которым следует путь.

  Примеры: https://example.com/a/b/c или /a/b/c

• Относительные расположения, содержащие только путь и не начинающиеся с косой черты (/). Они разрешаются относительно текущего URL-адреса документа или <base> значения тега, если указано.

  Пример: a/b/c

Наличие косой черты (/) в настроенном базовом пути приложения имеет важное значение для вычисления базового пути для URL-адресов приложения. Например, https://example.com/a имеет базовый путь https://example.com/, а https://example.com/a/ с косой чертой имеет базовый путь https://example.com/a.

Существует три источника ссылок, относящихся к Blazor приложениям ASP.NET Core:

• URL-адреса в Razor компонентах (.razor) обычно относительны.
• URL-адреса в сценариях, таких как Blazor скрипты (blazor.*.js), относятся к документу.

Если вы отрисовываете Blazor приложение из разных документов (например, /Admin/B/C/ и /Admin/D/E/), необходимо учитывать базовый путь приложения или базовый путь отличается, когда приложение отрисовывается в каждом документе и ресурсы извлекаются из неправильных URL-адресов.

Существует два подхода к решению проблемы правильного разрешения относительных связей:

• Динамически сопоставляйте ресурсы с помощью документа, на который они были отрисованы в качестве корневого элемента.
• Задайте согласованный базовый путь для документа и сопоставите ресурсы с этим базовым путем.

Первый вариант является более сложным и не является наиболее типичным подходом, так как он делает навигацию разными для каждого документа. Рассмотрим следующий пример для отрисовки страницы /Something/Else:

• Отрисовка в разделе /Admin/B/C/страницы отрисовывается с помощью пути /Admin/B/C/Something/Else.
• Отрисовка в разделе /Admin/D/E/страницы отрисовывается по тому же пути/Admin/B/C/Something/Else.

При первом подходе предложения IDynamicEndpointMetadata маршрутизации и MatcherPolicy, которые в сочетании могут быть основой для реализации полностью динамического решения, определяющего во время выполнения о том, как маршрутизовываются запросы.

Для второго варианта, который является обычным подходом, приложение задает базовый путь в документе и сопоставляет конечные точки сервера с путями под базой. В следующем руководстве используется этот подход.

Серверная сторона Blazor

Сопоставить SignalR концентратор приложения на стороне Blazor сервера, передав путь к MapBlazorHub файлу Program :

app.MapBlazorHub("base/path");

Преимущество использования MapBlazorHub заключается в том, что вы можете сопоставить шаблоны, такие как "{tenant}" , а не только конкретные пути.

Вы также можете сопоставить SignalR концентратор, если приложение находится в виртуальной папке с конвейером ветвленного по промежуточного слоя. В следующем примере запросы для /base/path/ обработки обрабатываются концентраторомBlazorSignalR:

app.Map("/base/path/", subapp => {
    subapp.UsePathBase("/base/path/");
    subapp.UseRouting();
    subapp.UseEndpoints(endpoints => endpoints.MapBlazorHub());
});

<base> Настройте тег в соответствии с инструкциями в разделе "Настройка базового пути приложения".

Автономный Blazor WebAssembly

В автономном Blazor WebAssembly приложении настроен только <base> тег в соответствии с инструкциями в разделе "Настройка базового пути приложения".

Настройка базового пути приложения

Чтобы предоставить конфигурацию базового Blazor пути https://www.contoso.com/CoolApp/приложения, задайте базовый путь приложения (<base>), который также называется относительным корневым путем.

Настроив базовый путь приложения, компонент, который не находится в корневом каталоге, может создавать URL-адреса относительно корневого пути приложения. Компоненты, которые существуют на разных уровнях структуры каталогов, могут создавать ссылки на другие ресурсы во всех местах приложения. Базовый путь к приложению также используется для перехвата выбранных гиперссылок, когда целевой объект ссылки href находится в пределах URI-пространства базового пути к приложению. Компонент Router обрабатывает внутреннюю навигацию.

<base> Поместите тег в <head> разметку (расположение содержимого) перед элементами со значениями атрибутов<head>, которые являются URL-адресами, такими как href атрибуты <link> элементов.

Во многих сценариях размещения относительный путь URL к приложению является корнем приложения. В этих случаях по умолчанию относительный базовый путь URL-адреса приложения настраивается / как <base href="/" /> в <head> содержимом.

Примечание.

В некоторых сценариях размещения, таких как GitHub Pages и вложенные приложения IIS, базовый путь приложения должен быть установлен на относительный URL-адрес сервера приложения.

• В серверном Blazor приложении используйте любой из следующих подходов:

  • Вариант 1. Используйте <base> тег, чтобы задать базовый путь приложения (расположение содержимого<head>):

    <base href="/CoolApp/">
    

    Требуется завершающая косая черта.

  • Вариант 2. Сначала вызовите UsePathBase в конвейере обработки запросов приложения () сразу после WebApplicationBuilder построения (Program.csbuilder.Build()), чтобы настроить базовый путь для любого следующего по промежуточного слоя, взаимодействующего с путем запроса:

    app.UsePathBase("/CoolApp");
    

    Вызов UsePathBase рекомендуется, если вы также хотите запускать приложение Blazor Server локально. Например, укажите URL-адрес запуска в файле Properties/launchSettings.json:

    "launchUrl": "https://localhost:{PORT}/CoolApp",
    

    Заполнитель {PORT} в предыдущем примере — это порт, соответствующий защищенному порту в пути конфигурации applicationUrl. В следующем примере показан полный профиль запуска приложения на порту 7279.

    "BlazorSample": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7279;http://localhost:5279",
      "launchUrl": "https://localhost:7279/CoolApp",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
    }
    

    Дополнительные сведения о launchSettings.json файле см. в разделе "Использование нескольких сред в ASP.NET Core". Дополнительные сведения о Blazor базовых путях и размещении приложений см<base href="/" />. в статье или альтернативе базовому тегу для Blazor интеграции MVC (dotnet/aspnetcore #43191).

• Blazor WebAssembly Автономная (wwwroot/index.html):

  <base href="/CoolApp/">
  

  Требуется завершающая косая черта.

Примечание.

При использовании WebApplication (см. раздел "Миграция с ASP.NET Core 5.0 на 6.0") app.UseRouting должен вызываться после UsePathBase того, чтобы по промежуточному слоям маршрутизации можно было наблюдать измененный путь перед сопоставлением маршрутов. В противном случае маршруты будут сопоставляться, прежде чем UsePathBase перезапишет путь, как описано в статьях Порядок ПО промежуточного слоя и Маршрутизация.

Не префикс ссылок по всему приложению с косой чертой. Избегайте использования разделителя сегментов пути, либо используйте нотацию относительного пути точка-косая черта (./):

• ❌ Неправильно: <a href="/account">
• ✔️ Правильно: <a href="account">
• ✔️ Правильно: <a href="./account">

В Blazor WebAssembly запросах веб-API со HttpClient службой убедитесь, что вспомогательные элементы JSON (HttpClientJsonExtensions) не префикс url-адреса с косой чертой (/):

• ❌ Неправильно: var rsp = await client.GetFromJsonAsync("/api/Account");
• ✔️ Правильно: var rsp = await client.GetFromJsonAsync("api/Account");

Не префикс диспетчера навигации относительных ссылок с косой чертой. Избегайте использования разделителя сегментов пути или используйте нотацию относительного пути () с точки-косой чертой (./Navigationявляется внедреннойNavigationManager):

• ❌ Неправильно: Navigation.NavigateTo("/other");
• ✔️ Правильно: Navigation.NavigateTo("other");
• ✔️ Правильно: Navigation.NavigateTo("./other");

В стандартных конфигурациях для размещения Azure или служб IIS дополнительная настройка обычно не требуется. В некоторых сценариях размещения, отличных от IIS и обратного прокси-сервера, может потребоваться дополнительная конфигурация ПО промежуточного слоя статических файлов:

• Для правильного обслуживания статических файлов (например, app.UseStaticFiles("/CoolApp");).
• Для обслуживания скрипта Blazor (_framework/blazor.*.js). Дополнительные сведения. см. в статье Статические файлы ASP.NET Core Blazor.

Приложение Blazor WebAssembly с некорневым относительным путем URL (например, <base href="/CoolApp/">) не сможет найти свои ресурсы при локальном запуске. Для решения этой проблемы во время локальной разработки и тестирования можно предоставить аргумент базового пути, который соответствует значению href тега <base> во время выполнения. Не добавляйте в конце косую черту. Чтобы передать базовый аргумент пути при локальном запуске приложения, выполните dotnet watch команду (или dotnet run) из каталога приложения с параметром --pathbase :

dotnet watch --pathbase=/{RELATIVE URL PATH (no trailing slash)}

Для приложения Blazor WebAssembly с относительным путем URL /CoolApp/ (<base href="/CoolApp/">) команда имеет следующий вид:

dotnet watch --pathbase=/CoolApp

Если вы предпочитаете настроить профиль запуска приложения, чтобы указать pathbase автоматически, а не вручную с dotnet watch помощью (или dotnet run), задайте commandLineArgs свойство в Properties/launchSettings.json. В следующем примере также настраивается URL-адрес запуска (launchUrl):

"commandLineArgs": "--pathbase=/{RELATIVE URL PATH (no trailing slash)}",
"launchUrl": "{RELATIVE URL PATH (no trailing slash)}",

В качестве примера используется CoolApp:

"commandLineArgs": "--pathbase=/CoolApp",
"launchUrl": "CoolApp",

dotnet watch Используя параметр (илиdotnet run) с --pathbase параметром или конфигурацией профиля запуска, которая задает базовый путь, Blazor WebAssembly приложение отвечает локальноhttp://localhost:port/CoolApp.

Дополнительные сведения о launchSettings.json файле см. в разделе "Использование нескольких сред в ASP.NET Core". Дополнительные сведения о Blazor базовых путях и размещении приложений см<base href="/" />. в статье или альтернативе базовому тегу для Blazor интеграции MVC (dotnet/aspnetcore #43191).

Получение базового пути приложения из конфигурации

В следующем руководстве объясняется, как получить путь к <base> тегу из файла параметров приложения для разных сред.

Добавьте файл параметров приложения в приложение. В следующем примере используется Staging среда (appsettings.Staging.json):

{
  "AppBasePath": "staging/"
}

В серверном Blazor приложении загрузите базовый путь из конфигурации в <head> содержимом:

@inject IConfiguration Config

...

<head>
    ...
    <base href="/@(Config.GetValue<string>("AppBasePath"))" />
    ...
</head>

Кроме того, серверное приложение может получить значение из конфигурации UsePathBase. Поместите следующий код в конвейер обработки запросов приложения (Program.cs) сразу после WebApplicationBuilder сборки (builder.Build()). В следующем примере используется ключ AppBasePathконфигурации:

app.UsePathBase($"/{app.Configuration.GetValue<string>("AppBasePath")}");

В клиентском Blazor WebAssembly приложении:

• Удаление тега <base> из wwwroot/index.html:

  - <base href="..." />
  

• Укажите базовый HeadContent путь приложения через компонент (AppApp.razor):

  @inject IConfiguration Config
  
  ...
  
  <HeadContent>
      <base href="/@(Config.GetValue<string>("AppBasePath"))" />
  </HeadContent>
  

Если для загрузки не требуется значение конфигурации, например в средах, отличных от промежуточной среды, предыдущий href путь разрешается в корневой путь /.

Примеры в этом разделе посвящены предоставлению базового пути приложения из параметров приложения, но подход чтения пути IConfiguration из любого поставщика конфигурации является допустимым. Дополнительные сведения см. на следующих ресурсах:

• Конфигурация Blazor в ASP.NET Core
• Конфигурация в ASP.NET Core

Blazor ServerКонфигурация MapFallbackToPage

Этот раздел применяется только к приложениям Blazor Server . MapFallbackToPage не поддерживается в Blazor Web Appприложениях и Blazor WebAssembly приложениях.

В сценариях, где приложению требуется отдельная область с настраиваемыми ресурсами и компонентами Razor, выполните приведенные ниже действия.

• Создайте папку в папке Pages приложения для хранения ресурсов. Например, раздел администратора приложения создается в новой папке с именем Admin (Pages/Admin).

• Создайте корневую страницу (_Host.cshtml) для области. Например, создайте файл Pages/Admin/_Host.cshtml на основе основной корневой страницы приложения (Pages/_Host.cshtml). Не указывайте директиву @page на странице _Host администратора.

• Добавьте макет к папке области (например, Pages/Admin/_Layout.razor). В макете для отдельной области задайте тег <base> href в соответствии с папкой области (например, <base href="/Admin/" />). В демонстрационных целях добавьте ~/ к статическим ресурсам на странице. Например:

  • ~/css/bootstrap/bootstrap.min.css
  • ~/css/site.css
  • ~/BlazorSample.styles.css (пространство имен для примера приложения — BlazorSample)
  • ~/_framework/blazor.server.js (скрипт Blazor)

• Если область должна иметь собственную статическую папку ресурсов, добавьте ее и укажите ее расположение в ПО промежуточного слоя статических файлов в Program.cs (например, app.UseStaticFiles("/Admin/wwwroot")).

• Компоненты Razor добавляются в папку области. Как минимум, добавьте компонент Index в папку области с правильной директивой @page для области. Например, добавьте файл Pages/Admin/Index.razor на основе заданного по умолчанию файла Pages/Index.razor приложения. Укажите область администратора в качестве шаблона маршрута в верхней части файла (@page "/admin"). Добавьте дополнительные компоненты по мере необходимости. Например, Pages/Admin/Component1.razor с директивой @page и шаблоном маршрута @page "/admin/component1.

• В Program.cs вызовите MapFallbackToPage для пути к запросу области сразу же перед путем к резервной корневой странице к странице _Host:

  ...
  app.UseRouting();
  
  app.MapBlazorHub();
  app.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/Admin/_Host");
  app.MapFallbackToPage("/_Host");
  
  app.Run();
  

Развертывание

Инструкции по развертыванию см. в следующих разделах:

• Размещение и развертывание ASP.NET Core Blazor WebAssembly
• Размещение и развертывание приложений на стороне Blazor сервера ASP.NET