Архитектура ИИ-сайта с подпиской — из чего собирать
Тема 4/5: День 4. Доходный ИИ-сервис — собираем с нуля → Урок 1/7
Прежде чем кодить — карта местности. Разбираем, из каких блоков состоит современный ИИ-сайт с подпиской, как они связаны и зачем нужен каждый. После этого урока станет понятно, какие части мы собираем в следующих уроках и почему именно в таком порядке.
Сразу честно о том, что нас ждёт в четвёртый день. За день мы соберём работающий каркас ИИ-сервиса: главную, тарифы, регистрацию по email, ИИ-функцию, приём оплаты и выкат на боевой сервер. Это будет реально работающий сайт, к которому можно подключиться по интернету. Но важно сразу обозначить границу: это каркас, а не готовый к продаже клиентам сервис.
Чтобы из каркаса получился сервис, за который не страшно брать деньги, придётся закрыть ещё многое: юридическую часть (152-ФЗ, оферту, чеки), корректную кредитную систему без двойных списаний и потерянных платежей, мобильную адаптацию, защиту от сбоев ИИ-провайдера, переезд с Vercel на российский хостинг и десятки других деталей. Этот путь проходится не за один день, а постепенно — ему посвящён платный курс.
Зачем тогда собирать каркас за день? Чтобы своими руками увидеть, как ИИ-сервис устроен изнутри. Когда понятно, как складывается базовый блок, становится ясно и то, во что именно вкладываешься дальше. Без этого ощущения решение «строить свой сервис» остаётся абстрактным.
Что значит «доходный сайт»
Обычный сайт — это статичный лендинг: пользователь заходит, читает, в лучшем случае оставляет заявку. Доходный сайт устроен иначе — он сам приносит деньги через подписку или разовую оплату за услугу. Пользователь регистрируется, платит и получает доступ к ИИ-функции внутри.
Минимальная архитектура такого сайта складывается из нескольких частей. Главная (лендинг) объясняет, что предлагает сервис, кому и сколько он стоит. Тарифы показывают варианты подписки и кнопки оплаты. Регистрация и вход отвечают за авторизацию пользователя, а личный кабинет — это место, где он пользуется ИИ-функцией. Оплата принимает деньги через эквайринг. И наконец, админка нужна уже вам — посмотреть пользователей, их активность и доход.
Технический набор технологий
| Часть | Чем делать | Зачем |
|---|---|---|
| Интерфейс + Серверная часть | Next.js 16 | Один фреймворк для страниц и API. Не нужно держать два проекта |
| Стили и UI | Tailwind v4 + shadcn/ui | Готовые компоненты, не пишем CSS вручную |
| База данных | Postgres + Prisma (ORM) | Хранение пользователей, подписок, истории |
| Авторизация | Auth.js (magic-link) | Регистрация по email без паролей. Безопасно и просто |
| ИИ | OpenRouter → Claude / GigaChat / GPT | Шлюз к моделям, работает с российских карт |
| Платежи | T-Банк Эквайринг | Приём оплат от РФ-клиентов, подписки |
| Выкат | Vercel | Бесплатно, домен в подарок, авто-выкат из GitHub |
Этот набор технологий — стандартный для современных ИИ-сервисов. На таком же стеке работают многие российские ИИ-стартапы, и именно его мы собираем по частям в следующих уроках.
Как всё связано
Проще всего увидеть архитектуру через путь пользователя. Он открывает сайт, читает лендинг, нажимает «Начать бесплатно», вводит email и получает magic-link на почту. По ссылке из письма он попадает в личный кабинет и начинает пользоваться ИИ-функцией. Через несколько использований он упирается в лимит бесплатного плана, жмёт «Купить Pro», оплачивает через T-Банк — и его тариф обновляется в базе данных, после чего ограничение снимается.
За каждым из этих шагов стоит своя техническая часть. Лендинг — это статические страницы на Next.js, которые рендерятся на сервере ради SEO. Регистрация держится на Auth.js: библиотека присылает magic-link, пользователь кликает по нему и попадает в кабинет уже с авторизованной сессией. ИИ-функция устроена чуть сложнее: интерфейс шлёт запрос на собственный API (Next.js API route), API проверяет авторизацию и лимиты через Auth.js, и только если всё в порядке — идёт в OpenRouter и возвращает результат. Оплата работает по схеме с webhook: интерфейс инициирует платёж через T-Банк API, пользователь платит на странице банка, T-Банк присылает уведомление (webhook) на ваш API, а тот обновляет тариф пользователя.
Сколько стоит держать сервис в воздухе
На старте инфраструктура почти ничего не стоит, и это важно понимать заранее. Бесплатных планов Vercel и Neon хватает для первых пользователей, домен обходится в сотни рублей в год, а за ИИ-генерации через OpenRouter вы платите по факту — только за реально потраченные токены. Единственная регулярная статья — комиссия T-Банка с каждого реального платежа. Конкретные цифры по моделям и эквайрингу разберём в соответствующих уроках, когда дойдём до подключения сервисов.
Что не входит в минимальный набор
Отдельно стоит сказать, чего на старте делать не нужно, потому что новички часто закапываются именно здесь. CDN, Redis и Elasticsearch для первых пользователей избыточны. Kubernetes, Docker и микросервисы тоже не нужны — Next.js на Vercel закрывает почти все задачи самостоятельно. Своя инфраструктура не требуется, потому что платформа сама хостит и масштабирует проект. Платный аналитический инструмент можно отложить: на старте достаточно встроенной аналитики и Telegram-бота для уведомлений. И дизайнер не обязателен — shadcn/ui даёт аккуратные компоненты сразу из коробки.
Принцип здесь один: сначала минимум, потом улучшать. Многие тратят месяцы на «правильную архитектуру» и так и не запускаются. Наша задача в этих уроках обратная — собрать рабочий каркас, а доводить до ума уже то, что реально работает.
Тематика для нашей сборки
Чтобы можно было собирать сервис параллельно с уроками, мы берём одну конкретную тематику — ИИ-генератор постов для Telegram-каналов. У неё универсальная боль (владельцев каналов много), небольшой технический объём и понятная монетизация.
Если у вас своя тематика — собирайте её параллельно, заменяя только промпт ИИ-функции. Архитектура и набор технологий остаются теми же.
Что в следующем уроке
Следующий урок — создание Next.js проекта через Claude Code. Одна команда — и готов скелет проекта с Tailwind, shadcn и всем необходимым для старта.