Рубрики
Без рубрики

Настройка Azure CDN для повышения производительности Angular (6/7)

В этой серии сообщений в блоге мы собираемся развернуть приложение с полным стеком в Azure и узнать, как эффективно и с минимальными затратами настроить множество компонентов. Помечен как spring, angular, azure, java.

Приложения Spring и Angular в Azure (серия из 7 частей)

Это сообщение в блоге является частью серии “развертывание приложения Spring Boot и Angular в Azure”, вот полный список сообщений:

  • Создание приложения Spring Boot и Angular для Azure (1/7)
  • Создание и настройка веб-приложения Azure и MySQL для размещения приложения Spring Boot (2/7)
  • Использование конвейеров Azure для создания, тестирования и развертывания приложений Spring Boot и Angular (3/7)
  • Использование Azure Application Insights с Spring Boot (4/7)
  • Использование Azure Application Insights с Angular (5/7)
  • Настройка Azure CDN для повышения производительности Angular (6/7)
  • Настройка кэша Azure Redis для повышения производительности быстрой загрузки (7/7)

Ссылки будут обновляться после каждой публикации поста.

Проблемы с производительностью нашего приложения Angular

Наше текущее приложение Angular работает очень хорошо, фактически его производственная сборка даже получает идеальную оценку “100” при тестировании с помощью инструментов аудита Chrome. Команда Hipster усердно работала над тем, чтобы предоставить вам наилучшее приложение, но мы все еще можем сделать его лучше!

Поскольку мы сгенерировали все в одном проекте, весь код на стороне клиента обслуживается Spring Boot. Это одна из критических замечаний, которые мы часто слышим о проектах “полного стека”, обычно создаваемых JHipster, людьми, которые не присматривались к тому, как это должно быть размещено.

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

Во-вторых, это можно улучшить, добавив поддержку HTTP/2: по умолчанию в JHipster она отключена, но есть свойство jhipster.http.version , которое можно настроить на использование HTTP/2. Это решение только для JHipster, поэтому, если вы используете Spring Boot напрямую, вам придется выполнить небольшую ручную настройку.

И последнее, но не менее важное: лучшим решением здесь является использование сети доставки контента (CDN), поскольку:

  • Он обеспечит поддержку HTTP/2 “из коробки”
  • Это позволит локализовать ресурсы ближе к вашим пользователям, что приведет к повышению их производительности

Лазурный CDN

Мы собираемся использовать Azure CDN в этом посте, так как он полностью интегрирован с веб-приложением Azure и очень прост в использовании.

С точки зрения цен, это один из самых дешевых на рынке, и он стоит менее 30 долларов в месяц. Еще раз, если вы экономите на бюджете, не используйте CDN с самого начала: “обычное” приложение Spring Boot + Angular (например, созданное JHipster) действительно хорошо работает из коробки. Что важно, так это возможность масштабирования позже и добавления CDN при необходимости.

Условия для правильного использования CDN

CDN будет кэшировать все ресурсы: это означает, что после нескольких запросов к вашим серверам все запросы будут обслуживаться непосредственно из CDN и получат от этого выгоду. Это означает, что ваше приложение должно быть специально закодировано, чтобы хорошо работать с кэшем:

  • Статические ресурсы должны иметь хэш в своем названии, поэтому при выпуске новой версии клиентские браузеры будут получать новый контент.
  • Правильные HTTP-заголовки должны быть отправлены с сервера, поэтому кэшируется только нужное содержимое.
  • При выполнении HTTP-вызовов в наш сервер Spring Boot запросы не должны проходить через CDN.

Эти три условия обычно выполняются в приложениях Angular, поскольку эти лучшие практики теперь хорошо известны в сообществе. Конечно, Хипстер внимательно следил за ними, поэтому, когда вы делаете “производственную” сборку с помощью JHipster:

  • Все активы будут минимизированы и будут иметь определенный хэш в своем названии.
  • Spring Boot отправит правильные HTTP-заголовки.
  • В сборке Webpack есть параметр SERVER_API_URL , указывающий на конкретный сервер API.

Соображения CORS

Поскольку наш контент не будет обслуживаться тем же сервером, что и наши данные, у него должна быть проблема CORS (совместное использование ресурсов разных источников). Это означает, что по умолчанию ваш сервер API не будет отвечать на запросы, поступающие из другого домена: это хорошо для вашего сервера API (в противном случае им могли бы воспользоваться другие люди), но самое главное для ваших пользователей (так как это открывает двери для многих атак).

С Spring Boot у вас есть эта защита по умолчанию. Hipster предоставляет простой в использовании механизм настройки поверх него, но это просто упрощает то, что предоставляет Spring Boot.

В производстве вы должны разрешить только свое приложение Angular в параметре разрешено-происхождение ниже – мы используем * , и, таким образом, принимать запросы из любого места, здесь, так как это проще для тестов:

jhipster:
  cors:
    allowed-origins: '*'
    allowed-methods: '*'
    allowed-headers: '*'
    exposed-headers: 'Authorization,Link,X-Total-Count'
    allow-credentials: true
    max-age: 1800

Настройка CDN Azure

В своем веб-приложении Azure выберите “Сеть”, а затем “Azure CDN”.

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

Это все, что нужно сделать, теперь вы можете проверить, что все работает нормально:

  • Используя свой браузер, вы можете проверить, что теперь вы используете HTTP/2 для доступа к своему веб-приложению. Проведение аудита Chrome также должно показать, что теперь вы уважаете эту передовую практику.
  • Если вы используете JHipster, вы можете получить доступ к экрану “Показатели”, который позволяет отслеживать количество HTTP-запросов, отправленных на ваш сервер. Вы можете выполнить некоторую “принудительную перезагрузку” приложения, используя как CDN, так и веб-приложение напрямую: при использовании CDN в ваше приложение должно поступать меньше HTTP-запросов.

Изменения, внесенные в наше приложение для этого поста в блоге, все доступны в этом коммите .

Приложения Spring и Angular в Azure (серия из 7 частей)

Оригинал: “https://dev.to/azure/configuring-azure-cdn-to-boost-angular-performance-6-7-5ebe”

Читайте ещё по теме: