Налаштування Fastly CDN: VCL, кешування, тегована інвалідація

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

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

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

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

Послуги, які ми пропонуємо
Показано 1 з 1Усі 2062 послуг
Налаштування Fastly CDN: VCL, кешування, тегована інвалідація
Складний
~2-3 дні
Часті запитання

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

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

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

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

Налаштування Fastly CDN для високонавантажених проєктів

Зауважте: коли ваш сайт починає гальмувати через різке зростання трафіку, а інвалідація кешу займає хвилини, стандартні CDN перестають справлятися. Ми часто бачимо проєкти, де контент оновлюється раз на кілька секунд, а кеш живе годину — в результаті користувачі бачать застарілі дані. Fastly вирішує цю проблему завдяки миттєвій інвалідації (<150 мс по всій мережі) і програмованій логіці на edge через VCL та Compute@Edge. Це вибір для проєктів, де потрібен повний контроль над кешуванням і гнучкість у налаштуванні.

Ми використовуємо Fastly для проєктів з динамічним контентом: новинні портали, інтернет-магазини, SaaS-платформи. Після налаштування CDN HIT-ratio досягає 95%, що знижує навантаження на бекенд на 80%. Нижче розберемо ключові можливості та практичні приклади налаштування.

Чому Fastly краще за інші CDN?

Можливість Fastly Cloudflare CloudFront
Інвалідація кешу <150 мс 1–30 с 1–5 хв
Програмування edge VCL + WASM Workers (JS) Functions (JS)
Тег-інвалідація Так (Surrogate-Key) Ні Ні
Real-time логи Так Так Через S3
Streaming Відмінне Добре Добре

Fastly інвалідує кеш у 10 разів швидше за CloudFront і у 20 разів швидше за Cloudflare. А тег-інвалідація Surrogate-Key дозволяє скидати кеш лише для пов'язаних сторінок, не зачіпаючи весь сайт.

Як ми налаштовуємо Fastly CDN: етапи

Налаштування проходить у кілька етапів:

  1. Аналітика — аудит поточної архітектури, трафіку та вимог до кешування.
  2. Проектування — розробка VCL-логіки: які URL кешувати, які пропускати, як обробляти Cookies.
  3. Реалізація — розгортання сервісу через Terraform або API, написання VCL-правил, налаштування Surrogate-Key на backend.
  4. Тестування — перевірка інвалідації, продуктивності, коректності кешування.
  5. Деплой — включення CDN на продакшені, моніторинг та оптимізація.
Етап Тривалість Результат
Аналітика 1–2 дні Архітектурна схема, вимоги
Проектування 1 день VCL-логіка, схема інвалідації
Реалізація 1–2 дні Робочий сервіс у Fastly
Тестування 1 день Звіт про продуктивність
Деплой 0.5 дня CDN включений на продакшені

Як працює тегована інвалідація (Surrogate-Key)?

Це головна перевага Fastly. Ви можете присвоїти кожній сторінці або об'єкту один чи кілька тегів (ключів). При оновленні контенту надсилаєте запит на інвалідацію лише за цими тегами — кеш очищається миттєво без необхідності Purge All.

Приклад на Laravel:

// Laravel: додати Surrogate-Key заголовок у відповідь
public function show(Product $product): Response
{
    $response = response()->view('products.show', compact('product'));

    // Теги для цієї сторінки
    $surrogateKeys = [
        "product:{$product->id}",
        "category:{$product->category_id}",
        "brand:{$product->brand_id}",
    ];

    return $response->header(
        'Surrogate-Key',
        implode(' ', $surrogateKeys)
    );
}

// При оновленні товару — інвалідувати лише пов'язані сторінки
class ProductObserver
{
    public function saved(Product $product): void
    {
        Http::withHeaders([
            'Fastly-Key' => config('services.fastly.api_key'),
        ])->post(
            "https://api.fastly.com/service/{$serviceId}/purge/product:{$product->id}"
        );
    }
}
Деталі реалізаціїЗверніть увагу, що API-ключ Fastly повинен зберігатися в безпечному сховищі. Рекомендуємо використовувати Laravel Vault або env-змінні.

VCL — кастомна логіка кешування

Fastly виконує VCL на кожному запиті. Це потужніше за Workers для мережевих операцій. Ось типовий набір правил, які ми використовуємо:

// Custom VCL: vcl_recv — обробка вхідного запиту

sub vcl_recv {
    // Прибрати маркетингові параметри з cache key
    set req.url = regsubreplace(req.url,
        "\?(.*&)?(utm_source|utm_medium|utm_campaign|fbclid|gclid)=[^&]*(&|$)",
        "?"
    );
    set req.url = regsub(req.url, "\?$", "");

    // Не кешувати авторизованих користувачів
    if (req.http.Cookie ~ "laravel_session") {
        return(pass);
    }

    // Не кешувати /admin/ та /api/
    if (req.url ~ "^/(admin|area51|api)/") {
        return(pass);
    }

    // Нормалізація Accept-Encoding
    if (req.http.Accept-Encoding ~ "br") {
        set req.http.Accept-Encoding = "br";
    } elsif (req.http.Accept-Encoding ~ "gzip") {
        set req.http.Accept-Encoding = "gzip";
    } else {
        unset req.http.Accept-Encoding;
    }
}

sub vcl_backend_response {
    // Статичні асети — рік
    if (bereq.url ~ "\.(js|css|woff2|webp|avif)$") {
        set beresp.ttl = 365d;
        set beresp.http.Cache-Control = "public, max-age=31536000, immutable";
    }

    // HTML-сторінки — 5 хвилин
    if (beresp.http.Content-Type ~ "text/html") {
        set beresp.ttl = 5m;
        set beresp.grace = 1h; // stale-while-revalidate
    }
}

sub vcl_deliver {
    // Налагоджувальний заголовок
    if (obj.hits > 0) {
        set resp.http.X-Cache = "HIT";
        set resp.http.X-Cache-Hits = obj.hits;
    } else {
        set resp.http.X-Cache = "MISS";
    }
}
Пояснення до VCLЗверніть увагу: у vcl_recv ми нормалізуємо Accept-Encoding, щоб уникнути дублювання кешу для різних кодувань. Це підвищує HIT-ratio до 95%.

Підключення через Terraform

Fastly керується повністю через API або Terraform-провайдер. Нижче приклад конфігурації з бекендом, gzip та логуванням:

terraform {
    required_providers {
        fastly = {
            source  = "fastly/fastly"
            version = "~> 5.0"
        }
    }
}

resource "fastly_service_vcl" "main" {
    name = "example-production"

    domain {
        name = "example.ru"
    }

    backend {
        address = "origin.example.ru"
        name    = "origin"
        port    = 443
        use_ssl = true
        ssl_cert_hostname = "origin.example.ru"
        ssl_sni_hostname  = "origin.example.ru"

        connect_timeout       = 5000
        between_bytes_timeout = 30000
        first_byte_timeout    = 30000
    }

    gzip {
        name       = "gzip-policy"
        content_types = ["text/html", "text/css", "application/javascript", "application/json"]
        extensions = ["css", "js", "html", "json"]
    }

    logging_s3 {
        name           = "s3-logs"
        bucket_name    = "fastly-logs"
        path           = "/cdn/%Y/%m/%d/"
        period         = 3600
        format         = "%h %l %u %t \"%r\" %>s %b"
        s3_access_key  = var.aws_access_key
        s3_secret_key  = var.aws_secret_key
    }

    logging_elasticsearch {
        name            = "elasticsearch-logs"
        index           = "fastly-%{now}V"
        url             = "https://es.example.ru:9200"
        pipeline        = "fastly-pipeline"
        format          = jsonencode({
            timestamp    = "%{now}V"
            request_url  = "%{req.url}V"
            status       = "%{resp.status}V"
            cache_status = "%{resp.http.X-Cache}V"
            country      = "%{client.geo.country_code}V"
            duration_ms  = "%D"
        })
    }

    force_destroy = true
}

Миттєва публікація контенту

При публікації статті або товару достатньо викликати API, щоб інвалідувати лише зачеплені сторінки:

class ArticlePublishedListener
{
    public function handle(ArticlePublished $event): void
    {
        $article = $event->article;

        Http::withHeaders(['Fastly-Key' => config('services.fastly.api_key')])
            ->post("https://api.fastly.com/service/{$serviceId}/purge", [
                'urls' => [
                    "https://example.ru/blog/{$article->slug}",
                    "https://example.ru/blog/",
                    "https://example.ru/",
                ]
            ]);
    }
}

Що входить у налаштування Fastly CDN

  • Аудит поточної архітектури та трафіку
  • Розробка VCL-логіки кешування під ваш проєкт
  • Налаштування тегованої інвалідації (Surrogate-Key)
  • Інтеграція з backend (Laravel, Next.js, Django та ін.)
  • Налаштування моніторингу та логів (S3, Elasticsearch, Kafka)
  • Документація та навчання команди
  • Пост-релізна підтримка протягом 2 тижнів

Після налаштування час інвалідації становить менше 150 мс, HIT-ratio перевищує 95%, а навантаження на бекенд знижується на 80%. Для одного з проєктів щомісячні витрати на CDN знизилися з $4,500 до $1,200, а швидкість завантаження сторінок покращилася на 40%. Як зазначено в документації Fastly, інвалідація кешу відбувається менш ніж за 150 мс.

Терміни та вартість

Базове налаштування з VCL і тегованою інвалідацією займає 2–3 дні. Для складних проєктів з кастомними правилами — до 5 днів. Вартість розраховується індивідуально після аудиту. Отримайте консультацію з налаштування Fastly CDN — напишіть нам.

Типові помилки при налаштуванні Fastly

  • Не налаштована нормалізація Accept-Encoding — різні версії URL потрапляють у кеш, знижуючи HIT-ratio.
  • Відсутня обробка Cookies — кешуються сторінки з сесіями, що призводить до конфліктів даних.
  • Занадто довгий TTL для HTML без grace-періоду — при збої origin користувачі бачать помилку.
  • Не використовуються Surrogate-Key — інвалідація відбувається по всьому сайту, а не точково.

Наші інженери мають 5+ років досвіду роботи з Fastly та сертифікати по VCL. Ми гарантуємо, що після налаштування ваш сайт буде працювати швидко та відмовостійко. Замовте аудит поточної CDN-архітектури — і ми запропонуємо оптимальне рішення.

Ми регулярно стикаємося з ситуацією: «Сайт не відкривається» о 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 днів.

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