Frontend Academy · Урок

Развёртывание в Vercel, Netlify и Cloudflare Pages

Подключите репозиторий к каждой платформе, настройте команды сборки и каталоги вывода и изучите предварительные развёртывания для веток

Урок 2 из 416 шагов

«Развёртывание в Vercel, Netlify и Cloudflare Pages» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Тройка современных платформ для размещения фронтенда

Vercel, Netlify и Cloudflare Pages — ведущие платформы для развертывания фронтенд-приложений. Все они предлагают развертывание на основе Git, предварительные развертывания веток, пользовательские домены, периферийный CDN и бессерверные функции. Выберите одну платформу и придерживайтесь её.

Vercel — создана для Next.js

Создана командой Next.js. Лучшая в своем классе интеграция с Next.js: оптимизация изображений без настройки, ISR, периферийные функции и Speed Insights. Также поддерживаются Vite, Nuxt, Astro и большинство статических фреймворков.

Развертывание в Vercel

Подключите репозиторий GitHub/GitLab/Bitbucket. Vercel автоматически определит фреймворк, запустит build и выполнит развертывание.

# Manual deploy (any project):
npm install -g vercel
vercel login
vercel       # preview deploy
vercel --prod  # production deploy

# Or push to main — auto-deploys via Git integration.

Конфигурация vercel.json

Переопределяйте значения по умолчанию: команды сборки, перенаправления, заголовки и правила перезаписи.

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "headers": [{
    "source": "/(.*)",
    "headers": [{ "key": "X-Frame-Options", "value": "DENY" }]
  }],
  "redirects": [{ "source": "/old", "destination": "/new", "permanent": true }]
}

Netlify — первопроходец

Netlify положила начало современным статическим развертываниям. Платформа предлагает мощные средства обработки форм, управления идентификацией и аналитики. Netlify Functions и Edge Functions обеспечивают бессерверное выполнение. Отлично поддерживаются Vite, Hugo и Eleventy.

Развертывание в Netlify

Подключите репозиторий или перетащите собранную папку. Настройте всё через панель управления или netlify.toml.

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200   # SPA fallback

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"

Netlify CLI

Локальная разработка с бессерверными функциями.

npm install -g netlify-cli
netlify login
netlify init
netlify dev       # local server with functions
netlify deploy    # preview
netlify deploy --prod

Cloudflare Pages

Развертывание выполняется в глобальной периферийной сети Cloudflare. Pages Functions обеспечивают бессерверное выполнение в среде Workers. Доступен щедрый бесплатный тариф. Отличный выбор для Astro, Hono и Remix.

Развертывание в Cloudflare Pages

Подключите репозиторий через панель управления Cloudflare. Или используйте wrangler CLI.

# Direct upload via wrangler:
npm install -g wrangler
wrangler login
wrangler pages deploy ./dist --project-name=my-site

# Or push to GitHub — auto-deploys.

wrangler.toml для Pages

Cloudflare Pages использует wrangler.toml для конфигурации Workers и функций.

# wrangler.toml
name = "my-site"
compatibility_date = "2024-01-01"
pages_build_output_dir = "dist"

[vars]
API_URL = "https://api.example.com"

[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "..."

Предварительные развертывания

Все три платформы создают уникальный URL для каждой ветки PR. Рецензенты могут выполнить click по ссылке и протестировать изменения изолированно. Теперь это стандартный рабочий процесс команды.

Переменные среды

Все три платформы предлагают отдельные env-переменные для каждой среды (production, preview, development) через панель управления или CLI. Переменные фронтенда должны иметь специальный префикс (Vite: VITE_, Next: NEXT_PUBLIC_), чтобы попасть в браузер.

# Vercel:
vercel env add API_URL production

# Netlify:
netlify env:set API_URL https://api.example.com

# Cloudflare Pages:
wrangler pages secret put API_URL

Пользовательские домены и SSL

Все три платформы автоматически обрабатывают сертификаты SSL (Let's Encrypt). Укажите их целевой адрес в записи DNS A/CNAME — платформа выпустит и продлит сертификаты. Пользовательские домены бесплатны на всех платных тарифах.

Как выбрать одну из трех платформ

Vercel: лучший выбор для Next.js, отточенный DX, немного дороже. Netlify: лучший выбор для форм и идентификации, зрелая экосистема плагинов. Cloudflare Pages: лучшая производительность на периферии, самая низкая стоимость при масштабировании, отличная интеграция с Workers. Все три платформы превосходны.

Быстрая проверка

Как обычно создают пригодный для развертывания URL предварительного просмотра для запроса на слияние в Vercel, Netlify или Cloudflare Pages?

Ответь в интерактивном уроке

Повторение: размещение фронтенда

Vercel: лучшая интеграция с Next.js. Netlify: формы, идентификация и плагины. Cloudflare Pages: производительность на периферии и самая низкая стоимость. Все три платформы предлагают автоматические развертывания на основе Git, URL предварительного просмотра для каждого PR, env-переменные для каждой среды, автоматический SSL и пользовательские домены. Настройка выполняется через панель управления или конфигурационный файл соответствующей платформы (vercel.json, netlify.toml, wrangler.toml).

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 41
Уроки: 163

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Развёртывание в Vercel, Netlify и Cloudflare Pages» бесплатный?

Да — полный текст урока «Развёртывание в Vercel, Netlify и Cloudflare Pages» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Развёртывание в Vercel, Netlify и Cloudflare Pages»?

Подключите репозиторий к каждой платформе, настройте команды сборки и каталоги вывода и изучите предварительные развёртывания для веток Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Развёртывание в Vercel, Netlify и Cloudflare Pages»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

GitHub Actions для фронтенда: проверка, тестирование и сборка
Развёртывание в Vercel, Netlify и Cloudflare Pages
Переменные окружения в CI
Автоматические проверки Lighthouse

← Назад к Frontend Academy