Деплой и инфраструктура
Тема дорожной карты · Frontend разработчик
Развёртывание frontend — это процесс сборки, упаковки и публикации статических и серверных ресурсов веб-приложения, чтобы конечные пользователи могли получать к ним надёжный и высокопроизводительный доступ. Типичный продакшн-конвейер развёртывания frontend запускает pnpm build (Vite или Webpack) для генерации папки dist/, затем копирует результат на CDN, объектное хранилище (S3-совместимое) или сервер с Nginx или Node.js-рантаймом. Стратегии развёртывания — blue-green деплои, канареечные релизы и неизменяемая инфраструктура (Docker-контейнеры) — минимизируют простой и позволяют откат при появлении регрессий в релизе. CI/CD-платформы вроде GitHub Actions автоматизируют весь жизненный цикл развёртывания: проверку типов TypeScript, линтинг ESLint, Playwright end-to-end тесты и аудиты Lighthouse до того, как артефакт сборки попадёт в продакшн.
Как это работает
Деплой и инфраструктура frontend'ов варьируется от статичного хостинга (Cloudflare Pages, Netlify, Vercel, GitHub Pages, S3 + CloudFront) до полного SSR-хостинга (Vercel, AWS Amplify, self-hosted Node + nginx). Build-артефакт: статичная dist/ (для SPA/SSG) или server-бандл (для SSR). CDN перед статикой — обязателен: кеши на edge-нодах дают почти ноль latency глобально. Atomic deploys (заливка новой версии + атомарное переключение) избегают half-state в середине деплоя.
Когда применять
Static-first хостинг (Cloudflare Pages, Netlify) — для SPA/SSG: дешевле и быстрее. Vercel или self-hosted node+nginx — когда нужен SSR. Для RF / суверенности — self-host на Yandex Cloud + Caddy/nginx; есть managed российские альтернативы (Selectel, VK Cloud). Preview deploys per PR — ревьюьте реальное собранное приложение, не только diff.
Типичные ошибки
Ловушки Деплой и инфраструктура: долго закешированный HTML указывает на версионированный JS, который удалили (белая страница после деплоя — TTL HTML-кеша = 0 или atomic deploys); API-ключи в клиентском JS ("они же публичные" — да, но rate-limit-атаки становятся лёгкими); нет SPA-fallback (deep links 404); забытый stale CDN-кеш. Тестируйте задеплоенный сайт, не только localhost.