Найти в Дзене
лИИкбез

CI/CD Next.js SSR приложения

Технологии не стоят на месте, и JavaScript уже требуется запускать не на стороне клиента, а на сервере. Так появляется технология Server Side Rendering (SSR), призванная не нагружать компьютер пользователя, и оптимизировать SEO выдачу. Какие изменения это несёт для DevOps инженера? Общая схема На схеме выше приведён пример деплоя Next.js приложения в облако AWS. Как мы видим запросы на основной домен https://example.com попадают напрямую в балансировщик нагрузки и приложение в контейнерах ECS за ним. При этом запрос статических файлов вынесен на домен https://static.example.com который отправляет запросы в Content Delivery Network (CDN) Cloudfront с файлами в S3 хранилище. Так как Дзен плохо поддерживает подсветку синтаксиса, продолжение статьи по ссылке в блоге.
Оглавление

Технологии не стоят на месте, и JavaScript уже требуется запускать не на стороне клиента, а на сервере. Так появляется технология Server Side Rendering (SSR), призванная не нагружать компьютер пользователя, и оптимизировать SEO выдачу.

Какие изменения это несёт для DevOps инженера?

  • Нельзя всё сбилдить в статику. Если раньше React.js можно было скомпилировать в статичные файлы и загрузить на CDN, то теперь необходимо иметь отдельно и статическую и динамическую часть.
  • Нельзя всё кешировать. Кеш перед страницами сайта приведёт к сбоям в работе сайта в целом.
  • Как итог предыдущих пунктов - необходимость разного деплоя разных частей приложения.

Общая схема

Next.js SSR AWS ECS deploy
Next.js SSR AWS ECS deploy

На схеме выше приведён пример деплоя Next.js приложения в облако AWS.

Как мы видим запросы на основной домен https://example.com попадают напрямую в балансировщик нагрузки и приложение в контейнерах ECS за ним. При этом запрос статических файлов вынесен на домен https://static.example.com который отправляет запросы в Content Delivery Network (CDN) Cloudfront с файлами в S3 хранилище.

Так как Дзен плохо поддерживает подсветку синтаксиса, продолжение статьи по ссылке в блоге.