Как задеплоить React app на VPS

Суть. build, Nginx, gzip и cache headers.

Суть

Деплой React на VPS: build локально или в CI, заливка dist на сервер, Nginx отдаёт статику, API проксируется на Node.

Ниже — практика без лишней теории: что делаю в реальных проектах (лендинги, визитки, MVP).

Шаги

1. npm run build
2. rsync dist
3. Nginx root
4. SSL certbot

Права

Владелец www-data или deploy, не root для node.

Откат

Храню предыдущий dist как dist.prev — symlink switch.

npm run build

rsync -avz --delete dist/ deploy@185.x.x.x:/var/www/myapp/

sudo nginx -t && sudo systemctl reload nginx

Статья про как задеплоить react app на vps — для тех, кто деплоит свой фронт или ведёт pet-проект на VPS. Я собираю типовой путь, который повторяю на коммерческих лендингах и MVP.

Типовой порядок работ

1. Собрать production-билд фронта (npm run build) и проверить локально через preview.
2. Настроить VPS: пользователь, firewall, SSH-ключи, обновления ОС.
3. Поставить Nginx/Caddy, отдать статику из dist/, настроить gzip/brotli и кэш.
4. Подключить домен, DNS, SSL (Let's Encrypt / Certbot).
5. Добавить мониторинг: логи, алерт при падении, бэкап конфигов.

Для Node-бэкенда отдельно — process manager (PM2/systemd) и reverse proxy, а не открытый порт наружу.

Типичные ошибки

Перегруз эффектами и библиотеками «на всякий случай»; отсутствие проверки на слабом интернете и старых телефонах; копирование чужого дизайна без адаптации под свою аудиторию; отсутствие явного CTA; ожидание, что «сайт сам продаст» без трафика и оффера.

Для коммерческих проектов отдельно болит размытое ТЗ и бесконечные правки без доплаты — лечится этапами и лимитом итераций.

Когда имеет смысл привлечь разработчика

Если нужен не шаблон, а связка дизайна, скорости, интеграций и сопровождения — проще обсудить задачу один раз, чем чинить конструктор полгода. Я беру лендинги, визитки и MVP под ключ; ориентиры по срокам и бюджету — на странице цен.

Читать дальше

• Core Web Vitals — метрики скорости
• Vite вместо CRA — стек сборки
• Услуги — разработка под задачу

Короткие ответы на частые вопросы

Это подойдёт моему бизнесу? Если вам нужен понятный сайт с заявкой или звонком — да; если десятки кабинетов и сложная логика — обсудим отдельный объём.

Что подготовить до старта? Тексты или тезисы, логотип, примеры конкурентов, доступы к домену и хостингу (если уже есть).

Как оценить результат? Скорость на мобилке, ясный CTA, отсутствие «битых» блоков и совпадение страницы с рекламой/поисковым запросом.

Итог по теме «Как задеплоить React app на VPS»

Сфокусируйтесь на сценарии пользователя, а не на количестве фич. Остальное — вопрос исполнения и дисциплины в проекте. Готов помочь с оценкой — контакты или Telegram из кнопки ниже.

Чеклист перед продакшеном

Тема «Как задеплоить React app на VPS» имеет смысл только в связке с остальным деплоем. Перед выкладкой я прохожу короткий список: production-сборка без dev-зависимостей, переменные окружения на сервере, HTTPS редирект, сжатие статики, логи и бэкап конфига Nginx.

На VPS не оставляйте открытыми лишние порты: SSH по ключу, приложение за reverse proxy. Для React SPA важно настроить fallback на index.html, иначе прямые ссылки на маршруты дадут 404.

• Проверьте curl -I https://ваш-домен — статус 200, заголовки cache-control.
• Убедитесь, что certbot/auto-renew настроен, если SSL через Let's Encrypt.
• Зафиксируйте версии Node/PM2 в README — через полгода вы скажете себе спасибо.

Не мигрируйте весь монолит за раз — вынесите один модуль на Vite или новый entry point и сравните DX.