Как установить и настроить фреймворк React на сервере

Развернуть React на сервере несложно: ставим Node.js, собираем production build и раздаём его через Express с автозапуском по PM2. React — популярная JavaScript-библиотека для создания пользовательских интерфейсов от Facebook. Она позволяет строить быстрые интерактивные приложения из независимых компонентов. Ниже сначала кратко о самом React, а затем — пошаговое развёртывание на сервере.

---

⚛️ Что такое React

React разбивает весь интерфейс на независимые компоненты, каждый из которых отвечает за свою часть — это упрощает разработку, тестирование и переиспользование кода. Ключевые особенности:

• Компонентный подход — интерфейс собирается из переиспользуемых блоков;
• JSX — синтаксическое расширение, позволяющее писать HTML-подобный код прямо в JavaScript;
• Виртуальный DOM — копия реального DOM, благодаря которой обновляются только изменённые части интерфейса, что ускоряет работу;
• Однонаправленный поток данных — данные идут от родительских компонентов к дочерним, что делает код предсказуемым и удобным для отладки;
• Большое сообщество — множество готовых библиотек, инструментов и качественная документация.

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

---

🚀 Как установить и развернуть React на сервере

Развёртывание состоит из нескольких шагов: установить инструменты, создать проект, собрать его, настроить сервер для раздачи приложения и запустить. Используем Node.js и Express для сервера и npm для управления пакетами.

Шаг 1 — Установка Node.js и npm

Перейди на официальный сайт Node.js и скачай последнюю LTS-версию (Long Term Support). Вместе с Node.js автоматически установится npm (Node Package Manager).

Открой терминал и проверь, что всё установилось:

node -v
npm -v

Шаг 2 — Создание проекта React

Установи инструмент create-react-app для быстрого создания проекта:

npm install -g create-react-app

Перейди в нужную директорию и создай проект (замени my-react-app на своё имя):

create-react-app my-react-app

Зайди в папку проекта и запусти локальный сервер разработки:

cd my-react-app
npm start

Приложение будет доступно по адресу http://localhost:3000.

Шаг 3 — Подготовка к развёртыванию

Когда приложение готово, собери production build — оптимизированную версию для развёртывания:

npm run build

Команда создаст в корне проекта папку build с оптимизированными файлами.

Шаг 4 — Сервер на Node.js с Express

В корне проекта создай файл server.js:

const express = require('express');
const path = require('path');
const app = express();

// Раздаём статические файлы из папки build
app.use(express.static(path.join(__dirname, 'build')));

// Все GET-запросы обслуживаем файлом index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Установи Express (фиксируем 4-ю версию — см. примечание ниже):

npm install express@4

Шаг 5 — Развёртывание на сервере

Скопируй проект на сервер — через SSH и SCP, FTP или любым удобным способом. Затем перейди в директорию проекта и установи зависимости:

npm install

Запусти сервер:

node server.js

Шаг 6 — Процесс-менеджер PM2

Чтобы приложение перезапускалось при сбоях и стартовало вместе с сервером, используй процесс-менеджер PM2. Установи его:

npm install -g pm2

Запусти приложение через PM2:

pm2 start server.js

Сохрани конфигурацию и настрой автозапуск:

pm2 save
pm2 startup

Теперь React-приложение доступно по адресу твоего сервера и работает в фоне.

---

❓ Частые вопросы

Какой VPS нужен для React-приложения?

Сам собранный build — это статика, а Node.js-сервер с Express нетребователен, поэтому для большинства проектов хватит базового VPS. Запас по CPU и RAM понадобится при высокой посещаемости или если на том же сервере крутится бэкенд и база данных.

Чем заменить create-react-app?

create-react-app в 2025 году объявлен устаревшим, и команда React больше его не рекомендует. Для новых проектов лучше использовать Vite (npm create vite@latest) или фреймворк вроде Next.js — они быстрее и активно поддерживаются. Шаги развёртывания (build → Express/Nginx → PM2) при этом остаются теми же.

Зачем нужен Express, если build статический?

Express раздаёт файлы из папки build и возвращает index.html на любой маршрут — это нужно для корректной работы клиентской маршрутизации SPA (когда пользователь открывает ссылку напрямую). Вместо Express статику можно отдавать и через Nginx.

Как сделать так, чтобы приложение запускалось само?

Используй процесс-менеджер PM2: команды pm2 start server.js, pm2 save и pm2 startup обеспечат автозапуск при перезагрузке сервера и перезапуск приложения при сбоях.

Нужен ли отдельный веб-сервер вроде Nginx?

Не обязательно — Express справится сам. Но Nginx перед приложением удобен для SSL, кеширования статики и проксирования: тогда Node.js-сервер работает на внутреннем порту, а Nginx принимает внешние запросы.

---