Развёртывание React-приложения на сервере может показаться сложным, особенно если вы новичок в этой теме. В данном гайде мы пройдём этот путь вместе. В первой части сосредоточимся на подготовке сервера (на примере Ubuntu), чтобы он был готов к деплою нашего приложения.

Навигация по статье

Часть 1: Подготовка сервера

Шаг 1: Настройка сервера Ubuntu

Первым делом нам нужен сервер. Если у вас его ещё нет, можно арендовать виртуальную машину у любого провайдера, например, TimeWeb Cloud. Важно выбрать дистрибутив Ubuntu LTS — версии с долгосрочной поддержкой более стабильны.

Подключение к серверу

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

ssh your_user@your_server_ip

Если у вас есть SSH-ключ, аутентификация пройдёт автоматически. Иначе потребуется ввести пароль.

Обновление системы

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

sudo apt update && sudo apt upgrade -y

Шаг 2: Установка Node.js и npm

React-приложение — это JavaScript-приложение, поэтому на сервере должен быть установлен Node.js.

Установка Node.js через NodeSource

Рекомендуется использовать последнюю стабильную версию. Сначала добавим NodeSource репозиторий:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -

Затем установим Node.js и npm:

sudo apt install nodejs -y

Проверьте, что установка прошла успешно:

node -v
npm -v

Шаг 3: Установка сервера для обслуживания приложения

Ваше React-приложение нужно «представить» интернету. Один из самых популярных вариантов — Nginx. Он будет отвечать за отдачу статических файлов и может выполнять роль обратного прокси для Node.js серверов.

Установка Nginx

sudo apt install nginx -y

Запуск и проверка статуса

sudo systemctl start nginx
sudo systemctl enable nginx
sudo systemctl status nginx

Если всё в порядке, перейдите в браузере по IP-адресу вашего сервера — вы увидите стандартную страницу Nginx.

Шаг 4: Настройка брандмауэра (UFW)

Чтобы сервер был безопасен, настройте UFW (Uncomplicated Firewall). Открываем необходимые порты:

sudo ufw allow OpenSSH
sudo ufw allow 'Nginx Full'
sudo ufw enable

Проверьте статус:

sudo ufw status

На этом подготовка сервера завершена. В следующей части займёмся сборкой и загрузкой React-приложения на сервер! 🚀

Часть 2: Сборка и загрузка React-приложения на сервер

Теперь, когда наш сервер Ubuntu готов, приступим к сборке и загрузке React-приложения. В этой части мы соберём проект, перенесём файлы на сервер и настроим Nginx для его обслуживания.

Шаг 1: Сборка React-приложения

Откройте терминал на своей локальной машине и перейдите в директорию вашего проекта React:

cd path/to/your-react-app

Убедитесь, что все зависимости установлены:

npm install

Теперь соберём оптимизированную версию проекта для продакшена:

npm run build

Эта команда создаст папку build, содержащую статические файлы вашего приложения: HTML, CSS, JavaScript и изображения.

Шаг 2: Перенос файлов на сервер

Для копирования файлов на сервер используем SCP (Secure Copy Protocol):

scp -r build your_user@your_server_ip:/var/www/react_app

Здесь:

-r означает рекурсивное копирование.
/var/www/react_app — директория на сервере, где будут храниться файлы приложения. Вы можете выбрать другую директорию, но не забудьте отразить это в настройках Nginx.

Создание директории (если её нет)

Если директория /var/www/react_app не существует на сервере, создайте её заранее:

ssh your_user@your_server_ip
sudo mkdir -p /var/www/react_app
sudo chown -R $USER:$USER /var/www/react_app

Шаг 3: Настройка Nginx для React-приложения

Откроем конфигурацию Nginx для редактирования:

sudo nano /etc/nginx/sites-available/react_app

Добавьте следующую конфигурацию:

server {
    listen 80;
    server_name your_server_ip; # Или ваш домен

    root /var/www/react_app;
    index index.html index.htm;

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

Эта настройка говорит Nginx отдавать index.html для всех маршрутов (важно для SPA — Single Page Application).

Активация конфигурации

Создайте символическую ссылку в папке sites-enabled:

sudo ln -s /etc/nginx/sites-available/react_app /etc/nginx/sites-enabled/

Проверка конфигурации и перезапуск Nginx

sudo nginx -t
sudo systemctl restart nginx

Шаг 4: Проверка результата

Откройте браузер и перейдите по IP-адресу вашего сервера (или домену, если он привязан). Если всё настроено правильно, вы увидите ваше React-приложение в боевой готовности!

Во второй части мы перенесли React-приложение на сервер и настроили Nginx для его обслуживания. В третьей части добавим SSL-сертификат для защиты данных и улучшим производительность.

Часть 3: Добавление SSL и оптимизация производительности

Теперь наше React-приложение успешно развернуто на сервере Ubuntu и обслуживается через Nginx. Но чтобы оно стало действительно готово к продакшену, необходимо добавить SSL-сертификат и позаботиться об оптимизации.

Шаг 1: Установка SSL-сертификата с помощью Let’s Encrypt

SSL-сертификат обеспечивает безопасное соединение по HTTPS. Самый простой способ — использовать бесплатный сертификат от Let’s Encrypt.

Установка Certbot

Сначала установим Certbot, который поможет автоматически получить и настроить сертификат:

sudo apt install certbot python3-certbot-nginx -y

Получение и настройка сертификата

Теперь выполним команду для получения сертификата и автоматической настройки Nginx:

sudo certbot --nginx -d your_domain.com -d www.your_domain.com

Certbot проверит ваш домен и автоматически обновит конфигурацию Nginx. Если всё пройдёт успешно, он сообщит, что сертификат установлен.

Автоматическое обновление сертификата

Let’s Encrypt сертификаты действуют всего 90 дней, поэтому важно настроить автоматическое обновление. Certbot создаёт задачу в cron автоматически, но вы можете вручную проверить обновление:

sudo certbot renew --dry-run

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

Активация Gzip-компрессии

Gzip значительно уменьшает размер передаваемых данных. Включим её в конфигурации Nginx:

Откройте файл конфигурации:

sudo nano /etc/nginx/nginx.conf

Добавьте или раскомментируйте следующие строки в блоке http:

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

Сохраните файл и перезапустите Nginx:

sudo systemctl restart nginx

Кэширование статических файлов

Чтобы снизить нагрузку на сервер, можно настроить кэширование статических ресурсов. Добавьте в конфигурацию вашего сайта (в файле /etc/nginx/sites-available/react_app) блок:

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
    expires 7d;
    add_header Cache-Control "public, no-transform";
}

Это кэширует статические файлы на 7 дней.

Шаг 3: Защита от ошибок и восстановление

Мониторинг и логирование

Важно отслеживать работу приложения и сервера. Воспользуйтесь встроенными логами Nginx:

sudo tail -f /var/log/nginx/access.log
sudo tail -f /var/log/nginx/error.log

Настройка автоматического перезапуска Nginx

На случай непредвиденных сбоев:

sudo systemctl enable nginx