Урок 29: Сборка и деплой приложения в React

На 29-ом уроке мы подходим к одному из самых волнующих и важных этапов в жизни любого проекта, его выходу в свет. Если до этого момента наше приложение жило только на нашем локальном компьютере и любовались на него лишь мы да, возможно, кошка, проходящая мимо монитора, то сегодня мы это исправим. Мы будем выносить наш React-проект в продакшен, создадим оптимизированную сборку и разместим его на бесплатных хостингах, чтобы ссылкой на наше творчество можно было похвастаться с друзьями, коллегами или заказчиком.

Этот урок своеобразный выпускной бал для нашего приложения. Мы прошли долгий путь, изучили основы JSX, управление состоянием, работу с компонентами, побороли побочные эффекты и научились общаться с сервером. Теперь пришло время упаковать все наши наработки в аккуратный, быстрый и готовый к работе боевой пакет. Не стоит недооценивать этот этап. Понимание того, как работает процесс сборки и развертывания является ключевым навыком современного фронтенд-разработчика. Давайте же сделаем этот финальный, но такой важный шаг вместе.

Что такое Продакшен-сборка?

Когда мы работаем над проектом в режиме разработки, мы используем npm start или yarn start. В этом режиме Create React App (и аналогичные инструменты) предоставляют нам массу удобств. Горячую перезагрузку модулей (HMR), когда изменения в коде мгновенно отображаются в браузере без полной перезагрузки страницы; подробные предупреждения и сообщения об ошибках прямо в консоли браузера; и что самое главное, source maps, которые позволяют нам отлаживать наш красивый, читаемый код, а не тот минифицированный ком, который на самом деле выполняется браузером. Однако за все эти удобства приходится платить производительностью и размером бандла.

Продакшен-сборка это процесс трансформации нашего «сырого» кода для разработки в оптимизированную, сжатую и готовую к развертыванию на сервере версию. Основная цель этого процесса, сделать наше приложение как можно меньше и быстрее. Представьте, что пользователь заходит на наш сайт с мобильного интернета. Мы хотим, чтобы страница загрузилась за долю секунды, а не заставляла его ждать, пока скачаются десятки мегабайт неоптимизированного кода. Именно этим и занимается скрипт build.

Вот что конкретно происходит во время сборки. Во-первых, весь наш JavaScript-код, включая зависимости из node_modules, проходит через процесс под названием минификация. Все пробелы, переносы строк и комментарии удаляются, а имена переменных и функций (за исключением тех, что используются глобально) заменяются на короткие, обычно односимвольные. Это радикально сокращает объем передаваемых данных. Во-вторых, код подвергается tree shaking (встряхиванию дерева). Этот умный алгоритм анализирует импорты и экспорты в нашем коде и выкидывает те модули и функции, которые мы нигде не используем. Если вы импортировали большую библиотеку ради одной-единственной функции, в продакшен-сборку попадет только она, а не вся библиотека целиком.

Создаем оптимизированную версию приложения

Сам процесс запуска сборки до смешного прост. Все суть скрыта под одним единственным скриптом в нашем package.json. Откройте терминал в корневой директории вашего React-проекта и выполните следующую команду:

npm run build

Или, если вы используете Yarn:

yarn build

После запуска этой команды вы увидите в терминале активный вывод. Инструменты будут компилировать ваш код, проводить те самые операции минификации и tree shaking, а также копировать статические файлы (из папки public, такие как index.html, favicon, манифест). Весь этот процесс может занять от нескольких секунд до минуты, в зависимости от размера и сложности вашего проекта.

Когда процесс завершится успешно, вы увидите сообщение, похожее на «The build folder is ready to be deployed». В корне вашего проекта появится новая папка с названием build. Это и есть наше готовое приложение. Давайте заглянем внутрь. Вы увидите index.html, папку static (обычно static/js и static/css), а также другие ассеты, которые вы использовали. Файлы внутри static/js и static/css будут иметь странные имена, содержащие хэши (например, main.a1b2c3d4.js). Это сделано для кэширования, когда вы выпустите новую версию приложения, имя файла изменится, и браузеры пользователей принудительно загрузят новую версию, а не будут использовать старую из кэша.

Практическая задача 1: Создайте свою первую сборку

1. Откройте ваш текущий учебный проект на React (это может быть любое приложение, которое мы создавали в рамках курса, например, список задач или небольшой блог).

2. В терминале, убедившись, что вы находитесь в корне проекта, выполните команду npm run build.

3. Дождитесь завершения процесса.

4. Исследуйте содержимое папки build. Попробуйте открыть файл build/index.html прямо в вашем браузере (просто перетащите его в окно браузера). Приложение должно работать, но возможно, вы столкнетесь с проблемами с маршрутизацией, если она у вас есть. Не пугайтесь, это нормально для локального открытия, на реальном сервере все будет работать корректно.

Куда можно разместить React-приложение?

Итак, у нас есть папка build, это наш скомпилированный готовый к бою проект. Что же делать с ней дальше? Нам нужен сервер, который будет раздавать эти файлы пользователям, когда они переходят по нашему адресу в интернете. Этот процесс размещения кода на сервере и называется деплоем (от англ. deploy — развертывание).

В мире веб-разработки существует множество вариантов для хостинга, от классических виртуальных хостингов до мощных облачных платформ. Для наших учебных и даже небольших коммерческих проектов идеально подходят современные сервисы, которые часто объединяют под термином Jamstack. Их ключевые преимущества, что они бесплатны для небольших проектов, невероятно просты в использовании и предоставляют отличную производительность благодаря раздаче файлов через CDN (Content Delivery Network).

Два самых популярных и удобных сервиса, которые мы сегодня рассмотрим это Vercel и Netlify. Оба они были созданы с учетом современных фронтенд-фреймворков, включая React и имеют тесную интеграцию с GitHub, что делает процесс деплоя практически магическим. Вы просто подключаете ваш репозиторий и любое обновление кода в нем (например, при пуше в ветку main) автоматически запускает процесс сборки и деплоя новой версии. Это называется Continuous Deployment (непрерывное развертывание).

Деплой на Vercel

Vercel это компания, стоящая за фреймворком Next.js, но она прекрасно подходит и для деплоя обычных SPA (Single Page Application), созданных с помощью Create React App. Интерфейс Vercel интуитивно понятен, а скорость работы поражает.

Способ 1: Через интерфейс Vercel (рекомендуется для начала)

1. Подготовка. Убедитесь, что ваш проект залит на GitHub. Это обязательное условие для данного способа.

2. Регистрация. Перейдите на сайт vercel.com и зарегистрируйтесь. Лучше всего использовать ваш аккаунт GitHub, это упростит интеграцию.

3. Создание проекта. Нажмите кнопку «Add New…» -> «Project».

4. Импорт репозитория. Vercel предложит вам выбрать репозиторий из вашего GitHub. Выберите тот, в котором лежит ваш React-проект. Если репозитория нет в списке, возможно, нужно настроить доступ Vercel к вашим GitHub-репозиториям.

5. Настройка. Vercel автоматически определит, что это Create React App проект. Он сам подставит нужные команды:

   • Build Command: npm run build

   • Output Directory: build
     Обычно менять ничего не нужно. Просто нажмите «Deploy».

6. Буквально через минуту ваше приложение будет жить в интернете! Vercel предоставит вам уникальный URL вида ваш-проект.vercel.app. Вы можете делиться этой ссылкой с кем угодно.

Способ 2: Через Vercel CLI (для любителей терминала)

Если вы любите работать из консоли, Vercel предоставляет свой CLI (Command Line Interface).

1. Установите CLI глобально: npm i -g vercel

2. В корне вашего проекта выполните команду vercel.

3. Впервые запуская команду, вы должны войти в свой аккаунт, следуя инструкциям.

4. CLI задаст несколько вопросов. Просто нажимайте Enter, чтобы принять значения по умолчанию, они почти всегда верны для CRA.

5. После этого ваш проект будет развернут, а в терминале появится ссылка.

Практическая задача 2: Разверните проект на Vercel

1. Создайте новый репозиторий на GitHub и запуште в него код вашего React-проекта (включая папку build в .gitignore!).

2. Зайдите на Vercel и выполните шаги из «Способа 1».

3. Поделитесь полученной ссылкой в комментариях под этим уроком! Давайте посмотрим, что у всех получилось.

Деплой на Netlify

Netlify еще один гигант в мире хостинга для статических сайтов. Он так же прост и мощен, как Vercel и предлагает схожий функционал.

Способ 1: Drag-and-Drop (Самый быстрый способ для разового деплоя)

Этот способ не требует даже GitHub! Но он не поддерживает автоматический деплой при обновлениях.

1. Подготовка. Убедитесь, что вы создали продакшен-сборку (npm run build). Ваша папка build готова.

2. Регистрация. Перейдите на netlify.com и зарегистрируйтесь.

3. Перетаскивание. На главной странице вашей учетной записи Netlify найдите область с подписью «Want to deploy a new site without connecting to Git? Drag and drop your site folder here». Просто перетащите всю папку build из вашего проекта в эту область.

4. Netlify мгновенно загрузит файлы и даст вам случайный URL для вашего сайта. Все!

Способ 2: Через Git (Рекомендуется для постоянных проектов)

Этот способ настраивает автоматический деплой, как и в Vercel.

1. Подготовка. Ваш проект должен быть на GitHub, GitLab или Bitbucket.

2. Создание сайта. В панели Netlify нажмите «Add new site» -> «Import an existing project».

3. Выбор провайдера. Выберите ваш хостинг кода (например, GitHub) и авторизуйтесь.

4. Выбор репозитория. Выберите репозиторий с вашим React-проектом.

5. Настройка сборки. Netlify запросит настройки:

   • Build Command. npm run build

   • Publish directory. build
     Нажмите «Deploy site».

Netlify также предоставит вам URL вида случайное-название.netlify.app. Вы можете изменить его на более удобный в настройках сайта.

Работа с клиентским роутингом (React Router)

Одна из частых проблем, с которой сталкиваются начинающие при деплое SPA, это «сломанные» страницы при прямом переходе по URL или после перезагрузки. В режиме разработки на нашем локальном сервере этой проблемы нет, потому что react-scripts (часть CRA) настроен корректно обрабатывать все запросы, возвращая index.html. Но на продакшен-сервере, когда вы переходите по пути, например, /about, сервер ищет файл about.html, которого не существует и возвращает ошибку 404.

И Vercel и Netlify умеют решать эту проблему с помощью специального конфигурационного файла.

Для Vercel: Создайте в корне вашего проекта (рядом с package.json) файл с названием vercel.json и следующим содержимым:

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

Этот файл говорит серверу Vercel: «На любой запрос (/(.*)) отвечай содержимым файла index.html». Дальше маршрутизацией займется React Router уже на стороне клиента.

Для Netlify создайте в корне вашего проекта (обычно это также и корень папки public) файл с названием _redirects (без расширения) и следующим содержимым:

/*    /index.html   200

Эта директива делает то же самое: перенаправляет все запросы на index.html с статусом 200 (Успех).

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

Практическая задача 3: Настройте роутинг для деплоя

1. Если в вашем проекте используется React Router, добавьте в него хотя бы один дополнительный маршрут (например, /contact).

2. Создайте соответствующий файл конфигурации (vercel.json или _redirects) в вашем проекте.

3. Запушьте изменения в GitHub.

4. Убедитесь, что ваш хостинг (Vercel/Netlify) автоматически переразвернул приложение.

5. Проверьте, что теперь вы можете напрямую переходить по ссылке ваш-сайт.vercel.app/contact и не получать ошибку 404.

Переменные окружения в продакшене

Мы помним, что в режиме разработки мы хранили чувствительные данные, вроде API-ключей, в файле .env.local и обращались к ним через process.env.REACT_APP_.... Для продакшена нам тоже нужны переменные окружения, но на хостинге.

И Vercel и Netlify позволяют легко их задать.

• В Vercel. Зайдите в настройки вашего проекта в панели Vercel, найдите раздел «Environment Variables». Добавьте там ваши переменные с тем же именем, что и в .env.local (например, REACT_APP_API_KEY).

• В Netlify. В панели управления сайтом перейдите в «Site settings» -> «Environment variables». Добавьте их там.

После добавления переменных нужно сделать новый деплой (обычно это происходит автоматически при пуше в репозиторий или можно запустить вручную из панели), чтобы новые значения подхватились.

Итоги и заключение

Вы только что прошли один из самых важных и приятных этапов в разработке. Теперь вы умеете упаковывать их и выводить в реальный мир. Мы с вами разобрались, чем продакшен-сборка отличается от dev-версии, научились запускать npm run build, исследовали папку build и самое главное развернули наш проект на двух лучших бесплатных хостингах, Vercel и Netlify.

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

Спасибо, что были со мной на этом пути. До встречи в финальном уроке!

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