React и Vue: хостинг и деплой на сервер, коротко и с данными
Конспект страницы: 6 разделов коротко, данные на 14 октября 2026 и ответы на 5 вопросов. Полный разбор с примерами: React и Vue: хостинг и деплой на сервер.
Коротко
Главная / Разработка / React и Vue React хостинг сводится к раздаче статических файлов: команда npm run build складывает приложение в каталог dist, а отдать его может платформа деплоя из Git, Nginx на VPS или любой файловый хостинг. Серверного процесса не нужно, поэтому Vue-приложение размещают точно так же. Нужны три вещи: HTTPS, правило для маршрутов и отдельное решение для API.
Конспект по разделам
Установка React на Vite: создание проекта и сборка
Современный React-проект создают через сборщик Vite. Для Vue вместо шаблона react берут vue. Сервер разработки открывает приложение на порту 5173 и обновляет страницу при правке кода.
Где разместить React-приложение: платформа, VPS или Docker
В списке фреймворков App Platform Таймвеб Клауд значатся React и Vue, а также Angular, Ember, Next.js, Nuxt, Preact, Svelte и обычный HTML/CSS/JS. Репозиторий берётся с GitHub, GitLab, Bitbucket или по адресу git, SSL с автопродлением и свой домен подключаются в панели, предыдущую версию можно вернуть одной кнопкой. Тарифы от 1 ₽ в месяц на 14 октября 2026.
React на VPS: Nginx, try_files и кэширование
Приложение с маршрутами (React Router, Vue Router) отдаёт один файл index.html, а страницу выбирает скрипт в браузере. Поэтому на сервере нужно правило: если файла нет, вернуть index.html. Файлам из assets можно выставить долгий срок хранения: хэш в имени меняется при каждой сборке.
Адрес API и переменные окружения в React и Vue
Фронтенд выполняется в браузере, поэтому всё, что попало в сборку, видно любому посетителю. Переменные Vite с префиксом VITE_ вшиваются в код при сборке, и менять их без пересборки нельзя. Пароли и ключи в них не кладут.
React в Docker: сборка на Node и раздача через Nginx
Файл nginx.conf содержит блок из раздела выше с корнем /usr/share/nginx/html. Итоговый образ несёт только Nginx и статику, без Node.js. Тег node подберите под версию из файла package.json.
Задеплойте приложение из репозитория
Подключите репозиторий, выберите фреймворк или Docker, домен и SSL выдаются сразу.
- React, Vue, Next.js, Nuxt, Angular, Svelte
- Любой стек через Docker
- Откат к прошлой версии одной кнопкой
- Бесплатный SSL с автопродлением
Данные
| Вариант | Как работает | Когда выбрать |
|---|---|---|
| Платформа деплоя | Подключаете Git, сборка идёт на стороне платформы | Нужен деплой без администрирования |
| Nginx на VPS | Загружаете dist, Nginx раздаёт файлы | Рядом уже есть бэкенд и база |
| Контейнер с Nginx | Сборка и раздача упакованы в один образ | Фронтенд едет вместе с остальными сервисами |
Данные на 14 октября 2026.
Вопросы и ответы
Как развернуть React приложение на сервере?
Выполнить npm run build, загрузить каталог dist на сервер и раздавать его через Nginx с правилом try_files на index.html. Или подключить репозиторий платформе деплоя из Git.
Нужен ли Node.js на сервере для React-приложения?
Нет, если приложение собрано в статику: достаточно веб-сервера. Node.js нужен для сборки и для фреймворков с серверным рендерингом.
Почему после обновления страницы React-приложение показывает 404?
Сервер ищет файл по адресу маршрута. Добавьте правило try_files с возвратом index.html, как в разделе про Nginx.
Чем хостинг для Vue отличается от хостинга для React?
Ничем: после сборки это тоже каталог dist. Для режима history в Vue Router нужно то же правило возврата index.html.
Подойдёт ли такой хостинг для React Native?
Нет. React Native собирает мобильное приложение, которое ставят из магазина. Серверу нужен только бэкенд, см. страницу про мобильное приложение.