Форум RelaxDev
Задавайте вопросы, делитесь опытом и помогайте другим
Telegram Чат
Быстрые ответы и обсуждения в реальном времени
Telegram Канал
Новости платформы и важные анонсы
Превью-окружения: как проверять ветку, не ломая продакшн
Разбираем, зачем нужен отдельный стенд на каждую ветку, как устроены превью в RelaxDev и почему общая база данных с продакшном — плохая идея. Превью-окружения: как проверять ветку, не ломая продакшн Есть один сценарий, который повторяется в каждой команде. Разработчик доделал фичу, надо показать её заказчику. Вариантов ровно два: выкатить на боевой сайт и надеяться, либо слать скриншоты и объяснять словами, что там на самом деле происходит при клике. Оба плохие. Первый — потому что боевой сайт перестаёт быть боевым, он становится стендом. Второй — потому что заказчик по скриншотам не поймёт ничего и всё равно попросит «дать посмотреть». Превью-окружения решают именно это. Что это такое Превью — отдельная копия проекта, собранная из другой ветки и запущенная в собственном контейнере на собственном адресе. Продакшн при этом продолжает работать на прежнем образе. Не «откатывается», не «приостанавливается» — просто не замечает происходящего. Выглядит это так: у проекта с боевым доменом появляется адрес вида , где живёт ветка . Обычная ссылка, обычный HTTPS. Её можно отправить кому угодно, доступ в панель для этого не нужен. Чем это отличается от staging Staging обычно один. Он общий, за него дерутся, на нём всегда лежит чья-то недоделанная ветка, и «а можно я на пять минут задеплою» — это отдельный жанр переписки в рабочем чате. Превью создаются на каждую ветку и живут независимо. Две задачи в работе — два адреса, которые друг о друге не знают. Никакой очереди. Второе отличие: staging надо поддерживать. Кто-то должен следить, чтобы он не разошёлся с продакшном по версиям, переменным и конфигурации. Превью собирается тем же билдером и из тех же настроек, что и боевой деплой, поэтому расходиться ему особо негде. Главная ловушка: общая база данных Тут начинается самое интересное, и это та часть, которую в статьях про превью обычно проговаривают вскользь. Проще всего сделать так, чтобы превью подключалось к боевой базе. Ничего не надо создавать, переменные копируются как есть, всё сразу работает. И для проверки вёрстки или новой страницы этого действительно достаточно. Но стоит ветке содержать миграцию — и она выполнится на продакшн-данных. Не на копии, не на тестовой базе. На тех самых записях, которыми пользуются клиенты. Причём выполнится тихо, в момент старта контейнера, и заметите вы это не сразу. Поэтому в RelaxDev режим базы для превью переключается явно, и мы советуем режим «своя база, только схема». В нём для превью создаётся отдельная база со структурой продакшна, но без единой записи. Приложение при старте накатывает миграции и сиды само — так, как оно это делает на чистой машине разработчика. Боевые данные при этом физически недостижимы. Есть и режим с полной копией данных, но он честно предупреждает: копия большой базы создаётся долго и занимает место. Для большинства задач схема без данных подходит лучше. Когда превью удаляется, его база удаляется вместе с ним. Отдельно прибираться не нужно. Переменные окружения Второй по частоте способ выстрелить себе в ногу — боевые ключи в превью. Тестовая ветка отправляет реальные письма реальным пользователям, дёргает боевой платёжный шлюз, пишет в продакшн-хранилище. Пока для превью не задан свой набор переменных, оно наследует продакшновые — это удобно для старта, но временно. Одна кнопка создаёт независимую копию, в которой можно подменить ключи на тестовые. Переменные задаются либо для всех превью сразу, либо для конкретной ветки — второе перекрывает первое. Полезно, когда одна ветка ходит в отдельный сторонний сервис, а остальные нет. Отдельная деталь, которая экономит нервы: если в продакшн добавилась переменная, которой нет в превью, панель это показывает и предлагает дописать её одной кнопкой. Иначе списки расходятся незаметно, и превью падает на пустом через две недели после того, как кто-то добавил ключ. Уборка Забытые стенды — отдельная беда. Их создают, смотрят один раз и не удаляют, а они продолжают занимать память и диск. Поэтому превью живёт 72 часа. Отсчёт обновляется при каждой пересборке: пока над веткой работают, окружение не денется никуда. Как только работа остановилась — контейнер, образ и база удаляются автоматически. Удалить раньше можно кнопкой. Ещё пара мелочей, которые оказались полезными Старая версия отдельным превью. В истории деплоев у каждой записи есть кнопка, поднимающая этот коммит как превью. Это удобнее отката: сначала смотрите старую версию на отдельном адресе, сравниваете, потом решаете, возвращаться ли. Продакшн всё это время работает. Слияние из панели. Проверили ветку — сливаете её в продакшн, не переходя в интерфейс Git-провайдера. Перед слиянием видно, сколько коммитов впереди и сколько файлов затронуто. Дальше срабатывает обычный автодеплой. Закрыто от поиска. Все превью-адреса отдаются с . Дублей вашего сайта в выдаче не появится — иначе поисковик рано или поздно найдёт стенд и начнёт показывать его вместо основного домена. Доступно редакторам. Создать превью может любой участник команды с ролью редактора, а не только владелец проекта. Собственно, ради этого всё и затевалось: разработчик поднимает свою ветку сам и делится ссылкой, не дёргая никого. Чего превью не умеют Telegram-ботов превью не поднимают, и это осознанно: два экземпляра бота с одним токеном начинают драться за получение обновлений, и работающий бот ломается. Для ботов нужен отдельный токен на каждую среду — пока это делается руками. Слияние веток из панели работает для GitHub. Сами превью создаются из GitHub, GitLab, GitVerse и GitFlic одинаково, а вот для слияния у остальных провайдеров пока используется их собственный интерфейс. Как попробовать Откройте вкладку «Окружения» в любом проекте, развёрнутом из Git, выберите ветку и нажмите «Создать». Через одну-три минуты адрес будет готов. Превью доступны на всех тарифах, включая бесплатный. Подробности в документации, вопросы и пожелания — на форуме.
О режимах деплоя в Vercel
Деплой в Vercel В Vercel существует три основных режима развертывания: Production (Продакшн), Preview (Превью) и Development (Разработка). Они представляют собой изолированные среды с разными целями, конфигурациями и жизненным циклом. Preview Mode (Режим превью) Это главная особенность рабочего процесса Vercel, предназначенная для проверки изменений до их попадания к пользователям. Как работает: Каждый раз, когда вы отправляете коммит в ветку, отличную от основной (например, main или production), или создаете Pull Request на GitHub/GitLab/Bitbucket, Vercel автоматически создает полноценное независимое развертывание. Ему присваивается уникальный URL вида https://my-project-git-feature-username.vercel.app. Особенности интеграции с CMS: Для работы с headless CMS (Contentful, Sanity, Strapi) это критически важно. В настройках проекта можно задать разные переменные окружения: -- Production: использует токен доступа к опубликованному контенту. -- Preview: использует токен доступа к черновикам. Это позволяет редакторам открывать ссылку из PR и видеть не только новые компоненты кода, но и неопубликованные статьи прямо в реальном интерфейсе сайта через Draft Mode. Изоляция: Каждое превью-развертывание имеет свой собственный CDN-кэш, серверные функции и логи. Оно никак не влияет на основную версию сайта и другие открытые PR. Если у вас открыто 10 пулл-реквестов, будет работать 10 независимых версий приложения. Автоматизация: Ссылки на эти деплои автоматически публикуются в комментариях к вашему Pull Request, что упрощает ревью дизайнерам, тестировщикам и менеджерам продукта. Production Mode (Продакшн) Это живая версия вашего сайта, которую видят конечные пользователи. Как работает: Развертывание срабатывает при слиянии (merge) ветки в основную (по умолчанию — main) или при ручном запуске команды vercel --prod. После успешного билда Vercel атомарно переключает ваш рабочий домен (например, mysite.com) на новую версию. Производительность: Версия оптимизирована под максимальную скорость. Статические страницы лежат на глобальном Edge-сети Vercel. Время ответа сервера (TTFB) обычно составляет менее 50 мс по всему миру. Переменные окружения: Используются боевые API-ключи, платежные шлюзы и токены опубликованного контента. Ошибочные данные здесь могут привести к реальным финансовым или репутационным потерям. Development Mode (Локальная разработка) Это режим работы на вашем компьютере (localhost). Как работает: Запускается командой next dev (для Next.js) или vercel dev. Он эмулирует среду выполнения Vercel (серверless-функции, middleware) локально. Отличия: -- Код перезагружается мгновенно при сохранении файлов (Hot Reload). -- Доступны детальные ошибки сборки и стектрейсы прямо в терминале и браузере. -- Переменные подтягиваются из файла .env.local, который никогда не попадает в репозиторий. Сводная таблица отличий |Параметр |Development |Preview |Production| |---|---|---|---| |Где исполняется |Локальный компьютер разработчика |Облако Vercel (изолированный инстанс) |Облако Vercel (основной домен)| |Триггер создания |Команда vercel dev / next dev |Пуш в feature-ветку, создание PR |Мерж в main или команда vercel --prod| |URL |localhost:3000 |Уникальный авто-генерируемый URL |Ваш кастомный домен (yoursite.com)| |Цель |Написание и отладка кода |Ревью кода, QA, согласование с заказчиком |Работа реальных пользователей| |Переменные env |Локальные (.env.local) |Черновики CMS, песочницы внешних API |Боевые ключи, опубликованный контент CMS| |Кэширование |Отключено или минимальное |Полноценный edge-кэш (сбрасывается при новом коммите) |Долговременный агрессивный кэш + ISR| Как они работают вместе (типичный workflow) Разработчик пишет код локально (Development). Закончив задачу, он пушит ветку в GitHub. Vercel тут же строит Preview. Тестировщик проверяет функционал, а редактор контента убеждается, что новая статья выглядит корректно в верстке еще до публикации. После одобрения изменения сливаются в main. Vercel собирает Production и обновляет живой сайт за несколько секунд без простоя.
Технический mail
Было бы замечательно, если бы Ваша платформа автоматически предоставляла бы при деплое в прод технический почтовый адрес вида admin@somedomain.zone с приемом и пересылкой, можно (и лучше) без БД , без всяческих web-интерфейсов, чисто как inbound релей.. Многие хостеры автоматически предоставляют технический email, это очень удобно: не надо городить дополнительные точки отказа в виде интеграций с разными WorkMail, Yandex360, CloudFlare, ImproveMX и т.д. если мой проект не предполагает полноценной почты, если это банальный лендинг какой. Не думаю что это представляет для RD (RelaxDev) какие-то технические проблемы: Если вы сподобились соорудить свой CDN, и не абыкакой, а аж S3 - класса, то уж прикрутить почтовый релей это для вас - задача на неделю с перекурами. Возможно, есть какие-то высшие препоны, может РКН не велит..
Изолированные инстансы на RelaxDev
Я совсем недавно открыл для себя этот замечательный RelaxD. Во всех подробностях еще не до конца разобрался, но после исхода с Vercel не хватает изолированных сред Production, Preview, Development. Понятно, что это не главное и можно решить врукопашную, но в Vercel это хорошо автоматизировано. Есть ли в планах реализация чего-то подобного?
... о версии Node.js на хостинге
судя по всему, по умолчанию система ставит Node 20.. и package ей не указ. по крайней мере, я не нашел способов изменить это. есть способы ставить версии новее?
GitFlic на RelaxDev: перенос репозиториев, подключение по токену и вход через OAuth
GitFlic теперь полностью поддерживается на RelaxDev Мы завершили интеграцию с GitFlic — российской платформой для хранения кода. Теперь GitFlic работает на RelaxDev на равных с GitHub, GitLab и GitVerse. Что доступно Перенос репозитория в один клик. Если ваш проект сейчас на GitHub, GitLab или GitVerse — на странице настроек проекта появится карточка "Перенести в GitFlic". Она зеркально скопирует репозиторий, включая всю историю коммитов и ветки, в ваш аккаунт GitFlic. Исходный репозиторий при этом не трогается — можно продолжать работать откуда удобно и синхронизировать изменения в любой момент. !image.png Подключение личным токеном. В настройках профиля можно вставить Personal Access Token из GitFlic — быстрый способ для тех, кто предпочитает не давать платформе OAuth-доступ. Вход через GitFlic. Теперь можно авторизоваться на RelaxDev напрямую через аккаунт GitFlic — без создания отдельного пароля. Зачем это нужно RelaxDev изначально ориентирован на инфраструктуру, которая целиком работает на российских серверах и сервисах. Поддержка GitFlic — ещё один шаг к тому, чтобы весь цикл разработки, от хранения кода до деплоя, можно было держать внутри страны, без зависимости от зарубежных площадок. Как начать Зайдите в настройки профиля → раздел "Подключенные аккаунты" Нажмите "Войти через GitFlic" (полный OAuth-доступ) или вставьте персональный токен Откройте нужный проект → вкладка "Настройки" → нажмите "Перенести в GitFlic" !image.png Обратная связь и вопросы — как всегда, через форму поддержки.
Настройка SEO для сайта на Next
SEO для Next.js на RelaxDev — полный гайд Всё что нужно сделать чтобы сайт попал в поисковики. Специфика Next.js App Router — robots и sitemap через TypeScript файлы в папке , файлы верификации — в . robots.txt Создайте — Next.js автоматически отдаст его по адресу : [код] Проверка: откройте — должен открыться как текст со списком правил. sitemap.xml Создайте : [код] С динамическим контентом из БД (Prisma): [код] Проверка: откройте — должен открыться XML со списком страниц. Закрыть закрытые страницы от индексации Страницы с авторизацией и личными данными нельзя пускать в поисковики. В Next.js App Router закрыть целый раздел можно одной строкой в — тогда все вложенные страницы автоматически получат : [код] Это закрывает , , и всё что внутри сразу. Для отдельных страниц — то же самое в : [код] Проверить что страница закрыта можно в браузере через → найти . Или через Google Search Console → Проверка URL. Подтверждение сайта Шаг 1 — скачать файл верификации В Google Search Console и Яндекс Вебмастер выберите метод «HTML-файл» и скачайте файл. Шаг 2 — положить в public/ [код] Файлы из доступны по корневому URL автоматически — никакой настройки не нужно. После деплоя откроется сразу. Шаг 3 — задеплоить и подтвердить Закоммитить файлы → задеплоить Нажать «Подтвердить» в панели каждого поисковика Яндекс.Метрика — ускоряет индексацию Счётчик Метрики не просто аналитика — Яндекс заметно быстрее индексирует сайты где он установлен, потому что видит реальный трафик. Без счётчика индексация может занять 1–2 недели, с ним — 1–3 дня. [код] Где — номер счётчика из metrika.yandex.ru. Отправить Sitemap в индексацию Самый важный шаг — без этого поисковики могут неделями не находить страницы. Google Search Console: Индексирование → Файлы Sitemap → Добавить → Отправить Яндекс Вебмастер: Индексирование → Файлы Sitemap → Добавить → → Добавить Чеклист открывается открывается с нужными страницами Закрытые разделы (, ) имеют HTML-файлы верификации в и задеплоены Сайт подтверждён в Google Search Console Сайт подтверждён в Яндекс Вебмастер Счётчик Яндекс.Метрики установлен Sitemap отправлен в обе панели в разделе Индексирование Сроки: Google ~1–7 дней, Яндекс ~1–3 дня (быстрее если есть Метрика). Вопросы — пишите в комментарии 👇
🛡️ Скрыты ли проекты и поддомены от индексации?
Да — по умолчанию всё скрыто. Ни Яндекс, ни Google не проиндексируют ваш проект без вашего ведома. Защита работает на трёх уровнях: Уровень 1 — Страница проекта на платформе () Приватные проекты закрыты через метаданные Next.js прямо в коде: [код] Публичные проекты () — индексируются и попадают в витрину . Это ваш выбор. Уровень 2 — Технический поддомен () Traefik автоматически добавляет заголовок ко всем ответам на : [код] Срабатывает до того, как поисковик прочитает HTML. Уровень 3 — robots.txt платформы Системные разделы дополнительно закрыты: [код] Итог | Что | Индексация | |---|---| | (приватный) | ❌ закрыто | | (публичный) | ✅ на ваш выбор | | (тех. домен) | ❌ закрыто всегда | | (свой домен) | ✅ без ограничений | 💡 Хотите индексацию — привяжите свой домен или сделайте проект публичным. Если нужно открыть конкретный поддомен — пишите в поддержку.
Настройка сайта для SEO
SEO для Next.js на RelaxDev — полный гайд Всё что нужно сделать чтобы сайт попал в поисковики. Специфика Next.js App Router — robots и sitemap через TypeScript файлы в папке , файлы верификации — в . robots.txt Создайте — Next.js автоматически отдаст его по адресу : [код] Проверка: откройте — должен открыться как текст со списком правил. sitemap.xml Создайте : [код] С динамическим контентом из БД (Prisma): [код] Проверка: откройте — должен открыться XML со списком страниц. Закрыть закрытые страницы от индексации Страницы с авторизацией и личными данными нельзя пускать в поисковики. В Next.js App Router закрыть целый раздел можно одной строкой в — тогда все вложенные страницы автоматически получат : [код] Это закрывает , , и всё что внутри сразу. Для отдельных страниц — то же самое в : [код] Проверить что страница закрыта можно в браузере через → найти . Или через Google Search Console → Проверка URL. Подтверждение сайта Шаг 1 — скачать файл верификации В Google Search Console и Яндекс Вебмастер выберите метод «HTML-файл» и скачайте файл. Шаг 2 — положить в public/ [код] Файлы из доступны по корневому URL автоматически — никакой настройки не нужно. После деплоя откроется сразу. Шаг 3 — задеплоить и подтвердить Закоммитить файлы → задеплоить Нажать «Подтвердить» в панели каждого поисковика Яндекс.Метрика — ускоряет индексацию Счётчик Метрики не просто аналитика — Яндекс заметно быстрее индексирует сайты где он установлен, потому что видит реальный трафик. Без счётчика индексация может занять 1–2 недели, с ним — 1–3 дня. [код] Где — номер счётчика из metrika.yandex.ru. Отправить Sitemap в индексацию Самый важный шаг — без этого поисковики могут неделями не находить страницы. Google Search Console: Индексирование → Файлы Sitemap → Добавить → Отправить Яндекс Вебмастер: Индексирование → Файлы Sitemap → Добавить → → Добавить Чеклист открывается открывается с нужными страницами Закрытые разделы (, ) имеют HTML-файлы верификации в и задеплоены Сайт подтверждён в Google Search Console Сайт подтверждён в Яндекс Вебмастер Счётчик Яндекс.Метрики установлен Sitemap отправлен в обе панели в разделе Индексирование Сроки: Google ~1–7 дней, Яндекс ~1–3 дня (быстрее если есть Метрика). Вопросы — пишите в комментарии 👇
Подключение Datalens к Relaxdev: пошаговая инструкция
Показываю, как работает настройка Datalens из нового функционала Relaxdev. Скриншоты и последовательность как пример рабочей конфигурации прилагаю ниже. Как подключить RelaxDev к DataLens Шаг 1. В RelaxDev открой вкладку База данных → переключись на таб DataLens. Шаг 2. Скопируй ссылку из блока «Ссылка для DataLens» — это CSV-эндпоинт с токеном. При необходимости отредактируй SQL-запрос для экспорта и нажми «Обновить данные вручную». Шаг 3. Открой Google Sheets → Extensions → Apps Script. Шаг 4. В редакторе вставь скрипт syncFromRelaxDev() — он забирает CSV по ссылке и записывает данные в активный лист. Нажми Run для проверки. Шаг 5. Перейди в Triggers → Add Trigger. Выбери функцию syncFromRelaxDev, событие — From spreadsheet / On open (данные будут обновляться при открытии файла). Сохрани. Шаг 6. В Yandex DataLens открой нужную коллекцию → Подключения → Создать подключение. Шаг 7. Выбери Google Sheets, подключи таблицу — готово.
Поддержка развития
Здесь отображаются донаты и сообщения от участников, напрмер за помощь в деплое, просьба добавить новую фичу или поделиться нашими технологиями
Deploy из под-папки
Часто в репе может быть несколько проектов, он лежит не в root, тогда очень удобно при импорте указать рабочий folder..
DNS
А надо ли удалять старые записи
CDN для сайта или Хранилища
Как лучше провести через CDN статику - HTML страницу ?
