Вы создали React-приложение, добавили в него крутые функции, и теперь готовы показать его миру. Но как сделать так, чтобы ваше приложение заработало в интернете? В этой статье разберём, как подготовить React-приложение к деплою, разместить его на популярных платформах (Vercel, Netlify и GitHub Pages), и обсудим, как улучшить его производительность.

Теория: Подготовка приложения к продакшену

Прежде чем размещать приложение, важно убедиться, что оно готово к продакшену. Вот несколько ключевых шагов:

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

React-приложения разрабатываются в режиме разработки (development mode), но для продакшена нужно создать сборку, которая:

• Удаляет все инструменты отладки.
• Минимизирует код (уменьшает его размер).
• Оптимизирует производительность.

Для создания продакшен-сборки выполните:

npm run build

Команда создаст папку build, содержащую оптимизированную версию вашего приложения. Именно её мы будем деплоить.

Подготовка к деплою

Проверьте пути: Если ваше приложение работает не на корневом домене (например, на example.com/myapp), настройте homepage в package.json:

"homepage": "https://example.com/myapp"

Исправьте ошибки: Запустите тестовое окружение:

npm start

Убедитесь, что приложение работает корректно перед созданием сборки.

Оптимизация производительности

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

• Код-сплиттинг: Разделяйте код на отдельные части, чтобы загружать только нужные модули. React поддерживает это из коробки через React.lazy и Suspense.
• Сжатие изображений: Убедитесь, что изображения оптимизированы. Используйте форматы WebP или сжатые PNG/JPEG.
• Использование CDN: Сервисы вроде Vercel и Netlify автоматически предоставляют CDN для быстрого доступа к вашему приложению по всему миру.

Анализ размера бандла: Используйте source-map-explorer, чтобы узнать, какие части кода занимают больше всего места:

npm install source-map-explorer
npm run build
npx source-map-explorer build/static/js/*.js

Деплой на популярных платформах

Существуют десятки платформ для размещения приложений, но мы рассмотрим три самых популярных: Vercel, Netlify и GitHub Pages.

Вариант 1: Деплой через Vercel

Vercel — это супербыстрая платформа для размещения фронтенд-приложений. Она проста в использовании, предоставляет автоматические деплои и CDN.

Шаги:

Установите Vercel CLI (необязательно):

npm install -g vercel

Авторизуйтесь в Vercel:

vercel login

Деплой проекта: В корне проекта выполните:

vercel

Следуйте инструкциям в терминале. Vercel автоматически определит, что это React-приложение, и задеплоит его.

Получите ссылку: После успешного деплоя Vercel предоставит URL вашего приложения, например: https://your-app.vercel.app.

Особенности:

• Бесплатный тариф позволяет разместить неограниченное количество приложений.
• Автоматическое обновление при пуше в репозиторий.

Вариант 2: Деплой через Netlify

Netlify — ещё одна популярная платформа для фронтенд-приложений с простым интерфейсом и мощными функциями.

Шаги:

Создайте учётную запись на Netlify. Перейдите на https://www.netlify.com/ и зарегистрируйтесь.

Перетащите папку build:

Создайте сборку:

npm run build

Перейдите в Netlify, выберите "Drag and Drop" и загрузите папку build.

Получите ссылку: Netlify автоматически задеплоит приложение и предоставит вам URL, например: https://your-app.netlify.app.

Автоматизация (опционально):

Свяжите Netlify с вашим репозиторием GitHub, чтобы каждый пуш автоматически обновлял приложение.

Особенности:

• Бесплатный тариф с отличным функционалом.
• Поддержка автоматического HTTPS.

Вариант 3: Деплой через GitHub Pages

GitHub Pages идеально подходит для небольших проектов и статических сайтов.

Шаги:

Установите gh-pages: Добавьте пакет для деплоя:

npm install gh-pages --save-dev

Обновите package.json: Добавьте в scripts:

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

Убедитесь, что указано поле homepage:

"homepage": "https://<ваше-имя-пользователя>.github.io/<имя-репозитория>"

Запустите деплой: Выполните:

npm run deploy

Проверьте сайт: Через несколько минут приложение будет доступно по адресу https://<ваше-имя-пользователя>.github.io/<имя-репозитория>.

Особенности:

• Бесплатно и без ограничений.
• Простая настройка для статических приложений.

Практика: Деплой приложения

Шаг 1: Подготовка приложения

Создайте простое React-приложение с помощью Create React App:

npx create-react-app my-app
cd my-app

Добавьте несколько компонентов для демонстрации. Например:

function App() {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Моё первое приложение!</h1>
      <p>Это приложение задеплоено с помощью Vercel.</p>
    </div>
  );
}

export default App;

Шаг 2: Деплой через Vercel

Установите Vercel CLI:

npm install -g vercel

Выполните деплой:

vercel

Получите ссылку и поделитесь ей! 🎉

Сжатие ресурсов:

• Используйте react-image-compressor для оптимизации изображений.
• Подключите шрифты через Google Fonts с минимальным набором символов.
• Минимизируйте бандл: Убедитесь, что вы удалили все ненужные зависимости.

Итоги

Теперь вы знаете:

• Как подготовить React-приложение к деплою.
• Как разместить его на популярных платформах (Vercel, Netlify, GitHub Pages).
• Как оптимизировать приложение для повышения производительности.

Попробуйте задеплоить ваше приложение и поделитесь ссылкой с друзьями!