Как задеплоить React приложение на Vercel

Вы написали React-приложение и хотите показать его миру - но не знаете, как выложить его в интернет быстро и бесплатно? Vercel решает эту задачу за несколько минут. В этой статье разберём полный процесс деплоя React на Vercel: от создания аккаунта до настройки переменных окружения и кастомного домена. Подойдёт как новичкам, так и тем, кто уже работал с хостингом, но хочет упростить CI/CD.

Что такое Vercel и зачем он нужен для React

Vercel - это облачная платформа для деплоя фронтенд-приложений и serverless-функций. Изначально создана командой Next.js, но отлично работает с любым React-проектом, включая приложения на Vite, Create React App и другие сборщики.

Главные преимущества:

• Бесплатный Hobby-план - достаточно для большинства пет-проектов и портфолио.

• Автодеплой из GitHub - каждый пуш в репозиторий автоматически запускает новый деплой.

• CDN по всему миру - ваш сайт грузится быстро из любой точки планеты.

• HTTPS из коробки - SSL-сертификат выдаётся автоматически.

• Preview deployments - каждый pull request получает отдельный URL для тестирования.

Почему Vercel - хороший выбор именно для React

React создаёт статические файлы после сборки (npm run build). Vercel умеет их раздавать через CDN без настройки серверов, Nginx или Docker. Вы не думаете об инфраструктуре - просто пушите код.

В отличие от традиционного хостинга, где нужно вручную копировать файлы через FTP или настраивать pipeline, Vercel интегрируется с Git и деплоит автоматически. Это особенно удобно при командной работе: каждая ветка получает свой preview-URL.

Частые ошибки при деплое React на Vercel

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

1. Белый экран после деплоя Причина: неправильные пути к ресурсам. Если в package.json не указан homepage или в Vite нет base, пути к JS/CSS файлам ломаются.

2. Роутинг не работает - при обновлении страницы 404 React Router работает на клиенте, но Vercel не знает, что все пути должны возвращать index.html. Нужен файл vercel.json с rewrites.

3. Переменные окружения не подтягиваются Переменные из .env не попадают в продакшен автоматически - их нужно добавить в настройках проекта на Vercel.

4. Сборка падает из-за предупреждений ESLint Create React App по умолчанию трактует ESLint-предупреждения как ошибки при сборке. Либо исправляйте предупреждения, либо отключайте это поведение.

5. Неверная команда сборки или выходная директория Vercel умеет автоопределять настройки, но иногда ошибается - особенно с нестандартными конфигурациями Vite или монорепозиториями.

Пошаговый деплой React приложения на Vercel

Шаг 1. Подготовьте проект

Убедитесь, что приложение собирается локально:

npm run build

После этого должна появиться папка dist (Vite) или build (CRA) со статическими файлами.

Если используете Vite, проверьте vite.config.js - при деплое на корневой домен base можно не указывать, но если сайт живёт в подпапке, добавьте:

// vite.config.js
export default {
  base: '/my-app/',
}

Шаг 2. Загрузите проект на GitHub

Vercel работает через Git-интеграцию. Если проект ещё не в репозитории:

git init
git add .
git commit -m "initial commit"
gh repo create my-react-app --public --push

Или создайте репозиторий вручную на github.com и запушьте код туда.

Шаг 3. Зарегистрируйтесь на Vercel

Перейдите на vercel.com и нажмите Sign Up. Рекомендуется войти через GitHub - это упростит импорт репозиториев.

Шаг 4. Импортируйте репозиторий

1. На дашборде нажмите Add New → Project.

2. Выберите нужный репозиторий из списка GitHub.

3. Vercel автоматически определит фреймворк (Vite, CRA и т.д.) и предложит настройки.

Проверьте:

• Framework Preset - должно быть Vite или Create React App.

• Build Command - обычно npm run build или vite build.

• Output Directory - dist для Vite, build для CRA.

Шаг 5. Добавьте переменные окружения (если нужно)

Если в проекте есть .env файл с переменными вида VITE_API_URL=..., добавьте их в раздел Environment Variables перед деплоем. Для Vite все переменные должны начинаться с VITE_, иначе они не попадут в сборку.

Шаг 6. Нажмите Deploy

Кликните Deploy - Vercel запустит сборку и через 1-2 минуты выдаст URL вида your-app.vercel.app.

Решение проблемы с React Router (404 на обновление)

Если используете react-router-dom, создайте файл vercel.json в корне проекта:

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Это говорит Vercel: все пути → отдавай index.html, а маршрутизацией займётся React Router на клиенте. Закоммитьте файл и запушьте - Vercel сам подхватит изменения.

Примеры: типичные конфигурации

Vite + React

// vercel.json
{
  "buildCommand": "vite build",
  "outputDirectory": "dist",
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Create React App

Для CRA дополнительный vercel.json обычно не нужен - Vercel определяет его автоматически. Но если роутинг не работает:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

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

# .env.local (не коммитьте в git!)
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My React App

В коде:

const apiUrl = import.meta.env.VITE_API_URL;

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

Можно ли деплоить React на Vercel бесплатно? Да. Hobby-план бесплатен навсегда для личных проектов. Ограничения: 100 GB трафика/месяц и 6000 минут сборки - для большинства проектов этого более чем достаточно.

Vercel поддерживает только Next.js? Нет. Vercel работает с любым фронтенд-фреймворком: React (Vite, CRA), Vue, Svelte, Angular, Astro и другими.

Как обновить деплой после изменений в коде? Просто сделайте git push. Vercel автоматически запустит новый деплой при каждом пуше в основную ветку.

Как подключить собственный домен? В настройках проекта перейдите в Domains, добавьте ваш домен и пропишите DNS-записи у регистратора. Vercel выдаст инструкцию с нужными значениями CNAME или A-записей.

Как посмотреть логи сборки, если деплой упал? На странице деплоя нажмите на него - откроются подробные логи. Там видно, на каком шаге сборка упала и почему.

Можно ли деплоить из ветки, а не из main? Да. В настройках проекта выберите нужную ветку как Production Branch. Остальные ветки получают Preview deployments.

Что если я не хочу деплоить при каждом пуше? В настройках можно отключить автодеплой или добавить условие через Ignored Build Step - например, деплоить только при изменениях в папке src.

Vercel поддерживает серверный рендеринг для React? Базовый React (CRA, Vite) - только статика. Для SSR используйте Next.js или Remix, которые тоже отлично работают на Vercel.

Полезные советы и лучшие практики

• Не храните секреты в .env, который закоммичен в git. Используйте .env.local - он игнорируется по умолчанию.

• Используйте Preview URLs для тестирования PR. Каждый pull request получает отдельный URL - покажите его заказчику или коллеге перед мержем.

• Следите за размером бандла. Vercel показывает размер после каждого деплоя - если он растёт, проверьте зависимости через npm run build -- --analyze (для CRA) или плагин vite-bundle-analyzer.

• Настройте vercel.json для кастомных заголовков. Например, можно добавить заголовки безопасности:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "X-Frame-Options", "value": "DENY" }
      ]
    }
  ]
}

• Используйте Vercel CLI для деплоя без GitHub. Установите npm i -g vercel и выполните vercel в папке проекта - удобно для быстрых экспериментов.

npm i -g vercel
vercel login
vercel

Итог

Деплой React-приложения на Vercel - один из самых быстрых способов выложить проект в интернет. Главное: убедиться, что сборка проходит локально, загрузить код на GitHub, импортировать репозиторий в Vercel и при необходимости добавить vercel.json для корректного роутинга. Переменные окружения добавляются в дашборд, а не в репозиторий. После первого деплоя все последующие обновления происходят автоматически при пуше в ветку.