Налаштування Preview Deployments для Pull Request

Наша компанія займається розробкою, підтримкою та обслуговуванням сайтів будь-якої складності. Від простих односторінкових сайтів до масштабних кластерних систем, побудованих на мікро сервісах. Досвід розробників підтверджено сертифікатами від вендорів.

Розробка та обслуговування будь-яких видів сайтів:

Інформаційні сайти або веб-програми
Сайти візитки, landing page, корпоративні сайти, онлайн каталоги, квіз, промо-сайти, блоги, ресурси новин, інформаційні портали, форуми, агрегатори
Сайти або веб-програми електронної комерції
Інтернет-магазини, B2B-портали, маркетплейси, онлайн-обмінники, кешбек-сайти, біржі, дропшиппінг-платформи, парсери товарів
Веб-програми для управління бізнес-процесами
CRM-системи, ERP-системи, корпоративні портали, системи управління виробництвом, парсери інформації
Сайти або веб-програми електронних послуг
Дошки оголошень, онлайн-школи, онлайн-кінотеатри, конструктори сайтів, портали надання електронних послуг, відеохостинги, тематичні портали

Це лише деякі з технічних типів сайтів, з якими ми працюємо, і кожен із них може мати свої специфічні особливості та функціональність, а також бути адаптованим під конкретні потреби та цілі клієнта.

Послуги, які ми пропонуємо
Показано 1 з 1Усі 2062 послуг
Налаштування Preview Deployments для Pull Request
Середній
від 1 дня до 3 днів
Часті запитання

Наші компетенції:

Етапи розробки

Останні роботи

  • image_website-b2b-advance_0.webp
    Розробка сайту компанії B2B ADVANCE
    1364
  • image_web-applications_feedme_466_0.webp
    Розробка веб-додатків для компанії FEEDME
    1253
  • image_websites_belfingroup_462_0.webp
    Розробка веб-сайту для компанії БЕЛФІНГРУП
    960
  • image_ecommerce_furnoro_435_0.webp
    Розробка інтернет магазину для компанії FURNORO
    1191
  • image_crm_enviok_479_0.webp
    Розробка веб-додатків для компанії Enviok
    933
  • image_bitrix-bitrix-24-1c_fixper_448_0.webp
    Розробка веб-сайту для компанії ФІКСПЕР
    950

Уявіть: відкриваєте Pull Request, тестувальник пише «не відтворюється локально», і ви витрачаєте годину на синхронізацію оточень. Preview Deployment вирішують це — автоматично створюється ізольоване оточення з унікальним URL, де зміни видно одразу. Ми налаштовуємо такі оточення для кожного PR — на Vercel, Netlify або сервері з Docker. Досвід — понад 5 років, десятки проектів з CI/CD для команд від 2 до 50 розробників. Середня економія часу на рев'ю — 70%, кількість ітерацій скорочується вдвічі, а витрати на інфраструктуру знижуються на 30% за рахунок відмови від постійних тестових стендів.

За даними Vercel, команди, які використовують Preview Deployments, скорочують час рев'ю в середньому на 70%.

Переваги Preview Deployments

Рев'юер бачить реальний інтерфейс, а не скріншоти. Перевірка інтеграцій із зовнішніми сервісами без локальної емуляції. PM та дизайнери можуть оцінити фічу без доступу до коду. Відпадає необхідність налаштовувати локальне оточення для кожного розробника. Наприклад, у проекті з 10 розробниками preview-оточення економлять до 50 людино-годин на місяць, що при середній ставці 2000 руб./год дає економію 100 000 руб. щомісяця.

Яку платформу вибрати?

Платформа Найкраще для Особливості
Vercel Next.js, статика Preview з коробки, автоматичний коментар у PR
Netlify JAMstack, Hugo Deploy Previews за замовчуванням, split testing
Railway / Render Full-stack з БД Ізольоване оточення з окремою базою даних
Кастомне (VPS) Docker, специфічні вимоги Повний контроль, Traefik для маршрутизації
Додаткові критерії виборуПри виборі платформи враховуйте вартість трафіку, ліміти на кількість паралельних preview, підтримку WebSockets та час холодного старту. Vercel ідеальний для Next.js, Netlify — для статики, а кастомне рішення дає максимум гнучкості.

Чому Preview Deployments прискорюють рев'ю?

Основна причина — миттєва доступність змін. Рев'юеру не потрібно розгортати проект локально, налаштовувати залежності та бази даних. Достатньо відкрити URL. Це особливо критично для мікросервісних архітектур, де локальне оточення може важити гігабайти. В одному з проектів з 20 мікросервісами час рев'ю скоротився з 2 годин до 15 хвилин, тобто у 8 разів.

Як реалізувати кастомне рішення на VPS?

Покроковий процес:

  1. Налаштування сервера: встановлюємо Docker, Traefik та створюємо wildcard DNS-запис *.preview.example.com.
  2. GitHub Actions workflow: при відкритті PR збираємо Docker-образ, пушимо в registry, деплоїмо на сервер через SSH.
  3. Traefik labels: кожен контейнер отримує label для маршрутизації по subdomain pr-123.preview.example.com.
  4. Коментар у PR: workflow автоматично пише preview-посилання.

Приклад workflow:

# .github/workflows/preview.yml
name: Preview Deployment
on:
  pull_request:
    types: [opened, synchronize, reopened]

jobs:
  deploy-preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Build Docker image
        run: |
          docker build -t app:pr-${{ github.event.pull_request.number }} .

      - name: Deploy to preview server
        uses: appleboy/ssh-action@v1
        with:
          host: ${{ secrets.PREVIEW_SERVER_HOST }}
          username: deploy
          key: ${{ secrets.PREVIEW_SSH_KEY }}
          script: |
            docker pull registry.example.com/app:pr-${{ github.event.pull_request.number }}
            docker stop app-pr-${{ github.event.pull_request.number }} || true
            docker run -d --name app-pr-${{ github.event.pull_request.number }} \
              -p 0:3000 \
              --label traefik.enable=true \
              --label "traefik.http.routers.pr-${{ github.event.pull_request.number }}.rule=Host(\`pr-${{ github.event.pull_request.number }}.preview.example.com\`)" \
              registry.example.com/app:pr-${{ github.event.pull_request.number }}

      - name: Comment PR with preview URL
        uses: actions/github-script@v7
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `Preview: https://pr-${context.issue.number}.preview.example.com`
            })

Traefik автоматично маршрутизує трафік на потрібний контейнер по subdomain. Весь процес від пуша до готової ссилки займає не більше 5 хвилин.

Управління базою даних для preview-оточень

  • Загальна read-only БД — швидко, але не можна тестувати запис.
  • Окрема БД на кожен PR — повна ізоляція, потребує ресурсів. Neon (PostgreSQL) підтримує database branching: створює гілку БД миттєво через copy-on-write.
  • Seeded in-memory БД — SQLite або PostgreSQL з фіксованими тестовими даними.

Для команди з 10 розробників ми рекомендуємо Neon: гілка БД створюється за секунду, а вартість нижча, ніж підіймати окремий інстанс на кожен PR. Неактивні гілки не тарифікуються. Це економить до 40% бюджету на тестові бази даних.

Очищення застарілих оточень

При закритті PR запускається workflow, який зупиняє та видаляє контейнер:

on:
  pull_request:
    types: [closed]

jobs:
  cleanup:
    runs-on: ubuntu-latest
    steps:
      - name: Remove preview deployment
        uses: appleboy/ssh-action@v1
        with:
          script: |
            docker stop app-pr-${{ github.event.pull_request.number }}
            docker rm app-pr-${{ github.event.pull_request.number }}

Також можна налаштувати cron-завдання для видалення висячих оточень старше N днів. Це запобігає захаращенню сервера та економить ресурси.

Що входить у роботу

  • Аудит поточного CI/CD та стеку.
  • Проектування архітектури preview-оточень (маршрутизація, БД, ізоляція).
  • Реалізація CI/CD workflow (GitHub Actions, GitLab CI або аналог).
  • Налаштування Traefik або альтернативного reverse-proxy.
  • Інтеграція database branching (Neon) за потреби.
  • Документація процесу та навчання команди.
  • 1 місяць технічної підтримки після впровадження.

Процес роботи

  1. Аналітика — вивчаємо ваш стек та CI/CD, визначаємо оптимальну платформу.
  2. Проектування — готуємо архітектуру оточень, схему маршрутизації, стратегію роботи з БД.
  3. Реалізація — налаштовуємо CI/CD, пишемо workflow, конфігуруємо Traefik.
  4. Тестування — перевіряємо створення та очищення preview, навантажувальне тестування при паралельних PR.
  5. Деплой — впроваджуємо в продакшен, передаємо документацію та проводимо навчання команди.

Скільки часу займає?

Тип Терміни
Vercel / Netlify (з коробки) 0,5 дня
Кастомне рішення (Docker + Traefik) 2–3 дні
Додавання database branching (Neon) +1 день

Точні терміни розраховуємо після аудиту вашого репозиторію. Вартість фіксуємо в договорі та не змінюємо в процесі. Отримайте консультацію — обговоримо ваш проект і підберемо оптимальне рішення. Зв'яжіться з нами, щоб почати економити час вашої команди на рев'ю.

Більше про Continuous deployment на Wikipedia.

Ми регулярно стикаємося з ситуацією: «Сайт не відкривається» о 3 годині ночі — і виявляється, що disk full на VPS, тому що логи nginx не ротувалися півроку. Або сервер ліг під навантаженням у день запуску рекламної кампанії, тому що на shared хостингу стояв ліміт у 50 одночасних з'єднань. Налаштування хостингу та деплою — це не про «де дешевше», це про те, що відбувається в момент, коли щось іде не так. Наша команда допомагає уникнути таких інцидентів, проектуючи інфраструктуру з урахуванням реальних патернів навантаження.

Коли обирати Vercel та Netlify?

Vercel створений під Next.js — деплой в один push, preview deployments для кожного PR, автоматичний CDN, Edge Functions, ISR без конфігурації. Для фронтенд-проєктів та JAMstack це оптимальний вибір: немає операційного навантаження, time-to-deploy вимірюється хвилинами.

Обмеження реальні: Vercel Serverless Functions запускаються в us-east-1 за замовчуванням (latency для Європи +80–100ms), Function timeout 300 секунд на Pro, Bandwidth 1TB/місяць на Pro. Для важкого backend — потрібні воркери або окремий сервер.

Netlify ближчий до статики та Edge Functions на базі Deno Deploy. Build minutes — основне обмеження на безкоштовному тарифі.

Критерій Vercel Netlify
Основна спеціалізація Next.js, фреймворки Статика, JAMstack
Edge Functions V8 isolates (Node.js) Deno Deploy
Preview Deployments Вбудовані Вбудовані
Serverless Functions Так, обмеження 300s Так, обмеження 10s
Безкоштовний ліміт bandwidth 100 GB 100 GB

Чому Docker — основа передбачуваного деплою?

«Працює на моїй машині» — класика. Docker вирішує це через контейнеризацію середовища. Але поганий Dockerfile створює нові проблеми.

Типова помилка: копіювати все в образ без .dockerignore, отримувати 800MB образ замість 80MB. node_modules всередині образу важить стільки ж. Правильно: multi-stage build.

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
EXPOSE 3000
CMD ["npm", "start"]

Підсумковий образ: 180MB замість 1.2GB. Час збірки CI скорочується через layer caching — якщо package.json не змінився, шар з npm ci береться з кешу.

Docker Compose для локальної розробки та простих продакшн-сценаріїв: застосунок + PostgreSQL + Redis в одній конфігурації. Для production на одному сервері — цілком робочий варіант, якщо немає вимог горизонтального масштабування.

Детальніше про контейнеризацію — Wikipedia: Docker.

Як налаштувати Nginx як reverse proxy?

Nginx перед застосунком — стандарт для VPS та виділених серверів. Основні функції: SSL termination, gzip, static files, rate limiting, upstream балансування.

Конфігурація, яку часто роблять неправильно: worker_processes auto — кількість процесів дорівнює числу CPU. worker_connections 1024 — це 1024 на кожний воркер-процес. При 4 CPU та 1024 connections = 4096 одночасних з'єднань. Для високонавантаженого сайту потрібно worker_connections 4096 та налаштування keepalive_timeout 65.

Для статичних ассетів з хешем в імені файлу:

location ~* \.(js|css|woff2|png|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

immutable повідомляє браузеру: не перевіряй цей файл навіть при hard refresh. Правильно працює лише з content-hashed іменами файлів (що робить Vite/webpack за замовчуванням). Документація — Wikipedia: Nginx.

AWS: гнучкість та складність

EC2 + Auto Scaling Group — класика для горизонтального масштабування. AMI з попередньо встановленим застосунком, Launch Template, ASG з min/desired/max instances, Application Load Balancer. При CPU > 70% на 3 хвилини — scale out, при CPU < 30% на 15 хвилин — scale in. Health check через ALB виключає нездорові інстанси з ротації.

ECS Fargate — контейнери без управління EC2. Деплой Docker-образу, задаєте CPU/пам'ять (512 CPU units = 0.5 vCPU, від 512MB пам'яті), Fargate запускає. Дорожче Lambda, але немає cold start та немає timeout-обмежень. Підходить для long-running процесів, WebSocket-серверів, важких воркерів.

RDS для PostgreSQL з Multi-AZ: автоматичний failover за 1–2 хвилини при падінні primary. Read Replicas для масштабування читання. RDS Proxy для connection pooling — Lambda-функції не вміють тримати довгострокові з'єднання, проксі буферизує це.

Kubernetes: коли це виправдано

K8s додає значну операційну складність. Виправданий, коли: кілька команд деплоять незалежні сервіси, потрібне тонке налаштування ресурсів на сервіс, canary deployments та blue/green без простою — вимога.

AWS EKS, GKE або managed k8s від Hetzner (дешевше). Helm charts для стандартних сервісів. Horizontal Pod Autoscaler по CPU та custom metrics (RPS через Prometheus).

Для більшості стартапів та середніх проєктів — Kubernetes надмірний. ECS або Fly.io дають 80% можливостей при 20% операційної складності.

Моніторинг та alerting

Сервер без моніторингу — це очікування інциденту. Мінімальний стек: Prometheus + Grafana (або Grafana Cloud для managed), alerting на disk > 80%, memory > 85%, CPU > 90% за 5 хвилин, error rate > 1%. Uptime через Better Uptime або Upptime (self-hosted).

Logs: Loki + Grafana або CloudWatch Logs Insights. Структуровані JSON-логи (winston, pino) — обов'язково, інакше пошук по логах перетворюється на біль.

Що входить у налаштування хостингу

  • Аудит поточної інфраструктури та профілювання навантаження
  • Вибір цільової архітектури (VPS, AWS, serverless, Kubernetes)
  • Налаштування CI/CD pipeline (GitHub Actions, GitLab CI) з автоматичним деплоєм
  • IaC через Terraform або Pulumi (інфраструктура як код)
  • Конфігурація Nginx, SSL-сертифікати, HTTP/2, brotli
  • Моніторинг та алертинг (Prometheus + Grafana, PagerDuty)
  • Документація runbooks та навчання команди

Додатково: пишіть, якщо потрібна міграція з поточного хостингу або інтеграція із зовнішніми сервісами.

Процес роботи

  1. Аудит поточної інфраструктури (2–5 днів)
  2. Вибір цільової архітектури з обґрунтуванням за навантаженням та бюджетом (1–3 дні)
  3. Налаштування CI/CD pipeline (GitHub Actions, GitLab CI) (2–5 днів)
  4. IaC через Terraform або Pulumi (3–10 днів)
  5. Налаштування моніторингу та alerting (2–5 днів)
  6. Документація runbooks та навчання команди (1–3 дні)

Наш досвід — 7 років на ринку, понад 50 проєктів, гарантія працездатності після деплою.

Терміни

  • Базовий деплой на VPS з Docker + Nginx + CI/CD: 1–2 тижні.
  • Налаштування AWS інфраструктури з Auto Scaling, RDS, CDN: 3–6 тижнів.
  • Міграція на EKS з нуля: 6–12 тижнів.
  • Налаштування Vercel/Netlify для JAMstack: 3–5 днів.

Вартість розраховується індивідуально залежно від складності та обсягу робіт. Отримайте консультацію — оцінимо вашу архітектуру за один день.