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

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

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

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

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

1. Войдите на портал Azure под той же учетной записью, для которой вы активировали песочницу.

2. На домашней странице Azure в разделе Службы Azure выберите Создать ресурс. Откроется панель Создание ресурса.

3. С помощью поля поиска Marketplace найдите и выберите Статические веб-приложения. Откроется область Статическое веб-приложение.

4. Нажмите кнопку создания. Откроется панель Создание статического веб-приложения. Настройте свое новое приложение и свяжите его с репозиторием GitHub.

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

   Настройки	Значение
   Сведения о проекте
   Подписка	Подписка «Консьерж»
   Группа ресурсов	[Имя группы ресурсов песочницы]
   Сведения о статическом веб-приложении
   Имя.	Дайте название своему приложению. Допустимые символы: a-z (без учета регистра), 0-9 и -.
   План размещения
   Ценовая категория для вашего приложения	Выберите Бесплатно
   Функции Azure и сведения о промежуточном хранении
   Регион для API функций Azure и тестовых сред	Выберите ближайший к вам регион
   Сведения о развертывании
   Источник	Выберите GitHub
   учетная запись GitHub;	Выберите Войти по учетным данным GitHub. Откроется область Авторизация статических веб-приложений Azure. Выберите Авторизовать статические веб-приложения службы приложений Azure. Введите пароль.
   Организация	Выберите организацию, в которой был создан репозиторий.
   Репозиторий	my-static-blazor-app
   Филиал	главный
   Сведения о сборке
   Предустановки сборки	Blazor
   Расположение приложения	Клиент
   Расположение API	Api
   Расположение вывода	wwwroot

6. Выберите Просмотреть и создать>Создать.

7. После завершения развертывания выберите Перейти к ресурсу. Откроется панель Статического веб-приложения.

Проверка действия GitHub

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

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

После того как вы перейдете по ссылке, сделайте следующее.

1. Выберите Azure Static Web Apps CI/CD (CI/CD статических веб-приложений Azure).

2. Выберите коммит с заголовком ci: add Azure Static Web Apps workflow file.

3. Выберите ссылку Сборка и развёртывание задачи.

Здесь можно наблюдать за ходом работы приложения в процессе сборки.

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

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

Щелкните URL-адрес на портале Azure, чтобы открыть свое приложение в браузере.

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

Поздравляем! Вы развернули ваше первое приложение в Azure Static Web Apps!

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

В вашем приложении нет API для списка покупок. Затем вы изучите, как добавить API Azure Functions в ваше приложение, которое развёртывается в Azure вместе со статическими файлами.