Разверните приложение Blazor в Статические веб-приложения Azure

Статические веб-приложения Azure развертывает веб-сайт в рабочей среде, собирая приложение из репозитория GitHub с бессерверным бэкендом. В следующем руководстве показано, как развернуть приложение C# Blazor WebAssembly, которое отображает данные о погоде, возвращаемые бессерверным API.

Примечание.

Предварительные требования

• Учетная запись GitHub
• учетная запись Azure; Если у вас еще нет подписки Azure, создайте бесплатную пробную учетную запись.

1. Создание репозитория

В этой статье используется шаблонный репозиторий GitHub, чтобы вам было проще начать. Шаблон включает стартовое приложение, которое можно развернуть в службе Статические веб-приложения Azure.

1. Убедитесь, что вы вошли в GitHub и перейдите в следующее расположение, чтобы создать новый репозиторий: https://github.com/staticwebdev/blazor-starter/generate
2. Присвойте репозиторию имя my-first-static-blazor-app.

2. Создание статического веб-приложения

Теперь, когда репозиторий создан, создайте статическое веб-приложение на портале Azure.

1. Переход на портал Azure.

2. Выберите Создать ресурс.

3. Выполните поиск по запросу Статические веб-приложения.

4. Выберите Статическое веб-приложение.

5. Нажмите кнопку создания.

6. На вкладке Основные сведения введите приведенные ниже значения.

   Свойство	Значение
   Подписка	Название вашей подписки Azure.
   Группа ресурсов	my-blazor-group
   Имя	my-first-static-blazor-app
   Тип плана	Бесплатно
   Регион для API Функции Azure и промежуточных сред развертывания	Выберите ближайший к вам регион.
   Источник	GitHub

7. Выберите вход с помощью GitHub и выполните проверку подлинности с помощью GitHub , если вам будет предложено.

8. Введите следующие значения GitHub.

   Свойство	Значение
   Предприятие	Выберите нужную организацию GitHub.
   Репозиторий	Выберите my-first-static-blazor-app.
   Ветка	Выберите Main.

   Примечание.

   Если вы не видите репозитории, возможно, потребуется авторизовать Статические веб-приложения Azure на GitHub. Затем перейдите к своему репозиторию GitHub и выберите Настройки > Приложения > Авторизованные OAuth-приложения, затем выберите Статические веб-приложения Azure, а затем — Предоставить. Чтобы предоставить разрешения для репозиториев организации, необходимо быть владельцем организации.

9. В разделе Сведения о сборке выберите Blazor из раскрывающегося списка Варианты сборки и укажите следующие значения.

   Свойство	Значение	Описание
   Расположение приложения	Клиент	Папка, содержащая приложение Blazor WebAssembly
   Расположение API	Api	Папка, содержащая приложение Функций Azure
   Расположение вывода	wwwroot	Папка в выходных данных сборки, содержащая опубликованное приложение Blazor WebAssembly

10. Нажмите кнопку "Проверить и создать" , чтобы проверить правильность сведений.

11. Выберите "Создать ", чтобы начать создание статического веб-приложения и подготовить GitHub Actions для развертывания.

12. После завершения развертывания выберите "Перейти к ресурсу".

13. Выберите Перейти к ресурсу.

3. Просмотр веб-сайта

При развертывании статического приложения следует учитывать два фактора. Первый подготавливает базовые ресурсы Azure, из которых состоит приложение. Второй — это рабочий процесс GitHub Actions, который выполняет сборку и публикацию приложения.

Прежде чем открыть новое статическое веб-приложение, сборка для развертывания должна сначала завершиться.

В окне обзора службы "Статические веб-приложения" отображается ряд ссылок, которые помогут вам взаимодействовать с веб-приложением.

1. Выберите баннер с надписью Нажмите здесь, чтобы проверить статус запусков GitHub Actions, чтобы увидеть запуски GitHub Actions, выполняющиеся для вашего репозитория. После завершения задания развертывания можно перейти на веб-сайт с помощью созданного URL-адреса.

   

2. Когда рабочий процесс GitHub Actions завершится, щелкните ссылку на URL-адрес, чтобы открыть веб-сайт на новой вкладке.

   

4. Общие сведения о приложении

В совокупности следующие проекты образуют компоненты, необходимые для создания приложения Blazor WebAssembly, работающего в браузере и использующего API серверной части Функции Azure.

Проект Visual Studio	Описание
Api	Приложение Функции Azure на C# реализует конечную точку API, которая предоставляет данные о погоде приложению Blazor WebAssembly. WeatherForecastFunction возвращает массив объектов WeatherForecast.
Клиент	Интерфейсный проект Blazor WebAssembly. Резервный маршрут реализован, чтобы маршрутизация на стороне клиента работала корректно.
Общий	Содержит общие классы, на которые ссылаются проекты API и клиента, которые позволяют передавать данные из конечной точки API в интерфейсное веб-приложение. Класс WeatherForecast является общим для обоих приложений.

Статическое веб-приложение Blazor

Резервный маршрут

Приложение предоставляет URL-адреса, такие как /counter и /fetchdata, которые соответствуют определённым маршрутам приложения. Так как это приложение реализуется как одна страница, каждый маршрут обслуживается файлом index.html . Чтобы запросы по любому пути возвращали index.html, в файле , расположенном в корневой папке клиентского проекта, реализуется staticwebapp.config.json.

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

Конфигурация JSON гарантирует, что запросы на любой маршрут в приложении возвращают страницу index.html .

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

В качестве альтернативы развертыванию с помощью GitHub Actions можно развернуть Статические веб-приложения Azure непосредственно из Visual Studio. Создайте профиль публикации для Статические веб-приложения Azure:

1. В пользовательском интерфейсе публикации Visual Studio выберите Целевой объект>Azure>Конкретный целевой объект>Статические веб-приложения Azure, чтобы создать профиль публикации.

2. В конфигурации профиля публикации укажите имя подписки. Выберите существующий экземпляр или нажмите кнопку "Создать новый экземпляр". При создании нового экземпляра в интерфейсе статического веб-приложения на портале Azure, установите для деталей развертывания> значение Другое. Дождитесь завершения развертывания в портале Azure, прежде чем продолжить.

3. В конфигурации профиля публикации выберите экземпляр "Статические веб-приложения Azure" из группы ресурсов этого экземпляра. Нажмите кнопку "Готово ", чтобы создать профиль публикации. Если Visual Studio запрашивает установку интерфейса командной строки Статические веб-приложения (SWA), установите интерфейс командной строки, следуя инструкциям. Для интерфейса командной строки SWA требуется npm/Node.js (документация по Visual Studio).

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

Очистка ресурсов

Если вы не собираетесь использовать это приложение, можно удалить экземпляр службы Статические веб-приложения Azure, выполнив следующие действия.

1. Откройте портал Azure.
2. Найдите my-blazor-group в верхней панели поиска.
3. Выберите имя группы.
4. Выберите команду Удалить.
5. Нажмите кнопку Да, чтобы подтвердить действие удаления.

Следующие шаги

Аутентификация и авторизация

Связанные статьи

• Настройка проверки подлинности и авторизации
• Настройка параметров приложения
• Включение мониторинга
• Azure CLI;