Размещение статического веб-сайта в службе хранилища Azure

Вы можете предоставлять статическое содержимое (HTML, CSS, JavaScript и изображения) напрямую из контейнера, размещенного в учетной записи общего назначения версии 2 или хранилища блочных BLOB-объектов. Дополнительные сведения см. в статье Размещение статических веб-сайтов в службе хранилища Azure.

В этой статье показано, как включить размещение статического веб-сайта, используя портал Azure, Azure CLI или PowerShell.

Включение размещения статического веб-сайта

Размещение статических веб-сайтов — это функция, которую необходимо включить в учетной записи хранения.

Портал

1. Чтобы начать, войдите на портал Azure.

2. Найдите учетную запись хранения и выберите ее, чтобы отобразить панель Обзор учетной записи.

3. В панели Обзор выберите вкладку Возможности. Затем выберите Статический веб-сайт, чтобы отобразить страницу конфигурации статического веб-сайта.

   

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

5. В поле Имя документа индекса укажите страницу индексов по умолчанию (например, index.html).

   Страница индексов по умолчанию отображается, когда пользователь переходит к корню статического веб-сайта.

6. В поле Путь к документу с сообщением об ошибке укажите страницу ошибки по умолчанию (например, 404.html).

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

7. Нажмите кнопку Save (Сохранить), чтобы завершить настройку статического веб-сайта.

   

8. Вы увидите сообщение с подтверждением. Конечные точки статического веб-сайта и другие сведения о конфигурации отображаются в области Обзор.

   

Azure CLI

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

1. Сначала откройте Azure Cloud Shell или, если вы установили Azure CLI локально, откройте командное консольное приложение (например, Windows PowerShell).

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

   az account set --subscription <subscription-id>
   

   Замените значение заполнителя <subscription-id> идентификатором своей подписки.

3. Включите размещение статического веб-сайта.

   az storage blob service-properties update --account-name <storage-account-name> --static-website --404-document <error-document-name> --index-document <index-document-name>
   

   • Замените значение заполнителя <storage-account-name> именем вашей учетной записи хранения.

   • Замените заполнитель <error-document-name> именем документа ошибки, который будет отображаться пользователям при запросе браузером несуществующей страницы сайта.

   • Замените заполнитель <index-document-name> именем документа индекса. Этим документом обычно является index.html.

PowerShell

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

1. Откройте командное окно Windows PowerShell.

2. Убедитесь, что у вас есть модуль Az в Azure PowerShell 0.7 или более поздней версии.

   Get-InstalledModule -Name Az -AllVersions | select Name,Version
   

   Если вам необходимо выполнить установку или обновление, см. статью об установке модуля Azure PowerShell.

3. Войдите в подписку Azure с помощью команды Connect-AzAccount и следуйте инструкциям на экране.

   Connect-AzAccount
   

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

   $context = Get-AzSubscription -SubscriptionId <subscription-id>
   Set-AzContext $context
   

   Замените значение заполнителя <subscription-id> идентификатором своей подписки.

5. Получите контекст учетной записи хранения, определяющий необходимую учетную запись хранения.

   $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -AccountName "<storage-account-name>"
   $ctx = $storageAccount.Context
   

   • Замените значение заполнителя <resource-group-name> именем своей группы ресурсов.

   • Замените значение заполнителя <storage-account-name> именем вашей учетной записи хранения.

6. Включите размещение статического веб-сайта.

   Enable-AzStorageStaticWebsite -Context $ctx -IndexDocument <index-document-name> -ErrorDocument404Path <error-document-name>
   

   • Замените заполнитель <error-document-name> именем документа ошибки, который будет отображаться пользователям при запросе браузером несуществующей страницы сайта.

   • Замените заполнитель <index-document-name> именем документа индекса. Этим документом обычно является index.html.

Upload files

Портал

Ниже показано, как передать файлы с помощью портала Azure. Вы также можете использовать AzCopy, PowerShell, CLI или любое пользовательское приложение, которое может отправлять файлы в контейнер $web учетной записи. Пошаговое руководство по отправке файлов с помощью Visual Studio Code см. в руководстве по размещению статического веб-сайта в хранилище BLOB-объектов.

1. На портале Azure перейдите к учетной записи хранения, содержащей статический веб-сайт. Выберите Контейнеры в области навигации слева, чтобы отобразить список контейнеров.

2. В области Контейнеры выберите контейнер $web, чтобы открыть панель Обзор контейнера.

   

3. В панели Обзор нажмите значок Передать, чтобы открыть панель Передать большой двоичный объект. Затем выберите поле Файлы в области Передать большой двоичный объект, чтобы открыть обозреватель файлов. Перейдите к файлу, который вы хотите передать, выберите его, а затем нажмите Открыть, чтобы заполнить поле Файлы. При необходимости установите флажок Перезаписать, если файлы уже существуют.

   

4. Если требуется, чтобы браузер отображал содержимое файла, убедитесь, что для типа содержимого этого файла задано значение text/html. Чтобы проверить это, выберите имя большого двоичного объекта, отправленного на предыдущем шаге, чтобы открыть панель Обзор. Убедитесь, что значение задано в поле свойства CONTENT-TYPE.

   

   Примечание

   Это свойство автоматически задает значение text/html для наиболее распознаваемых расширений, таких как .html. Однако в некоторых случаях это необходимо будет сделать самостоятельно. Если не задать для этого свойства значение text/html, вместо отображения содержимого браузер предложит вам загрузить файл. Это свойство можно задать на предыдущем шаге.

Azure CLI

Передайте объекты в контейнер $web из исходного каталога.

В этом примере предполагается, что вы выполняете команды из сеанса Azure Cloud Shell.

az storage blob upload-batch -s <source-path> -d '$web' --account-name <storage-account-name>

Примечание

Если в браузере вместо отображения содержимого появится запрос на скачивание файла, вы можете добавить --content-type 'text/html; charset=utf-8' в команду.

• Замените значение заполнителя <storage-account-name> именем вашей учетной записи хранения.

• Замените заполнитель <source-path> путем к расположению файлов, которые необходимо отправить.

Примечание

Если вы используете установку расположения Azure CLI, вы можете использовать путь к любому расположению на локальном компьютере (например, C:\myFolder).

При использовании Azure Cloud Shell необходима будет ссылка на общую папку, которая будет видима для Cloud Shell. Это может быть общая папка облачной общей папки или имеющаяся общая папка, подключенная из Cloud Shell. Дополнительные сведения см. в статье Сохранение файлов в Azure Cloud Shell.

PowerShell

Передайте объекты в контейнер $web из исходного каталога.

# upload a file
set-AzStorageblobcontent -File "<path-to-file>" `
-Container `$web `
-Blob "<blob-name>" `
-Context $ctx

Примечание

Если в браузере вместо отображения содержимого появится запрос на скачивание файла, вы можете добавить -Properties @{ ContentType = "text/html; charset=utf-8";} в команду.

• Замените значение заполнителя <path-to-file> полным путем к файлу, который необходимо отправить (например, C:\temp\index.html).

• Замените значение заполнителя <blob-name> именем, которое вы хотите присвоить полученному большому двоичному объекту (например, index.html).

Поиск URL-адреса веб-сайта

Вы можете просматривать страницы сайта из браузера, используя общедоступный URL-адрес веб-сайта.

Портал

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

Azure CLI

Найдите общедоступный URL-адрес статического веб-сайта с помощью следующей команды:

az storage account show -n <storage-account-name> -g <resource-group-name> --query "primaryEndpoints.web" --output tsv

• Замените значение заполнителя <storage-account-name> именем вашей учетной записи хранения.

• Замените значение заполнителя <resource-group-name> именем своей группы ресурсов.

PowerShell

Найдите общедоступный URL-адрес статического веб-сайта с помощью следующей команды:

 $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -Name "<storage-account-name>"
Write-Output $storageAccount.PrimaryEndpoints.Web

• Замените значение заполнителя <resource-group-name> именем своей группы ресурсов.

• Замените значение заполнителя <storage-account-name> именем вашей учетной записи хранения.

Включение метрик на страницах статического веб-сайта

После включения метрик статистика трафика файлов в контейнере $web будет отображаться на панели мониторинга метрик.

1. В разделе Монитор меню учетной записи хранения щелкните Метрики.

   

   Примечание

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

2. Нажмите кнопку интервала времени, выберите временные рамки и щелкните Применить.

   

3. Из раскрывающегося списка Пространство имен выберите BLOB-объекты.

   

4. Затем выберите метрику Исходящий трафик.

   

5. Выберите Сумма в селекторе Агрегирование.

   

6. Щелкните кнопку Добавить фильтр и выберите Имя API в селекторе Свойство.

   

7. Установите флажок рядом с полем GetWebContent в селекторе Значения для заполнения отчета на основе метрик.

   

   Примечание

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

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

• Узнайте, как настроить личный домен со статическим веб-сайтом. См. статью Сопоставление личного домена с конечной точкой хранилища BLOB-объектов Azure.