React Academy · Урок

Развёртывание в Vercel: нулевая настройка и предварительные URL

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

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

Зачем нужен Vercel?

Vercel — это платформа, созданная командой Next.js. Она предлагает развёртывание без настройки: подключите репозиторий GitHub, и Vercel автоматически определит фреймворк, соберёт и развернёт приложение при каждом отправленном изменении.

Подключение репозитория

Импортируйте репозиторий GitHub/GitLab/Bitbucket с панели управления Vercel. Vercel определяет фреймворк (Next.js, Vite, CRA) и автоматически настраивает параметры сборки.

Настройки проекта

Vercel автоматически определяет фреймворк, команду сборки (npm run build), выходной каталог (.next, dist) и команду установки (npm install). При необходимости переопределите эти параметры в настройках проекта.

Переменные окружения

Добавьте переменные окружения на панели управления Vercel в разделе Настройки проекта → Переменные окружения. Задайте разные значения для рабочего, предварительного и локального окружений.

# In Vercel dashboard:
# NEXT_PUBLIC_API_URL = https://api.example.com  (Production)
# NEXT_PUBLIC_API_URL = https://api-staging.example.com  (Preview)

# In code:
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

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

Каждая отправка ветки Git и каждый запрос на слияние получают уникальный URL предварительного просмотра (например, myapp-git-feature-xyz.vercel.app). Поделитесь им для проверки до слияния — ручная среда подготовки не нужна.

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

Добавьте пользовательский домен на панели управления Vercel. Укажите в DNS-записи (A или CNAME) IP-адреса Vercel, и Vercel автоматически займётся выпуском сертификата SSL.

Настройка vercel.json

Точно настройте поведение развёртывания: перенаправления, заголовки, правила перезаписи и выбор региона.

// vercel.json
{
  "redirects": [
    { "source": "/old-blog/:path*", "destination": "/blog/:path*", "permanent": true }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ],
  "regions": ["iad1"] // deploy edge functions to US East
}

CLI Vercel

Используйте CLI Vercel, чтобы выполнять развёртывание из терминала, загружать переменные окружения локально и управлять проектами.

# Install:
npm install -g vercel

# Link project and deploy:
vercel

# Pull env variables for local dev:
vercel env pull .env.local

# Deploy to production:
vercel --prod

Бессерверные функции

Файлы в api/ (маршрутизатор Pages) или app/api/*/route.ts (маршрутизатор App) автоматически развёртываются как бессерверные функции в периферийной или среде выполнения Node.js Vercel.

Хуки развёртывания

Создавайте хуки развёртывания (URL веб-перехватчиков), чтобы запускать развёртывания из внешних служб — например, при изменениях содержимого CMS, после которых сайт нужно развернуть заново.

# Trigger a deploy from a CMS webhook:
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy

# In Sanity Studio:
// Call this URL on document publish

Развёртывание монорепозитория

В монорепозитории Nx или Turborepo укажите в Vercel корневой каталог конкретного приложения и настройте команду сборки на использование средства управления задачами монорепозитория.

# Vercel project settings:
# Root Directory: apps/web
# Build Command: npx nx build web --prod
# Output Directory: apps/web/.next

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

Что такое предварительное развёртывание Vercel?

Итоги

Подключите репозиторий Git к Vercel для развёртывания без настройки. Каждая ветка получает URL предварительного просмотра. Управляйте переменными окружения для каждого окружения на панели управления, используйте vercel.json для перенаправлений и заголовков, а CLI Vercel — для развёртывания из терминала и загрузки переменных окружения.

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

Урок «Развёртывание в Vercel: нулевая настройка и предварительные URL» бесплатный?

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

Чему я научусь в уроке «Развёртывание в Vercel: нулевая настройка и предварительные URL»?

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

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

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

Сколько времени занимает урок «Развёртывание в Vercel: нулевая настройка и предварительные URL»?

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

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

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

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

Развёртывание в Vercel: нулевая настройка и предварительные URL
Размещение React SPA в AWS S3 и CloudFront
Контейнеризация приложения React/Next.js
CI/CD React с GitHub Actions

← Назад к React Academy