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

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

С помощью Static Web Apps у вас есть два варианта интеграции с 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 в статическое веб-приложение.

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

• Зарегистрированный Microsoft.Cdnпоставщик ресурсов.
• Личный домен , настроенный для статического веб-приложения с временем жизни (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 с активной подпиской. Создание бесплатной учетной записи
• Сайт "Static Web Apps" 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.
   Тип источника	Выберите Статическое веб-приложение.
   Имя узла источника	Выберите имя узла статического веб-приложения в раскрывающемся списке.
   Кэширование	Установите флажок "Включить кэширование".
   Поведение кэширования строк запросов	Выберите "Использовать строку запроса"
   Сжатие	Выбор включения сжатия
   Политика WAF	Выберите "Создать новую" или выберите существующую политику Брандмауэр веб-приложений в раскрывающемся списке, если вы хотите включить эту функцию.

   Примечание.

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

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

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

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

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

Примечание.

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

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

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

1. На вашей главной странице в разделе "Параметры" выберите "Набор правил".

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

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

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

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

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

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

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

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

10. Не выбирайте параметры в раскрывающемся списке Преобразование строки.

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

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

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

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

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

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

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

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

   

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

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

   

Скопировать ID 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 Static Web Apps и Azure Front Door.

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

Добавление API