Главная/Разработка/React и Vue
React и Vue: хостинг и деплой на сервер
React хостинг сводится к раздаче статических файлов: команда npm run build складывает приложение в каталог dist, а отдать его может платформа деплоя из Git, Nginx на VPS или любой файловый хостинг. Серверного процесса не нужно, поэтому Vue-приложение размещают точно так же. Нужны три вещи: HTTPS, правило для маршрутов и отдельное решение для API.
Ответ за 30 секунд
После сборки React и Vue превращаются в набор статических файлов: их проще всего отдать платформе деплоя из Git или Nginx на VPS. Главное правило сервера: любой путь без файла должен отдавать index.html, иначе обновление страницы с маршрутом даст ошибку 404.
React и Vue есть в списке фреймворков платформы: SSL и домен выдаются при деплое.
React на VPS: Nginx, try_files и кэшированиеdistкаталог сборки Vite
5173порт сервера разработки Vite
от 1 ₽App Platform в месяц на 14.10
01 · 1 мин
Установка React на Vite: создание проекта и сборка#
Современный React-проект создают через сборщик Vite. Для Vue вместо шаблона react берут vue.
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run devСервер разработки открывает приложение на порту 5173 и обновляет страницу при правке кода. На сервер он не годится. Для выкладки выполняют npm run build: в каталоге dist появляются index.html и файлы с хэшами в именах (в папке assets). Проверить результат до загрузки можно командой npm run preview (порт 4173). Node.js для сборки ставят по инструкции установка Node.js.
02 · 1 мин
Где разместить React-приложение: платформа, VPS или Docker#
| Вариант | Как работает | Когда выбрать |
|---|---|---|
| Платформа деплоя | Подключаете Git, сборка идёт на стороне платформы | Нужен деплой без администрирования |
| Nginx на VPS | Загружаете dist, Nginx раздаёт файлы | Рядом уже есть бэкенд и база |
| Контейнер с Nginx | Сборка и раздача упакованы в один образ | Фронтенд едет вместе с остальными сервисами |
В списке фреймворков App Platform Таймвеб Клауд значатся React и Vue, а также Angular, Ember, Next.js, Nuxt, Preact, Svelte и обычный HTML/CSS/JS. Репозиторий берётся с GitHub, GitLab, Bitbucket или по адресу git, SSL с автопродлением и свой домен подключаются в панели, предыдущую версию можно вернуть одной кнопкой. Тарифы от 1 ₽ в месяц на 14 октября 2026. Для проекта на Vite платформе нужен каталог dist; проверьте, что отдаётся именно он.
Сайт на Next.js устроен иначе: ему нужен серверный процесс, как описано на странице Nuxt хостинг.
Инструмент · 1 мин
React на VPS: Nginx, try_files и кэширование#
Приложение с маршрутами (React Router, Vue Router) отдаёт один файл index.html, а страницу выбирает скрипт в браузере. Поэтому на сервере нужно правило: если файла нет, вернуть index.html.
server {
server_name app.example.com;
root /var/www/app/dist;
index index.html;
location / {
try_files $uri /index.html;
}
location /assets/ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}Файлам из assets можно выставить долгий срок хранения: хэш в имени меняется при каждой сборке. Файл index.html кэшировать нельзя, иначе посетитель не увидит новую версию. Выкладка сводится к копированию каталога: rsync -av --delete dist/ user@server:/var/www/app/dist/. Установка веб-сервера и сертификата: Nginx и Certbot.
Фронтенд перед выкладкой на сервер
Отмечайте пункты, подсказка покажет следующий шаг
04 · 1 мин
Адрес API и переменные окружения в React и Vue#
Фронтенд выполняется в браузере, поэтому всё, что попало в сборку, видно любому посетителю. Переменные Vite с префиксом VITE_ вшиваются в код при сборке, и менять их без пересборки нельзя. Пароли и ключи в них не кладут.
Запросы к бэкенду удобнее вести на тот же домен: Nginx направляет путь /api на приложение, и настраивать CORS не требуется. Если API на другом адресе, разрешить в нём домен фронтенда придётся самим. Размещение бэкенда на Python и Node.js: хостинг с поддержкой Python.
05 · 1 мин
React в Docker: сборка на Node и раздача через Nginx#
FROM node:24-alpine AS build
WORKDIR /web
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM nginx:stable-alpine
COPY --from=build /web/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.confФайл nginx.conf содержит блок из раздела выше с корнем /usr/share/nginx/html. Итоговый образ несёт только Nginx и статику, без Node.js. Тег node подберите под версию из файла package.json.
06 · 1 мин
Вопросы о хостинге для React и Vue#
Как развернуть 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 собирает мобильное приложение, которое ставят из магазина. Серверу нужен только бэкенд, см. страницу про мобильное приложение.
Почему этому можно верить
Как мы проверяли
Источники цифр на этой странице: App Platform Таймвеб Клауд, timeweb.cloud/services/apps, проверено 14 октября 2026.
Задеплойте приложение из репозитория
Подключите репозиторий, выберите фреймворк или Docker, домен и SSL выдаются сразу.
- React, Vue, Next.js, Nuxt, Angular, Svelte
- Любой стек через Docker
- Откат к прошлой версии одной кнопкой
- Бесплатный SSL с автопродлением