Упражнение. Создание статического веб-приложения HTML с помощью Azure Cloud Shell

  • 15 мин

Бесплатная песочница позволяет создавать ресурсы в ряде глобальных регионов Azure. При создании ресурсов выберите регион из следующего списка.

  • западная часть США 2
  • Центрально-южная часть США
  • Центральная часть США
  • Восточная часть США
  • Западная Европа
  • Southeast Asia
  • Восточная Япония
  • Южная Бразилия
  • Юго-Восточная часть Австралии
  • Центральная Индия

В этом упражнении вы развернете базовый сайт HTML+CSS для приложение Azure service с помощью команды Azure CLIaz webapp up. Затем обновите код и повторно разверните его с помощью той же команды.

Команда az webapp up упрощает создание и обновление веб-приложений. При выполнении выполняется следующее:

  • Создайте группу ресурсов по умолчанию, если она не указана.
  • создание плана службы приложений по умолчанию;
  • создание приложения с указанным именем.
  • развертывание ZIP-файлов для веб-приложения из текущего рабочего каталога.

Внимание

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

загрузка примера приложения;

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

  1. В песочнице создайте каталог и перейдите к нему.

    mkdir htmlapp

cd htmlapp

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

    git clone https://github.com/Azure-Samples/html-docs-hello-world.git

  3. Задайте переменные для хранения групп ресурсов и имен приложений, выполнив следующие команды.

    resourceGroup=$(az group list --query "[].{id:name}" -o tsv)
appName=az204app$RANDOM

Создание веб-приложения

  1. Перейдите в каталог, в котором содержится пример кода, и выполните команду az webapp up.

    cd html-docs-hello-world

az webapp up -g $resourceGroup -n $appName --html

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

    {
"app_url": "https://<myAppName>.azurewebsites.net",
"location": "westeurope",
"name": "<app_name>",
"os": "Windows",
"resourcegroup": "<resource_group_name>",
"serverfarm": "appsvc_asp_Windows_westeurope",
"sku": "FREE",
"src_path": "/home/<username>/demoHTML/html-docs-hello-world ",
< JSON data removed for brevity. >
}

  2. Откройте новую вкладку в браузере, перейдите по URL-адресу приложения (https://<myAppName>.azurewebsites.net) и убедитесь, что приложение выполняется. Запишите заголовок в верхней части страницы. Оставьте браузер открытым с приложением для работы со следующим разделом.

    Примечание.

    Вы можете скопировать <myAppName>.azurewebsites.net из выходных данных предыдущей команды или выбрать URL-адрес в выходных данных, чтобы открыть сайт на новой вкладке.

Обновление и повторное развертывание приложения

  1. В Cloud Shell введите code index.html, чтобы открыть редактор. В теге заголовка <h1> измените Служба приложений  — пример статического сайта на Обновленная Служба приложений Azure или на любое другое название.

  2. Нажмите клавиши CTRL+S для сохранения и CTRL+Q для выхода.

  3. Повторно разверните приложение с помощью той же команды az webapp up.

    az webapp up -g $resourceGroup -n $appName --html

    Совет

    Для прокрутки предыдущих команд можно использовать стрелку вверх на клавиатуре.

  4. После завершения развертывания вернитесь в браузер с шага 2 в разделе "Создание веб-приложения" и обновите страницу.