Как деплоить React приложение: от сборки до продакшена

После того как вы написали React-приложение, наступает ключевой этап — деплой (развертывание) на сервер, чтобы оно стало доступно пользователям. В этом гайде мы подробно разберем, как подготовить приложение к продакшену, настроить веб-сервер и автоматизировать процесс. Вы научитесь создавать оптимизированную сборку, настраивать Nginx для корректной работы клиентской маршрутизации и интегрировать деплой в CI/CD пайплайн.

1. Подготовка React приложения к деплою

Перед тем как выкладывать приложение в публичный доступ, необходимо собрать его production-версию. В этом процессе React-код транспилируется, минифицируется и оптимизируется для лучшей производительности.

Создание production-сборки

Если вы использовали create-react-app, сборка выполняется одной командой:

npm run build

Эта команда создаст папку build (или dist для Vite), содержащую статические файлы: HTML, CSS, JavaScript и медиа. Именно содержимое этой папки нужно будет скопировать на сервер.

Если вы используете Vite, команда будет:

npm run build

Результат сборки по умолчанию находится в папке dist. Убедитесь, что в вашем package.json скрипт build настроен корректно.

Анализ сборки и оптимизация

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

• Source Map Explorer: npx source-map-explorer build/static/js/*.js
• Vite Bundle Visualizer: npm run build -- --report (требует настройки плагина)

Основные рекомендации по оптимизации:

• Используйте lazy loading для маршрутов с помощью React.lazy() и Suspense.
• Настройте code splitting (по умолчанию работает в CRA и Vite).
• Убедитесь, что неиспользуемые зависимости удалены из проекта.

Что такое деплой React приложения и как выбрать инфраструктуру

Деплой React приложения — это процесс размещения собранных статических файлов на сервере, доступном по сети. Поскольку React-приложение после сборки представляет собой набор статики, вы можете выбрать различные варианты хостинга:

• Статический хостинг: Netlify, Vercel, GitHub Pages. Самый простой и быстрый способ, часто с бесплатным тарифом и автоматическим деплоем из Git.
• Облачные хранилища: AWS S3, Google Cloud Storage. Требуют настройки, но дают полный контроль.
• Виртуальный выделенный сервер (VPS): Selectel, DigitalOcean, Hetzner. Максимальная гибкость: вы сами управляете веб-сервером (Nginx, Apache) и окружением.
• Платформенный хостинг (PaaS): Heroku, Render. Подходят, если нужно быстро запустить приложение без низкоуровневой настройки, но для статики часто менее удобны, чем специализированные решения.

Для большинства проектов статического хостинга или VPS будет достаточно. Выбор зависит от потребностей: если вам нужны серверные вычисления, прокси или кастомизированная конфигурация, лучше выбрать VPS. Например, хостинг сайтов Selectel предлагает виртуальные серверы с широкими возможностями настройки.

Настройка веб-сервера для React приложения

Если вы выбрали VPS, вам потребуется установить и настроить веб-сервер. Самый популярный выбор — Nginx благодаря производительности и гибкости.

Настройка Nginx для одностраничного приложения (SPA)

Главная особенность SPA — клиентская маршрутизация. При обновлении страницы или прямом переходе по URL сервер должен всегда отдавать index.html, иначе вы получите ошибку 404. Вот базовая конфигурация Nginx, которая решает эту проблему:

server {
    listen 80;
    server_name example.com;

    root /var/www/my-react-app/build;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires max;
        log_not_found off;
    }
}

Разберем ключевые моменты:

• try_files $uri $uri/ /index.html — если запрошенный файл не найден, отдается index.html, что позволяет React Router корректно обработать маршрут.
• Для статических ресурсов (js, css, изображения) установлена максимальная продолжительность кеширования (expires max), так как в production-сборке имена файлов содержат хэши содержимого.

Управление кешированием

Правильное кеширование критически важно для производительности. Для файлов с хэшами (обычно в build/static) мы устанавливаем долгосрочное кеширование. Для index.html рекомендуется отключить кеширование или установить короткое время, чтобы пользователи всегда получали актуальную версию приложения:

location = /index.html {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
}

Автоматизация деплоя с помощью CI/CD

Ручное копирование файлов на сервер после каждого обновления — процесс, чреватый ошибками. Настройка CI/CD позволяет автоматизировать сборку и деплой при пуше в репозиторий.

Пример GitHub Actions для деплоя на VPS

Предположим, вы используете GitHub и VPS. Вот пример workflow, который собирает приложение и загружает его на сервер через SSH:

name: Deploy React App

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
    - run: npm ci
    - run: npm run build
    - name: Deploy to VPS
      uses: easingthemes/ssh-deploy@main
      env:
        SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
        ARGS: "-rlgoDzvc -i"
        SOURCE: "build/"
        REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
        REMOTE_USER: ${{ secrets.REMOTE_USER }}
        TARGET: ${{ secrets.REMOTE_TARGET }}

Не забудьте добавить секреты в настройках репозитория: закрытый SSH-ключ, хост, пользователя и путь к целевой папке. После каждого пуша в main новый код будет автоматически развернут.

Для статического хостинга (Netlify, Vercel) процесс еще проще: достаточно связать репозиторий, и каждый пуш в указанную ветку автоматически запускает сборку и деплой.

Распространенные ошибки при деплое React приложений

Даже при правильной настройке могут возникать проблемы. Рассмотрим самые частые и способы их решения.

• Ошибка 404 при перезагрузке страницы — сервер не настроен на отдачу index.html для всех маршрутов. Решение: добавить try_files $uri $uri/ /index.html в конфигурации Nginx или аналогичную настройку для Apache.
• Пустая страница или ошибки CORS — возможно, в сборке указаны неверные пути. Проверьте homepage в package.json для CRA или base в конфигурации Vite. Если приложение размещено в подпапке, это обязательно нужно указать.
• Устаревший контент после обновления — проблема кеширования. Убедитесь, что index.html не кешируется браузером и CDN. Используйте Cache-Control: no-cache для этого файла.
• Медленная загрузка первого экрана — бандл слишком большой. Используйте code splitting, сжатие gzip или brotli на сервере, а также оптимизируйте изображения.

Заключение

Деплой React приложения — это не просто копирование файлов на сервер. Правильный подход включает оптимизированную сборку, грамотную настройку веб-сервера с учетом особенностей SPA и автоматизацию процесса. Независимо от того, выберете вы статический хостинг или VPS, соблюдение этих принципов обеспечит быструю загрузку и надежную работу вашего приложения.

Если вы планируете использовать VPS для размещения, обратите внимание на надежного провайдера. хостинг сайтов Selectel предлагает гибкие тарифы и удобную панель управления, что упрощает настройку серверов под ваши задачи.