Руководство. Размещение статического веб-сайта в хранилище BLOB-объектов
Из этого руководства вы узнаете, как создать и развернуть статический веб-сайт в службе хранилища 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)