Развертывание приложения Blazor на Статические веб-приложения Azure
Статические веб-приложения Azure публикует веб-сайт в рабочей среде, создавая приложения из репозитория GitHub, поддерживаемого бессерверной серверной частью. В следующем руководстве показано, как развернуть приложение C# Blazor WebAssembly, которое отображает данные о погоде, возвращаемые бессерверным API.
Предварительные требования
- GitHub .
- Учетная запись Azure. Если у вас еще нет подписки Azure, создайте бесплатную пробную учетную запись.
1. Создание репозитория
В этой статье для простоты используются шаблон из репозитория GitHub. Шаблон содержит начальное приложение, которое можно развернуть в Статические веб-приложения Azure.
- Убедитесь, что вы вошли в GitHub и перейдите в следующее расположение, чтобы создать новый репозиторий: https://github.com/staticwebdev/blazor-starter/generate
- Присвойте репозиторию имя my-first-static-blazor-app.
2. Создание статического веб-приложения
Теперь, когда репозиторий создан, создайте статическое веб-приложение на портале Azure.
Перейдите на портал Microsoft Azure.
Выберите Создать ресурс.
Выполните поиск по запросу Статические веб-приложения.
Выберите Статическое веб-приложение.
Нажмите кнопку создания.
На вкладке Основные сведения введите приведенные ниже значения.
Свойство Значение Подписка Имя подписки Azure. Группа ресурсов my-blazor-group Имя my-first-static-blazor-app Тип плана Бесплатный Область для API Функций Azure и промежуточных сред Выберите ближайший к вам регион. Источник GitHub Выберите Войти с помощью GitHub и выполните проверку подлинности с помощью GitHub, если появится соответствующий запрос.
Введите следующие значения GitHub.
Свойство Значение Организация Выберите нужную организацию GitHub. Репозиторий Выберите my-first-static-blazor-app. Ветвь Выберите Main. Примечание
Если репозитории не отображаются, может потребоваться авторизовать Статические веб-приложения Azure на GitHub. Затем перейдите в репозиторий GitHub и перейдите в раздел Параметры > Приложения > Авторизованные приложения OAuth, выберите Статические веб-приложения Azure, а затем — Предоставить. Чтобы предоставить разрешения для репозиториев организации, необходимо быть владельцем организации.
В разделе Сведения о сборке выберите Blazor из раскрывающегося списка Варианты сборки и укажите следующие значения.
Свойство Значение Описание Расположение приложения Клиент Папка, содержащая приложение Blazor WebAssembly Расположение API Api Папка, содержащая приложение Функций Azure Расположение вывода wwwroot Папка в выходных данных сборки, содержащая опубликованное приложение Blazor WebAssembly Выберите Просмотр и создание , чтобы убедиться, что все сведения указаны правильно.
Выберите Создать, чтобы начать создание статического веб-приложения и подготовить GitHub Actions для развертывания.
После завершения развертывания выберите Перейти к ресурсу.
Выберите Перейти к ресурсу.
3. Просмотр веб-сайта
При развертывании статического приложения следует учитывать два фактора. Первый — подготовка базовых ресурсов Azure, из которых состоит приложение. Второй — это рабочий процесс GitHub Actions, который выполняет сборку и публикацию приложения.
Прежде чем перейти к новому статическому веб-приложению, сборка развертывания должна завершиться.
В окне обзора службы "Статические веб-приложения" отображается ряд ссылок, которые помогут вам взаимодействовать с веб-приложением.
Выберите баннер с надписью Щелкните здесь, чтобы проверка состояние выполнения GitHub Actions, чтобы просмотреть GitHub Actions, запущенные в репозитории. Убедившись, что задание развертывания завершено, перейдите на веб-сайт по созданному URL-адресу.
Когда рабочий процесс 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 .
Очистка ресурсов
Если вы не собираетесь использовать это приложение, вы можете удалить экземпляр Статические веб-приложения Azure, выполнив следующие действия.
- Откройте портал Azure.
- Выполните поиск my-blazor-group в верхней строке поиска.
- Выберите имя группы.
- Выберите команду Удалить.
- Нажмите кнопку Да, чтобы подтвердить действие удаления.