Налаштування AWS CloudFront CDN під ключ

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

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

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

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

Послуги, які ми пропонуємо
Показано 1 з 1Усі 2062 послуг
Налаштування AWS CloudFront CDN під ключ
Середній
від 1 дня до 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

Налаштування AWS CloudFront CDN під ключ

При запуску сайту на AWS глобальні користувачі часто стикаються з довгим завантаженням. TTFB вище 500 мс, LCP зашкалює, а сервер не справляється з піковим навантаженням. Без CDN це норма. Ми налаштовуємо AWS CloudFront так, що час відгуку скорочується в 2-3 рази, а навантаження на origin падає на 90%. Наш досвід — багаторічна робота з AWS, численні проекти, сертифіковані інженери. Ми гарантуємо SLA та цілодобову підтримку.

Як CloudFront прискорює завантаження сайту?

CloudFront — CDN від Amazon з 450+ edge-локаціями по всьому світу. Замість того щоб щоразу ходити до вашого сервера, він віддає кешовані копії контенту з найближчого вузла. Це радикально знижує TTFB (перші 50 мс) і покращує Core Web Vitals: LCP, CLS, INP. Крім того, CloudFront підтримує HTTP/2, автоматичне стиснення Brotli/Gzip та stale-while-revalidate. Економія на трафіку може досягати 60% завдяки стисненню та кешуванню на межі мережі.

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

Тип контенту Cache Policy ID Min/Max TTL Поведінка при помилці
Статичні асети (CSS, JS, зображення) Managed-CachingOptimized 1 рік stale-while-revalidate
HTML-сторінки Кастомна 5-10 хвилин stale-while-revalidate
API-запити Managed-CachingDisabled 0 Не кешувати

Чому обирають CloudFront для AWS-інфраструктури?

CloudFront щільно інтегрований з AWS — S3, ALB, API Gateway, Lambda@Edge. Ви можете:

  • Прив'язати SSL-сертифікат через ACM безкоштовно.
  • Використовувати Origin Shield для додаткового кешу між edge та origin.
  • Запускати кастомну логіку на Edge Functions (CloudFront Functions або Lambda@Edge) без затримок.

Порівняння з іншими CDN:

Характеристика CloudFront Cloudflare Fastly
Edge-локації 450+ 330+ 50+
Інтеграція з AWS нативна стороння стороння
Lambda@Edge є немає немає
Origin Shield є немає є (тільки платний)

CloudFront найкраще підходить, якщо ваша інфраструктура вже на AWS. Він дає повний контроль над кешуванням та безпекою.

Які проблеми вирішує CloudFront на практиці?

В одному проекті зі 100 000 унікальних відвідувачів на день ми знизили TTFB з 800 мс до 40 мс після налаштування CloudFront з Origin Shield та правильними політиками кешу. Навантаження на origin впало в 50 разів, а витрати на трафік скоротилися на 40%. Origin Shield — це другий рівень кешу між edge та origin, який агрегує запити та знижує навантаження. Рекомендується для проектів з тисячами запитів на секунду.

Процес налаштування CDN

  1. Аналітика: вивчаємо архітектуру вашого сайту, визначаємо, які ресурси кешувати, які API залишити без кешу.
  2. Проектування: проектуємо distribution, політики кешу, behaviours, origin shield.
  3. Реалізація: пишемо Terraform-конфігурацію, налаштовуємо SSL через ACM, підключаємо S3 для статики.
  4. Тестування: перевіряємо заголовки кешу, інвалідацію, швидкість завантаження в різних регіонах.
  5. Деплой: деплоїмо через CI/CD, документуємо процес.

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

  • Документація з конфігурації та інструкція для розробників.
  • Доступи до CloudFront, ACM, S3 з мінімальними привілеями.
  • Навчання вашої команди: як керувати кешем, створювати інвалідації.
  • Підтримка протягом місяця після запуску — виправляємо нештатні ситуації.
  • Моніторинг через CloudWatch та налаштування алертів за помилками та затримками.
  • Звіт про продуктивність з метриками TTFB, LCP, CLS до та після впровадження.

Приклад конфігурації Terraform

# main.tf — створення CloudFront distribution
resource "aws_cloudfront_distribution" "main" {
    enabled             = true
    is_ipv6_enabled     = true
    default_root_object = "index.html"
    price_class         = "PriceClass_200"

    # Основний origin — Laravel на EC2/ALB
    origin {
        domain_name = aws_lb.main.dns_name
        origin_id   = "alb-origin"

        custom_origin_config {
            http_port              = 80
            https_port             = 443
            origin_protocol_policy = "https-only"
            origin_ssl_protocols   = ["TLSv1.2"]
        }

        custom_header {
            name  = "X-Origin-Verify"
            value = var.origin_verify_token
        }
    }

    # S3 origin для статичних файлів
    origin {
        domain_name            = aws_s3_bucket.assets.bucket_regional_domain_name
        origin_id              = "s3-assets"
        origin_access_control_id = aws_cloudfront_origin_access_control.main.id

        origin_shield {
            enabled              = true
            origin_shield_region = "eu-central-1"
        }
    }

    # Статичні асети з S3
    ordered_cache_behavior {
        path_pattern           = "/assets/*"
        target_origin_id       = "s3-assets"
        viewer_protocol_policy = "redirect-to-https"
        allowed_methods        = ["GET", "HEAD"]
        cached_methods         = ["GET", "HEAD"]
        compress               = true
        cache_policy_id        = aws_cloudfront_cache_policy.assets.id
    }

    # API — без кешу
    ordered_cache_behavior {
        path_pattern           = "/api/*"
        target_origin_id       = "alb-origin"
        viewer_protocol_policy = "https-only"
        allowed_methods        = ["DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT"]
        cached_methods         = ["GET", "HEAD"]
        cache_policy_id        = data.aws_cloudfront_cache_policy.caching_disabled.id
        origin_request_policy_id = data.aws_cloudfront_origin_request_policy.all_viewer.id
    }

    # Основні сторінки — короткий кеш
    default_cache_behavior {
        target_origin_id       = "alb-origin"
        viewer_protocol_policy = "redirect-to-https"
        allowed_methods        = ["DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT"]
        cached_methods         = ["GET", "HEAD"]
        compress               = true
        cache_policy_id        = aws_cloudfront_cache_policy.pages.id
    }

    restrictions {
        geo_restriction { restriction_type = "none" }
    }

    viewer_certificate {
        acm_certificate_arn = aws_acm_certificate.main.arn
        ssl_support_method  = "sni-only"
        minimum_protocol_version = "TLSv1.2_2021"
    }
}

# Cache Policy для статичних асетів
resource "aws_cloudfront_cache_policy" "assets" {
    name    = "assets-immutable"
    min_ttl = 31536000
    max_ttl = 31536000
    default_ttl = 31536000

    parameters_in_cache_key_and_forwarded_to_origin {
        cookies_config { cookie_behavior = "none" }
        headers_config  { header_behavior = "none" }
        query_strings_config { query_string_behavior = "none" }
        enable_accept_encoding_brotli = true
        enable_accept_encoding_gzip   = true
    }
}

Інвалідація кешу при деплої

# AWS CLI: інвалідувати все
aws cloudfront create-invalidation \
    --distribution-id $DISTRIBUTION_ID \
    --paths "/*"

# Тільки HTML-сторінки (після публікації контенту)
aws cloudfront create-invalidation \
    --distribution-id $DISTRIBUTION_ID \
    --paths "/blog/*" "/products/*" "/"
// Laravel: інвалідація при публікації статті
use Aws\CloudFront\CloudFrontClient;

class ArticlePublished
{
    public function handle(Article $article): void
    {
        $client = new CloudFrontClient([
            'version' => 'latest',
            'region'  => 'us-east-1',
        ]);

        $client->createInvalidation([
            'DistributionId' => config('services.cloudfront.distribution_id'),
            'InvalidationBatch' => [
                'Paths'     => ['Quantity' => 1, 'Items' => ["/blog/{$article->slug}"]],
                'CallerReference' => (string) now()->timestamp,
            ],
        ]);
    }
}

CloudFront Functions — безпека на edge

// function.js — додає security headers (< 1 мс)
function handler(event) {
    var response = event.response;
    var headers = response.headers;

    headers['strict-transport-security'] = { value: 'max-age=63072000; includeSubDomains; preload' };
    headers['x-content-type-options'] = { value: 'nosniff' };
    headers['x-frame-options'] = { value: 'SAMEORIGIN' };
    headers['referrer-policy'] = { value: 'strict-origin-when-cross-origin' };

    return response;
}
resource "aws_cloudfront_function" "security_headers" {
    name    = "security-headers"
    runtime = "cloudfront-js-2.0"
    code    = file("function.js")
    publish = true
}

Origin Shield

Додатковий проміжний кеш між edge-вузлами та origin-сервером. Зменшує навантаження на origin у 10–50 разів для популярного контенту. Включений у прикладі вище.

Докладніше про конфігурацію Origin Shield Origin Shield вмикається в блоці origin. Вибирайте регіон, найближчий до вашого origin. Для Європи — eu-central-1, для США — us-east-1. Це знизить затримки та зробить кеш більш ефективним.

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

Базове налаштування займає 1-2 дні. Складні сценарії з Lambda@Edge та Origin Shield — до 5 днів. Точну вартість розраховуємо індивідуально після аналізу вашої інфраструктури. Оцінимо ваш проект за 1 день — зв'яжіться, і ми підготуємо пропозицію. Отримайте консультацію з налаштування CloudFront вже сьогодні.

Докладніше: CloudFront Documentation, 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 днів.

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