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

Служба приложений Azure — это служба веб-размещения с самостоятельной установкой исправлений и высоким уровнем масштабируемости. В этом кратком руководстве объясняется, как развернуть простейший сайт HTML+CSS в Служба приложений Azure. Действия в этом руководстве выполняются в Cloud Shell, но эти же команды можно выполнить локально в Azure CLI.

Примечание

Сведения о размещении статических HTML-файлов в бессерверной среде приведены в разделе Статические веб-приложения.

Домашняя страница в примере приложения

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

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

  • Используйте среду Bash в Azure Cloud Shell. Дополнительные сведения см. в статье Краткое руководство по Bash в Azure Cloud Shell.

  • Если вы предпочитаете выполнять справочные команды CLI локально, установите Azure CLI. Если вы работаете в Windows или macOS, Azure CLI можно запустить в контейнере Docker. Дополнительные сведения см. в разделе Запуск Azure CLI в контейнере Docker.

    • Если вы используете локальную установку, выполните вход в Azure CLI с помощью команды az login. Чтобы выполнить аутентификацию, следуйте инструкциям в окне терминала. Сведения о других возможностях, доступных при входе, приведены в статье Вход с помощью Azure CLI.

    • Установите расширение Azure CLI при первом использовании, когда появится соответствующий запрос. Дополнительные сведения о расширениях см. в статье Использование расширений с Azure CLI.

    • Выполните команду az version, чтобы узнать установленную версию и зависимые библиотеки. Чтобы обновиться до последней версии, выполните команду az upgrade.

Скачивание примера приложения

В Cloud Shell создайте каталог quickstart и перейдите в него.

mkdir quickstart

cd $HOME/quickstart

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

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

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

Перейдите в каталог, в котором содержится пример кода, и выполните команду az webapp up. В следующем примере замените <app_name> уникальным именем приложения. Статическое содержимое обозначается флагом --html.

cd html-docs-hello-world

az webapp up --location westeurope --name <app_name> --html

Примечание

Если вы хотите разместить статическое содержимое в экземпляре Служба приложений на основе Linux настройте PHP в качестве среды выполнения с помощью --runtime флагов и --os-type :

az webapp up --location westeurope --name <app_name> --runtime "PHP:8.1" --os-type linux

Контейнер PHP включает веб-сервер, который подходит для размещения статического HTML-содержимого.

Команда az webapp up выполняет следующие действия:

  • создание группы ресурсов по умолчанию;

  • создание плана службы приложений по умолчанию;

  • создание приложения с указанным именем.

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

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

{
  "app_url": "https://&lt;app_name&gt;.azurewebsites.net",
  "location": "westeurope",
  "name": "&lt;app_name&gt;",
  "os": "Windows",
  "resourcegroup": "appsvc_rg_Windows_westeurope",
  "serverfarm": "appsvc_asp_Windows_westeurope",
  "sku": "FREE",
  "src_path": "/home/&lt;username&gt;/quickstart/html-docs-hello-world ",
  &lt; JSON data removed for brevity. &gt;
}

Запишите значение resourceGroup. Оно потребуется при выполнении задач в разделе об очистке ресурсов.

Переход в приложение

В браузере перейдите по URL-адресу приложения: http://<app_name>.azurewebsites.net.

Страница выполняется как веб-приложение службы приложений Azure.

Домашняя страница примера приложения

Поздравляем! Вы развернули свое первое HTML-приложение в службе приложений.

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

В Cloud Shell введите nano index.html, чтобы открыть текстовый редактор Nano. В теге заголовка <h1> измените запись "Azure App Service - Sample Static HTML Site" (Служба приложений Azure — пример статического HTML-сайта) на "Azure App Service" (Служба приложений Azure), как показано ниже.

Файл index.html в редакторе Nano

Сохраните изменения и выйдите из редактора Nano. Выполните команду ^O, чтобы сохранить файл, и ^X — чтобы выйти.

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

az webapp up --location westeurope --name <app_name> --html

После завершения развертывания перейдите в окно браузера, открытое на шаге перехода в приложение, и обновите страницу.

Обновленная домашняя страница примера приложения

Управление новым приложением Azure

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

Выбор службы приложений на портале Azure

На странице Службы приложений выберите имя приложения Azure.

Переход к приложению Azure на портале

Отобразится страница обзора вашего веб-приложения. Вы можете выполнять базовые задачи управления: обзор, завершение, запуск, перезагрузку и удаление.

Колонка службы приложений на портале Azure

В меню слева доступно несколько страниц для настройки приложения.

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

На предыдущем шаге вы создали ресурсы Azure в группе ресурсов. Если эти ресурсы вам не понадобятся в будущем, вы можете удалить группу ресурсов, выполнив приведенную ниже команду в Cloud Shell. Помните, что имя группы ресурсов автоматически создано на этапе создания веб-приложения.

az group delete --name appsvc_rg_Windows_westeurope

Ее выполнение может занять до минуты.

Дальнейшие действия