Этап 16 из 19 · ≈ 4 ч

Сборка и выкатка

Основа с Junior

Пайплайн, preview-окружения, кэширование статики, конфигурация и откат.

Что важно знать

  • Пайплайн: lock-файл → линтер и типы → тесты → сборка → проверки размера → выкатка.
  • Хеши в именах и долгий кэш для статики, no-cache для index.html.
  • Preview на каждый PR — дизайнер и продакт смотрят до слияния.
  • Одна сборка на все окружения: конфигурация загружается в рантайме.
  • Переменные сборки публичны — никаких секретов.
  • Откат — переключение на прошлую сборку за секунды.

Критерии освоения

Junior ≈ 4 ч

  • Настраивает CI с линтером, типами, тестами и сборкой для своего проекта
  • Выкладывает статический фронтенд на хостинг или CDN

Практика. Настроить GitHub Actions или GitLab CI для своего проекта с проверками и автоматической выкаткой на хостинг.

Middle ≈ 6 ч

  • Настраивает кэширование статики с хешами и короткий кэш index.html
  • Делает preview-окружение на каждый PR и откат на предыдущую сборку
  • Обрабатывает ошибку загрузки чанка после выкатки

Практика. Добавить preview на каждый PR, правильные заголовки кэширования и сценарий отката, проверить поведение открытой вкладки после новой выкатки.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Как устроить сборку и выкатку фронтенда?Middle

Пайплайн: установка по lock-файлу → линтер и типы → тесты → сборка → проверки размера → preview-окружение на каждый PR → выкатка. Статика с хешами в именах кэшируется надолго на CDN, а index.html — коротко или с проверкой, чтобы пользователи получали новую…

Полный разбор
Из каких этапов состоит CI/CD-пайплайн и чем continuous delivery отличается от continuous deployment?Junior

CI — каждое изменение автоматически собирается и проверяется: сборка, линтеры, юнит-тесты, сканирование, сборка артефакта (образа). CD: continuous delivery — артефакт всегда готов к выкатке, на прод — по кнопке; continuous deployment — каждое прошедшее…

Полный разбор
Что такое npm-скрипты и npx?Junior

Раздел scripts в package.json — именованные команды проекта: npm run dev, npm run build, npm test. В скриптах доступны бинарники из node_modules/.bin без указания пути — поэтому инструменты ставят локально в devDependencies, а не глобально: у всех одинаковые…

Полный разбор
Зачем нужен lock-файл (package-lock.json, pnpm-lock.yaml) и чем npm install отличается от npm ci?Junior

package.json задаёт диапазоны версий (^1.2.0), а lock-файл фиксирует точные версии всего дерева зависимостей — у всех разработчиков и в CI ставится одно и то же. Lock-файл коммитят. npm install может обновить lock в рамках диапазонов; npm ci ставит строго по…

Полный разбор
Зачем нужны ESLint и Prettier и как их подключить к проекту?Junior

ESLint — линтер: находит ошибки и опасные конструкции (неиспользуемые переменные, нарушение правил хуков, сравнение через ==). Prettier — форматтер: единообразно расставляет отступы, кавычки, переносы, без споров о стиле. Настраивают в репозитории, запускают…

Полный разбор
Что такое source maps и как их использовать в продакшене?Middle

Source map — файл соответствия собранного (минифицированного, склеенного) кода исходному: строка 1, столбец 48231 в index-3f2a.js → Cart.tsx:42. Браузерные DevTools и системы сбора ошибок (Sentry и аналоги) по нему показывают исходный стек ошибки. В…

Полный разбор

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

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

Разбор собеседования