Как устроить сборку и выкатку фронтенда?
- Как кэшировать статические файлы фронтенда после деплоя?
- Что такое preview-окружения?
Пайплайн: установка по lock-файлу → линтер и типы → тесты → сборка → проверки размера → preview-окружение на каждый PR → выкатка. Статика с хешами в именах кэшируется надолго на CDN, а index.html — коротко или с проверкой, чтобы пользователи получали новую версию. Переменные окружения сборки попадают в бандл — секретам там не место.
- Preview-окружения: дизайнер и продакт смотрят изменения до слияния
- Старые файлы держать после выкатки — открытые вкладки ещё загружают старые чанки
- Откат — переключение на предыдущую сборку, а не пересборка
А ещё Для SSR-приложений выкатка — как у бэкенда: контейнеры, rolling update, совместимость с API
Подробно
Кэширование:
| файл | заголовок |
|---|---|
assets/app.4f2a9c.js | Cache-Control: public, max-age=31536000, immutable |
index.html | Cache-Control: no-cache |
Ошибка загрузки чанка после выкатки: вкладка с прошлой версией запрашивает удалённый файл. Решения — хранить прошлые сборки, перезагрузка при ошибке загрузки чанка.
Конфигурация по окружениям: одна сборка, конфиг загружается в рантайме — тот же артефакт идёт на стейдж и в прод.
Что хотят услышать
- Этапы пайплайна и preview.
- Стратегия кэширования статики.
- Секреты, откат и ошибки загрузки чанков.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Секреты можно передавать через переменные окружения сборки — в итоговый бандл они не попадут никогда
- ✓Установка по lock-файлу, линтер, тесты, сборка, preview на PR; хеш-ресурсы кэшируют надолго
- ✗index.html кэшировать на год, как и ресурсы с хешами в именах
- ✗Preview-окружения не нужны, достаточно проверки после выкатки
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.