Сайт-портфолио, который сам подтягивает правки из Figma

Проблема бизнеса

Что было сломано.

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

Дизайн-решения

Как я это сделал.

1. 01

   Сервер сам ходит в Figma REST по узлу макета, отдаёт свой адрес, а не временную ссылку Figma. Кэш живёт пять минут даже без вебхука, поэтому частые правки не ждут получаса.

2. 02

   Формат по умолчанию сменил с SVG на PNG в двойном разрешении: тот же экран с тремя фотографиями весил девять мегабайт вместо семисот килобайт.

3. 03

   Широкая доска с несколькими экранами разбирается на объекты по дереву узлов Figma, а не рендерится одной картинкой с серой подложкой.

4. 04

   При сборке рядом с каждым PNG и JPG генерируется AVIF, nginx отдаёт его тем браузерам, что его понимают, по заголовку Accept.

5. 05

   Заголовки CSP, HSTS и остальные выставлены в конфиге Next, а не в middleware: прошлогодняя уязвимость показала, что middleware обходится подделкой одного заголовка запроса.

Передача в разработку

Что отдаю фронтенду.

• ·Скрипт генерации AVIF встроен в команду сборки, новые картинки обрабатываются сами.
• ·Отдельная зона nginx на вход в админку с лимитом попыток, чтобы подбор пароля упирался в 429.
• ·fail2ban на повторяющиеся 429 и на неудачные входы, банит адрес на уровне брандмауэра.