Упражнение. Создание экземпляра службы статических веб-приложений Azure

  • 5 мин

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

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

После создания репозитория GitHub можно создать экземпляр Статические веб-приложения из портал Azure.

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

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

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

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

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

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

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

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

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

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

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

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

Screenshot showing how to browse to see the progress of the GitHub Actions workflow.

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

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

  2. Выберите фиксацию с заголовком ci: добавление файла рабочей нагрузки статических веб-приложений Azure.

  3. Нажмите ссылку Создать и развернуть задание.

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

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

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

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

Screenshot of the Azure Static Web Apps overview page.

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

Поздравляем! Вы развернули свое первое приложение для Статические веб-приложения Azure!

Примечание.

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

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

В вашем приложении нет API для списка покупок. Затем вы узнаете, как добавить ФУНКЦИИ AZURE API в приложение, которое публикуется в Azure вместе со статическими ресурсами.