Привет, друзья! В этой статье мы разберём, как настроить сервер для разработки React на VPS с внешним доступом и HTTPS. Основной акцент будет на дев-режиме, потому что именно в этой среде вы тестируете своё приложение на домене, интегрируясь с внешними сервисами вроде Telegram WebApp, Shopify или любыми API.

Важно понимать: наша цель — сделать так, чтобы приложение работало прямо в дев-режиме на VPS, с внешним доступом по HTTPS, и при этом оставалось удобным для разработки и тестирования.

В итоге вы получите:

  • сервер для разработки React на VPS, доступный извне по HTTPS;
  • возможность тестировать интеграции с внешними сервисами;
  • удобную структуру приложения на React и Vite;

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

Подготовка VPS для сервера разработки React

Ладно, друзья, у нас есть свежий VPS — чистый, как пустая тетрадь. Теперь пора подготовить его, чтобы на нём можно было запустить приложение и работать с ним извне. Давайте делать всё пошагово, чтобы потом не было сюрпризов.

Проверяем базовое ПО для сервера разработки React

Сначала убедимся, что на VPS установлены Node.js, npm и Git. Без них React-приложение просто не заведётся. Для этого обновляем пакеты и ставим необходимые инструменты:

sudo apt update
sudo apt install nodejs npm git -y
node -v
npm -v
git --version

Если версии отображаются, значит, всё готово к следующему шагу. Иногда на свежих VPS Node.js может быть старой версии, но для дев-режима это обычно не критично. При желании можно поставить более свежую через NodeSource или nvm.

Создаем проект React для сервера разработки

Теперь переходим к созданию нового проекта MyApp через Vite. Если у вас уже есть готовый проект, этот шаг можно пропустить и просто клонировать репозиторий:

mkdir ~/myapp && cd ~/myapp
npm create vite@latest . -- --template react
npm install

В результате у нас получается чистое React-приложение с Vite. Структура простая, понятная, и именно такая подходит для запуска сервера для разработки React.

Для уверенности убедитесь, что в папке есть package.json и Vite, иначе сервер может не подняться.

Открываем порт для внешнего доступа

Теперь нужно убедиться, что наш сервер будет виден снаружи. По умолчанию Vite слушает порт 5173, но VPS часто защищён firewall. Давайте разрешим входящие подключения:

sudo ufw allow 5173/tcp
sudo ufw status

После этого порт открыт, и сервер можно будет увидеть с любого устройства через IP VPS. Особенно удобно проверять на телефоне или планшете — подключаемся именно по IP-VPS:5173, а не через localhost, чтобы убедиться, что всё работает корректно.

Теперь VPS подготовлен, проект создан, порт открыт — можно переходить к следующему шагу и настроить HTTPS для сервера.

Настройка HTTPS для сервера разработки React через NGINX и Certbot

Итак, друзья, наш сервер уже работает на VPS по HTTP — круто, но этого мало. Чтобы интеграции с Telegram, Shopify и другими сервисами проходили без проблем, нам нужен HTTPS. Настало время сделать всё официально и безопасно.

Устанавливаем NGINX и Certbot для сервера разработки

NGINX будет нашим «прокси», который принимает HTTPS-запросы и отправляет их на Vite, а Certbot — бесплатный инструмент для получения сертификатов Let’s Encrypt.

sudo apt update
sudo apt install nginx certbot python3-certbot-nginx -y
systemctl status nginx

Далее стоит убедиться, что firewall не блокирует порты 80 и 443:

sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw reload

Получаем SSL-сертификат для сервера разработки React

Предположим что у вас уже есть зарегистрированный домен, который уже привязан к вашему vps серверу. Это легко делается в панели управления хостингом. В нашем случае домен — myapp.wtemu.ru

certbot --nginx -d myapp.wtemu.ru

Certbot проверит домен, выдаст сертификат и попытается подправить конфиг NGINX, чтобы трафик шёл по HTTPS.
Если у вас пока нет публичного домена, можно временно использовать самоподписанный сертификат, но Telegram и некоторые браузеры могут ругаться. Поэтому лучше сразу взять реальный домен.

Настраиваем NGINX как прокси для сервера разработки React

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

Вставляем:

server {
    listen 443 ssl;
    server_name myapp.wtemu.ru;

    ssl_certificate /etc/letsencrypt/live/myapp.wtemu.ru/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/myapp.wtemu.ru/privkey.pem;

    location / {
        proxy_pass http://127.0.0.1:5173;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

server {
    listen 80;
    server_name myapp.wtemu.ru;
    return 301 https://$host$request_uri;
}

Важно: первый блок слушает 443 и проксирует запросы на сервер для разработки ; второй блок ловит HTTP-запросы и отправляет их на HTTPS; proxy_set_header и Upgrade нужны, чтобы WebSocket и hot-reload работали корректно.

Включаем конфиг и перезагружаем NGINX

sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Если nginx -t говорит «syntax is ok», а systemctl reload nginx не выдаёт ошибок — HTTPS работает, и сервер готов принимать безопасные подключения.

Проверка работы сервера для разработки React

Открываем браузер и идём на:

https://myapp.wtemu.ru

Бац! Наш сервер для разработки React теперь доступен по HTTPS. Можно спокойно тестировать Telegram WebApp и любые другие интеграции — никаких «небезопасных соединений» больше.

Если Vite показывает «HMR не работает» или страница не обновляется, скорее всего, проблема в прокси. Важно оставить строки:

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';

Тогда hot-reload и WebSocket будут работать корректно.

Стабильная работа сервера разработки React с PM2

Итак, друзья, у нас уже есть сервер для разработки React на VPS, доступный по HTTPS через NGINX. Всё работает, но есть нюанс: в дев-режиме сервер может внезапно закрыть соединение или упасть — особенно если закрываете SSH или меняется сеть.

Чтобы приложение MyApp не «умирало» при таких перерывах, используем PM2 — надёжный менеджер процессов для Node.js. Он следит за сервером, перезапускает его при падении и позволяет запускать его как сервис, который стартует вместе с VPS.

Устанавливаем PM2

sudo npm install -g pm2
pm2 -v

Запуск сервера разработки через PM2

pm2 start npm --name "myapp-dev" -- run dev -- --host 0.0.0.0

Что важно:

  • --name "myapp-dev" — удобное имя процесса;
  • -- run dev -- --host 0.0.0.0 — команда запуска с внешним доступом.

Если несколько проектов на одном VPS — просто меняйте имя процесса. PM2 управляет любым количеством серверов без проблем.

Автозапуск сервера для разработки React после перезагрузки VPS

pm2 save
pm2 startup

Команда выдаст инструкцию — копируем и выполняем. Теперь сервер автоматически поднимется даже после перезагрузки VPS.

Проверка и управление через PM2

pm2 list       # список процессов
pm2 logs myapp-dev   # логи сервера
pm2 restart myapp-dev   # перезапуск при необходимости
pm2 stop myapp-dev  # остановить процесс

В дев-режиме можно спокойно закрывать SSH — PM2 продолжит держать сервер в живых, а сервер для разработки React останется доступным по HTTPS.

Заключение

Итак, друзья, мы прошли весь путь:

  • подготовили VPS и установили все необходимые инструменты;
  • подняли сервер для разработки React с внешним доступом;
  • настроили HTTPS через NGINX и Certbot, чтобы Telegram и другие сервисы работали без проблем;
  • обеспечили стабильность работы через PM2, чтобы сервер не падал и всегда был онлайн.

Теперь у вас есть полностью рабочий сервер для разработки на VPS, который ведёт себя почти как продакшн. Можно тестировать интеграции, вносить изменения в код и быть уверенным, что всё останется на месте даже при перерывах соединения.

Совет на будущее: когда придёт время делать продакшн-билд для Telegram или других сервисов, можно будет добавить дополнительные мелкие настройки, но на этапе дев-режима это не критично — главное, что всё работает стабильно и безопасно.

В итоге ваш VPS полностью готов к реальной работе с MyApp, и теперь можно спокойно тестировать любые интеграции и экспериментировать с кодом.