Руководство. Размещение статического веб-сайта в хранилище BLOB-объектов

Статья
06/01/2023

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

В этом руководстве описано следующее:

Настройка размещения статического веб-сайта
Развертывание веб-сайта Hello World

У статических веб-сайтов есть некоторые ограничения. Например, если требуется настроить заголовки, необходимо использовать сеть доставки содержимого Azure (Azure CDN). Настройка заголовков в функциях самого статического веб-сайта не предусмотрена. Кроме того, AuthN и AuthZ не поддерживаются.

Если эти функции важны для вашего сценария, рассмотрите возможность использования Статических веб-приложений Azure. Это отличная альтернатива статическим веб-сайтам, которая также подходит в тех случаях, когда веб-сервер не должен визуализировать содержимое. Эта служба позволяет настраивать заголовки и полностью поддерживает AuthN и AuthZ. Статические веб-приложения Azure предоставляют полностью управляемый процесс непрерывной интеграции и непрерывной поставки (CI/CD) из источника GitHub в глобальное развертывание.

В этом видео показано, как разместить статический веб-сайт на служба хранилища BLOB-объектов.

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

Необходимые компоненты

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

Доступ к хранилищу Azure осуществляется с помощью учетной записи хранения. Для работы с этим руководством создайте учетную запись хранения с помощью портала Azure, Azure PowerShell или Azure CLI. Инструкции по созданию учетной записи хранения см. в статье Создайте учетную запись хранения.

Примечание.

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

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

После установки Visual Studio Code установите расширение предварительной версии службы хранилища Azure. Это расширение интегрирует функциональность управления службой хранилища Azure с Visual Studio Code. Оно будет использоваться для развертывания вашего статического веб-сайта в службу хранилища Azure. Чтобы установить расширение, сделайте следующее.

Запустите Visual Studio Code.
На панели инструментов щелкните Расширения. Найдите службу хранилища Azure и выберите из списка расширение службы хранилища Azure. Нажмите кнопку Установить, чтобы установить расширение.

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

Сначала нужно настроить учетную запись хранения для размещения статического веб-сайта на портале Azure. Во время настройки учетной записи для размещения статического веб-сайта служба хранилища Azure автоматически создает контейнер с названием $web. В контейнере $web будут содержаться файлы вашего статического веб-сайта.

Войдите в портал Azure в веб-браузере.
Найдите учетную запись хранения и отобразите общие сведения о ней.
Выберите Статический веб-сайт для отображения на странице конфигурации статических веб-сайтов.
Выберите Включено, чтобы включить размещение статического веб-сайта в учетной записи хранения.
В поле Имя документа индекса укажите index.html — страницу индексов по умолчанию. Страница индексов по умолчанию отображается, когда пользователь переходит к корню статического веб-сайта.
В поле Путь к документу с сообщением об ошибке укажите 404.html — страницу ошибки по умолчанию. Страница ошибки по умолчанию отображается, когда пользователь пытается перейти на страницу, которой не существует на вашем статическом веб-сайте.
Нажмите кнопку Сохранить. Теперь портал Azure отображает конечную точку вашего статического веб-сайта.

Развертывание веб-сайта Hello World

С помощью Visual Studio Code создайте веб-страницу Hello World и разверните ее на статическом веб-сайте, размещенном в вашей учетной записи службы хранилища Azure.

Создайте пустую папку с именем mywebsite в вашей локальной файловой системе.
Запустите Visual Studio Code и откройте только что созданную папку с помощью панели Проводник.
Создайте файл индексов по умолчанию в папке mywebsite и назовите его index.html.
Откройте файл index.html в редакторе, вставьте следующий текст в файл и сохраните его:
```
<!DOCTYPE html>
<html>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>
```
Создайте файл ошибок по умолчанию и назовите его 404.html.
Откройте файл 404.html в редакторе, вставьте следующий текст в файл и сохраните его:
```
<!DOCTYPE html>
<html>
  <body>
    <h1>404</h1>
  </body>
</html>
```
Щелкните правой кнопкой мыши папку mywebsite на панели Проводник и выберите Deploy to Static Website... (Развернуть на статическом веб-сайте...), чтобы развернуть веб-сайт. Вам будет предложено войти в Azure для получения списка подписок.
Выберите подписку, содержащую учетную запись хранения, для которой вы включили размещение статического веб-сайта. Затем при появлении запроса выберите учетную запись хранения.

Visual Studio Code передаст файлы в конечную веб-точку и покажет строку состояния с успешным результатом. Запустите веб-сайт, чтобы просмотреть его в Azure.

Вы успешно прошли краткое руководство и развернули статический веб-сайт в Azure.

Поддерживаемые компоненты

На поддержку данной функции может повлиять включение протокола Data Lake Storage 2-го поколения, протокола сетевой файловой системы (NFS) 3.0 или протокола SFTP. Если вы включили любую из этих возможностей, см. Сведения о поддержке функций хранилища BLOB-объектов в учетных записях хранения Azure, чтобы оценить поддержку данной функции.

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

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

Теперь узнайте, как настроить личный домен со статическим веб-сайтом.

Map a custom domain to an Azure Blob Storage endpoint (Сопоставление личного домена с конечной точкой хранилища BLOB-объектов Azure)

Поделиться через