Хостинг и деплой

Что значит «выложить сайт в интернет»

Хостинг — место, где ваш код работает или хранится и доступен из интернета. Деплой — процесс, который доставляет туда новую версию кода. Файлы по FTP сегодня почти никто не загружает: вы подключаете репозиторий к платформе, и каждое опубликованное изменение автоматически запускает деплой.

Виды хостинга

Чем ниже по таблице, тем больше контроля и тем больше работы: на VPS обновления безопасности, бэкапы и перезапуски — ваша забота. Serverless не значит «без сервера», а значит, что сервером занимаетесь не вы: функция запускается по запросу, и вы платите за использование. Но у неё есть лимит времени работы, поэтому держать процесс открытым бесконечно она не может.

Что делает CDN

CDN — сеть серверов (edge) в десятках городов. Посетитель из Кишинёва получает файлы с ближайшего edge, а не с основного сервера (origin) в США.

• Кеширует статические файлы и заранее сгенерированные страницы.
• Завершает HTTPS-соединение рядом с пользователем, поэтому подключение быстрее.
• Поглощает всплески трафика и часть атак (DDoS).

У Vercel, Netlify и Cloudflare CDN уже встроен, отдельно настраивать его не нужно.

Build и runtime

Разница важна для переменных окружения: одни читаются при сборке и «замораживаются» в коде, другие читаются при каждом запросе.

Переменные окружения и секреты

API-ключи и адрес базы данных никогда не пишут в коде и никогда не коммитят в Git. Локально они лежат в .env.local (он в .gitignore), а на платформе их задают в панели (Vercel → Settings → Environment Variables) отдельно для Production, Preview и Development.

• В Next.js переменная с префиксом NEXT_PUBLIC_ копируется в JavaScript, который получает браузер, поэтому её может прочитать кто угодно. Туда кладут только публичные значения (URL сайта, ID аналитики).
• Значения NEXT_PUBLIC_ подставляются при сборке. Если поменять их в панели, нужен новый деплой, чтобы изменение появилось.
• Случайно опубликовали секрет? Удалить коммит недостаточно: отзовите ключ и создайте новый.

Подробнее — в уроке Env, сборка и деплой.

Процесс деплоя

git pushв ветку или в mainплатформа получает уведомление→сборка в CIставит пакеты и запускает npm run buildесли это ветка→preview-деплойуникальный URL, только для проверкипосле merge в main→продакшенваш домен отдаёт новую версию

CI (continuous integration) — сервер, который собирает проект и запускает проверки (тесты, линтер) при каждом push. У Vercel и Netlify он встроен; можно добавить и GitHub Actions. Про git push и ветки вы узнаете в теме Git.

Preview-деплои

Каждая ветка или pull request получает preview-деплой: отдельный URL (вроде project-git-feature-team.vercel.app) именно с этой версией. Коллеги, клиент или дизайнер проверяют её по настоящей ссылке, а продакшен остаётся нетронутым. Осторожно: preview использует переменные окружения Preview, не подключайте его к боевой базе данных.

Откат

Каждый деплой хранится как отдельная версия, которая больше не меняется. Если продакшен сломался, не чините в спешке: сделайте откат (на Vercel — Instant Rollback) к предыдущему деплою, он включается за секунды без новой сборки. Потом спокойно ищите баг. Учтите: откат возвращает код, но не данные, и миграция базы данных останется применённой.

Свой домен и HTTPS

Добавьте домен на платформе (Settings → Domains), затем добавьте DNS-записи, которые она покажет. Все шаги, включая вариант с Cloudflare, — в уроке Домены и DNS. HTTPS-сертификат выпускается и продлевается автоматически (обычно через Let's Encrypt), как только DNS указывает на платформу.

Логи и мониторинг

• Логи сборки: почему деплой не прошёл (ошибка типов, нет пакета).
• Runtime-логи: ошибки функций в продакшене, запрос за запросом.
• Uptime-монитор (UptimeRobot, Better Stack): пришлёт письмо, когда сайт упадёт.
• Отслеживание ошибок (Sentry): собирает ошибки из браузеров пользователей вместе с контекстом.
• Аналитика и Web Vitals: насколько быстр сайт для реальных пользователей (см. Производительность).

Стоимость и бесплатные тарифы

Для личного проекта бесплатных тарифов обычно хватает. Следите за:

• Бесплатный тариф Vercel (Hobby) — только для личного некоммерческого использования.
• На платных тарифах ставьте лимиты расходов и оповещения: атака или бот могут накрутить большой счёт.
• Узнайте, что будет при превышении: одни платформы приостанавливают сайт, другие берут доплату.

Коротко

• Статика/CDN для простых сайтов, serverless-платформы для Next.js, VPS или контейнеры, когда нужен контроль.
• Секреты хранятся в панели платформы, а не в Git; NEXT_PUBLIC_ попадает в браузер и фиксируется при сборке.
• Push → сборка → preview → продакшен; если что-то сломалось, сначала откат, потом исправление.

Официальные источники

• Next.js — Deploying
• Next.js — Environment Variables
• Vercel — Deployments
• Vercel — Instant Rollback
• MDN — What is a CDN?