Выкат на боевой сервер — открытый сайт

Что такое выкат

Пока проект жил на вашем компьютере, его не видел никто, кроме вас. Выкат — это процесс «положить сайт на сервер так, чтобы он открывался по URL из интернета». Сегодня за выкат отвечают специальные платформы, и сервер не нужно настраивать руками.

Vercel — самая популярная платформа для Next.js, её делают сами создатели фреймворка. Бесплатный план включает заметный лимит трафика в месяц, неограниченное число проектов, SSL-сертификат и CDN по всему миру — для тестового запуска этого с запасом достаточно.

Важно понимать ограничение. Vercel и Neon — западные сервисы: их серверы находятся за пределами России. Для быстрого теста это удобно — бесплатно и без лишней возни. Но по 152-ФЗ первичная обработка персональных данных граждан РФ должна вестись на серверах в России, поэтому для боевого сервиса с реальными пользователями с Vercel и Neon придётся переехать на российский хостинг и российскую базу. Альтернатива для российской аудитории — Timeweb Cloud Apps: принципы те же, но серверы в РФ, оплата российской картой и российский IP, что важно для подключения к российским сервисам (T-Банк, Mail.ru, СБП). Оба варианта разберём ниже.

Шаг 1 — публикация на GitHub

Vercel деплоит из git-репозитория. Значит сначала наш код едет на GitHub.

Загрузи наш проект на GitHub.

1. Создай в моём аккаунте github.com/<имя> приватный репозиторий «ai-posts»
2. Добавь remote: git remote add origin git@github.com:<имя>/ai-posts.git
3. Запушь основную ветку: git push -u origin main
4. Проверь что .env.local в .gitignore — секреты не должны утечь

Если у меня нет SSH-ключа на github — настрой его сначала (ssh-keygen, добавь в Settings → SSH keys).

Claude Code пройдёт по шагам сам — создаст ключ, добавит на GitHub через CLI gh, запушит код. У вас в браузере появится приватный репозиторий со всем кодом проекта.

Шаг 2 — подключение Vercel

1. Откройте vercel.com → Sign Up → «Continue with GitHub»
2. Жмёте «Add New… → Project»
3. Vercel показывает список ваших GitHub-репозиториев → выбираете ai-posts
4. В настройках Vercel автоматически распознаёт Next.js → ничего не меняем
5. Раздел «Environment Variables» — копируете сюда всё содержимое .env.local: DATABASE_URL, AUTH_SECRET, OPENROUTER_API_KEY, TBANK_TERMINAL_KEY, TBANK_PASSWORD
6. Жмёте «Deploy»
7. Дожидаетесь окончания сборки — и получаете URL вида ai-posts-abc123.vercel.app

Откройте этот URL — сайт должен работать так же, как на localhost.

Шаг 3 — обновление webhook-ов

Боевой сервис подключается к T-Банку и Auth.js. Им нужен правильный URL — иначе webhook от T-Банка не дойдёт, а Auth.js не сможет вернуть пользователя после magic-link.

• Environment Variables. Обновите AUTH_URL на https://ai-posts-abc123.vercel.app и NEXT_PUBLIC_SITE_URL на тот же домен — Auth.js использует их для построения callback-ссылок в magic-link письмах.
• T-Банк → Кабинет → Магазины → ваш магазин → Уведомления. Webhook URL: https://ai-posts-abc123.vercel.app/api/payment/webhook

Без этих двух правок боевая регистрация и оплата не пройдут.

Шаг 4 — кастомный домен (опционально)

Если у вас есть собственный домен (купить можно недорого на REG.RU, Timeweb или Beget), подключается он в несколько шагов:

1. В Vercel → ваш проект → Settings → Domains
2. Вводите свой домен, например aiposts.ru
3. Vercel показывает, какие DNS-записи добавить
4. В панели регистратора домена добавляете эти записи (A или CNAME — тип зависит от инструкции Vercel)
5. Ждёте, пока обновятся DNS, — Vercel автоматически выпустит SSL-сертификат

После этого сайт работает по адресу https://aiposts.ru. Не забудьте обновить webhook-и из шага 3.

Шаг 5 — CI/CD через git push

Главная удобная функция Vercel — авто-выкат. Внесли правку, сделали git push — и она уезжает на боевой URL без ручных действий.

Стандартная схема веток для серьёзных проектов выглядит так:

• main — продакшен. Каждый push сюда уходит в боевой выкат
• feature/* (например feature/new-pricing) — рабочие ветки. На каждую Vercel автоматически создаёт preview-URL вида ai-posts-git-feature-new-pricing.vercel.app — такую ссылку можно показать клиенту до слияния в main

Для проектов в одиночку на старте можно работать сразу в main, без preview-веток. Главное — перед push следить, чтобы локально код собирался без ошибок (npm run build).

Альтернатива: Timeweb Cloud Apps

Если нужны серверы в РФ — быстрее для российских пользователей и спокойнее с санкциями — выбирайте Timeweb Cloud Apps. Принципы те же:

1. Регистрация на timeweb.cloud (российская карта работает)
2. Cloud Apps → New App → Connect GitHub → выбрать репозиторий
3. Указать build command (npm run build) и start command (npm run start)
4. Добавить environment variables
5. Deploy

Для российской аудитории у Timeweb несколько ощутимых плюсов. Оплата идёт российской картой — не нужно искать зарубежные способы. Серверы в РФ отвечают заметно быстрее, чем западные через Европу. Российский IP лучше подходит для интеграций с российскими API, часть которых блокирует западные адреса. И поддержка ведётся на русском. Платформа платная, тогда как Vercel бесплатен до больших нагрузок, поэтому для тестового запуска выгоднее Vercel, а для боевого режима под российскую аудиторию — Timeweb.

Где живут секреты на проде

Никогда не закладывайте секретные ключи в код. Все секреты должны лежать в Environment Variables на платформе. Если вы случайно закоммитили .env.local в git, действовать нужно сразу:

1. Пересоздайте все ключи (DATABASE_URL, AUTH_SECRET, OpenRouter, T-Банк — в каждом сервисе)
2. Обновите Environment Variables в Vercel/Timeweb
3. Сделайте новый коммит без .env.local
4. Очистите git-историю: git filter-repo --invert-paths --path .env.local (или попросите Claude Code сделать это)

Мониторинг и логи

После выката стоит следить за тем, что происходит на сервере. Серверные логи с вызовами API и ошибками лежат в Vercel в разделе Deployments → ваш выкат → Logs. Посещаемость по страницам показывает встроенная Vercel Analytics. А для более детального отслеживания ошибок и поведения пользователей есть отдельные сервисы — Sentry или PostHog, и Claude Code подключит их за вас. На старте без аналитики можно обойтись — главное, чтобы вы видели логи, когда что-то ломается.

Чек-лист дня 4 — что должно работать

Если вы собирали вместе с уроками — пройдитесь по списку. Каждый пункт проверяется за минуту, и вместе они означают, что каркас действительно собран:

• Сайт открывается по публичному адресу с другого устройства — например, с телефона через мобильный интернет, не из вашей Wi-Fi-сети.
• Регистрация работает: вводите email — письмо со ссылкой приходит — по ссылке попадаете в кабинет.
• ИИ-функция отвечает: вводите запрос — получаете результат, а счётчик бесплатных попыток уменьшается.
• Тестовый платёж проходит: карта 5469 9800 0000 0007 из урока про эквайринг — и после оплаты тариф меняется.
• Секретов нет в коде: файл .env.local не закоммичен в git, все ключи — в переменных окружения на платформе.

Если какой-то пункт не сходится — это нормальная часть процесса: опишите Claude Code, что именно происходит вместо ожидаемого, и попросите найти причину. Если собрать пока не получилось вовсе — тоже не страшно: день 5 не зависит от сборки, а вернуться к практике можно вторым заходом.

Что в следующем уроке

Сайт открыт в интернете, оплата работает, пользователи могут заходить — каркас ИИ-сервиса собран целиком. Дальше — пятый день: семь главных ошибок новичков в вайбкодинге и как их не совершить. Это самый дешёвый способ сэкономить недели: каждая ошибка из списка стоила кому-то реального времени и денег.