Руководство по настройке Azure Front Door для Статические веб-приложения Azure

Добавив Azure Front Door в качестве CDN для статического веб-приложения, вы можете воспользоваться безопасной точкой входа для быстрой доставки веб-приложений.

С помощью Статические веб-приложения у вас есть два варианта интеграции с Azure Front Door. Вы можете добавить Azure Front Door в статическое веб-приложение, включив пограничный интерфейс корпоративного уровня, управляемую интеграцию Azure Front Door с Статические веб-приложения. Кроме того, вы можете настроить ресурс Azure Front Door вручную перед статическим веб-приложением.

Рассмотрим приведенные ниже преимущества, чтобы определить, какой вариант лучше всего подходит для ваших потребностей.

Edge корпоративного уровня предоставляет:

• Ноль изменений конфигурации
• время простоя отсутствует.
• Автоматически управляемые сертификаты SSL и личные домены

Настройка Azure Front Door вручную обеспечивает полный контроль над конфигурацией CDN, включая возможность:

• Ограничение источника трафика по источнику
• Добавление брандмауэра веб-приложения (WAF)
• Маршрутизация между несколькими приложениями
• Использование более сложных функций Azure Front Door

В этом руководстве описано, как добавить Azure Front Door в статическое веб-приложение.

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

• Личный домен , настроенный для статического веб-приложения с временем жизни (TTL), равным менее 48 часов.
• Приложение, развернутое со Статическими веб-приложениями Azure, которые используют план размещения "Стандартный".

Включение пограничных вычислений корпоративного уровня в ресурсе Статические веб-приложения

Портал Azure

1. Перейдите в статическое веб-приложение в портал Azure.

2. Выберите край корпоративного уровня в меню слева.

3. Установите флажок Enable enterprise-grade edge.

4. Выберите Сохранить.

5. Нажмите кнопку "ОК ", чтобы подтвердить сохранение.

   Включение этой функции требует дополнительных затрат.

Azure CLI

az extension add -n enterprise-edge

az staticwebapp enterprise-edge enable -n my-static-webapp -g my-resource-group

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

• Учетная запись Azure с активной подпиской. Создание бесплатной учетной записи
• Сайт Статические веб-приложения Azure. Создание первого статического веб-приложения
• Статические веб-приложения Azure планы "Стандартный" и Azure Front Door "Стандартный" или "Премиум". Дополнительные сведения см. в разделе о ценах на Статические веб-приложения
• Рассмотрите возможность использования пограничных вычислений корпоративного уровня для ускорения загрузки страниц, повышения безопасности и оптимизации надежности для глобальных приложений.

Создавать Azure Front Door.

1. Войдите на портал Azure.

2. На домашней странице или в меню Azure выберите + Создать ресурс. Найдите профили Front Door и CDN, а затем выберите "Создать>профили Front Door и CDN".

3. На странице "Сравнение предложений" выберите "Быстрое создание" и нажмите кнопку "Продолжить", чтобы создать Front Door.

4. На странице профиля Front Door введите или выберите следующие параметры.

   Параметр	Значение
   Подписка	Выберите свою подписку Azure.
   Группа ресурсов	Введите имя группы ресурсов. Это имя часто совпадает с именем группы, используемой статическим веб-приложением.
   Расположение группы ресурсов	Если вы создаете новую группу ресурсов, введите ближайшее к вам расположение.
   Имя	Введите my-static-web-app-front-door.
   Уровень	Выберите Стандартное.
   Имя конечной точки	Введите уникальное имя узла Front Door.
   Тип источника	Выберите Статическое веб-приложение.
   Имя узла источника	Выберите имя узла статического веб-приложения в раскрывающемся списке.
   Кэширование	Установите флажок "Включить кэширование" проверка box.
   Поведение кэширования строк запросов	Выберите "Использовать строку запроса"
   Сжатие	Выбор включения сжатия
   Политика WAF	Выберите "Создать новую" или выберите существующую политику Брандмауэр веб-приложений в раскрывающемся списке, если вы хотите включить эту функцию.

   Примечание.

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

5. Выберите Проверить и создать, а затем выберите Создать. Процесс создания может занять несколько минут.

6. После завершения развертывания выберите Перейти к ресурсу.

7. Добавьте условие.

Отключение кэша для рабочего процесса проверки подлинности

Примечание.

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

Добавьте следующие параметры, чтобы отключить политики кэширования Front Door от попытки кэшировать страницы проверки подлинности и авторизации.

Добавить условие

1. В разделе Параметры front Door выберите набор правил.

2. Выберите Добавить.

3. В текстовом поле "Имя набора правил" введите "Безопасность".

4. В текстовом поле "Имя правила" введите NoCacheAuthRequests.

5. Выберите Добавить условие.

6. Выберите путь запроса.

7. Выберите раскрывающийся список "Оператор", а затем начните с.

8. Выберите ссылку "Изменить" над текстовым полем "Значение".

9. Введите /.auth текстовое поле и нажмите кнопку "Обновить".

10. Выберите параметры в раскрывающемся списке преобразования "Строка".

Добавление действия

1. Выберите раскрывающийся список "Добавить действие".

2. Выберите переопределение конфигурации маршрута.

3. Выберите "Отключено" в раскрывающемся списке кэширования .

4. Выберите Сохранить.

Связывание правила с конечной точкой

Теперь, когда правило создано, примените правило к конечной точке Front Door.

1. В Front Door выберите набор правил, а затем ссылку "Несвязано ".

   

2. Выберите имя конечной точки, к которому нужно применить правило кэширования, а затем нажмите кнопку "Далее".

3. Выберите Связать.

   

Копирование идентификатора Front Door

Чтобы скопировать уникальный идентификатор экземпляра Front Door, выполните следующие действия.

1. В Front Door выберите ссылку "Обзор " в области навигации слева.

2. Скопируйте значение с меткой Front Door ID и вставьте его в файл для последующего использования.

   

Обновление конфигурации статического веб-приложения

Чтобы завершить интеграцию с Front Door, необходимо обновить файл конфигурации приложения, чтобы выполнить следующие функции:

• Ограничить трафик только через Front Door
• Ограничение трафика только из экземпляра Front Door
• Определение доменов, к которым можно получить доступ к сайту
• Отключение кэширования для защищенных маршрутов

Откройте файл staticwebapp.config.json для сайта и внесите следующие изменения.

1. Ограничьте трафик только для использования Front Door, добавив следующий раздел в файл конфигурации:

   "networking": {
     "allowedIpRanges": ["AzureFrontDoor.Backend"]
   }
   

2. Чтобы определить, какие экземпляры и домены Azure Front Door могут получить доступ к сайту forwardingGateway , добавьте раздел.

   "forwardingGateway": {
     "requiredHeaders": {
       "X-Azure-FDID" : "<YOUR-FRONT-DOOR-ID>"
     },
     "allowedForwardedHosts": [
       "my-sitename.azurefd.net"
     ]
   }
   

   Сначала настройте приложение, чтобы разрешить трафик только из экземпляра Front Door. В каждом серверном запросе Front Door автоматически добавляет X-Azure-FDID заголовок, содержащий идентификатор экземпляра Front Door. Настроив статическое веб-приложение для этого заголовка, он ограничивает трафик исключительно экземпляром Front Door. forwardingGateway В разделе файла конфигурации добавьте requiredHeaders раздел и определите X-Azure-FDID заголовок. Замените <YOUR-FRONT-DOOR-ID>идентификатор Front Door, который вы задали ранее.

   Затем добавьте имя узла Azure Front Door (а не имя узла Статические веб-приложения Azure) в allowedForwardedHosts массив. Если у вас есть пользовательские домены, настроенные в экземпляре Front Door, также включите их в этот список.

   В этом примере замените my-sitename.azurefd.net имя узла Azure Front Door для вашего сайта.

3. Для всех защищенных маршрутов в приложении отключите кэширование Azure Front Door, добавив "Cache-Control": "no-store" в определение заголовка маршрута.

   {
       ...
       "routes": [
           {
               "route": "/members",
               "allowedRoles": ["authenticated", "members"],
               "headers": {
                   "Cache-Control": "no-store"
               }
           }
       ]
       ...
   }
   

С этой конфигурацией сайт больше не доступен через созданное *.azurestaticapps.net имя узла, но исключительно через имена узлов, настроенные в экземпляре Front Door.

Рекомендации

• Пользовательские домены: теперь, когда Front Door управляет сайтом, вы больше не используете функцию Статические веб-приложения Azure личного домена. Azure Front Door имеет отдельный процесс добавления личного домена. Дополнительные сведения см. в статье "Добавление личного домена в Front Door". При добавлении личного домена в Front Door необходимо обновить файл конфигурации статического веб-приложения, чтобы включить его в allowedForwardedHosts список.

• Статистика трафика. По умолчанию Azure Front Door настраивает пробы работоспособности, которые могут повлиять на статистику трафика. Возможно, потребуется изменить значения по умолчанию для проб работоспособности.

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

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

Если вы больше не хотите использовать ресурсы, созданные в этом руководстве, удалите экземпляры Статические веб-приложения Azure и Azure Front Door.

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

Добавление API