Как развернуть Vite React SPA на Plesk: фикс 404 ошибок

Для развертывания SPA на React 19 с Vite на Plesk не нужно включать Node.js расширение — достаточно настроить статический хостинг папки dist после npm run build. Проблема с ‘Application Startup File’ решается отказом от Node.js, а react router 404 при обновлении страниц устраняется через .htaccess с history fallback, перенаправляющим все запросы на index.html. Это стандартный vite deploy plesk для клиентской маршрутизации react-router-dom v7 без бэкенда.

Содержание

• Развертывание Vite + React SPA на Plesk: основные проблемы
• Настройка статического хостинга для Vite приложения в Plesk
• Решение проблемы 404 ошибок с react-router-dom через .htaccess
• Альтернативные подходы: HashRouter и настройка базового пути
• Когда использовать Node.js расширение в Plesk для SPA приложений
• Источники
• Заключение

Развертывание Vite + React SPA на Plesk: основные проблемы

Представьте: собрали vite react plesk проект командой npm run build, залили dist на сервер, а при рефреше на /contact — бац, 404. Почему так? SPA с react-router-dom v7 работает на клиентской маршрутизации: браузер сам решает, что показывать по пути /contact. Но сервер Plesk ищет файл contact.html — его нет, вот и ошибка.

А ‘Application Startup File’ в Node.js расширении? Оно требует server.js или подобного для запуска Node-приложения. Ваш стандартный package.json с vite build и vite preview — это не сервер, а билдер статики. Включать Node.js для простого SPA — перебор, ресурсы жрет зря. Большинство разработчиков на Stack Overflow жалуются на то же: Plesk путает статический хостинг с полноценным Node-сервером.

Коротко: 90% vite deploy plesk сводится к статике + fallback. Давайте разберем по шагам.

Настройка статического хостинга для Vite приложения в Plesk

Сначала билд. В корне проекта:

npm run build

Появится dist с index.html, JS/CSS бандлами. Залейте её в Plesk через File Manager или FTP в httpdocs (или поддомен).

В панели Plesk:

1. Домены > ваш домен > Настройки хостинга.
2. Document root: укажите /httpdocs/dist (или где залили).
3. Тип хостинга: “Без PHP” или “Статический контент” — забудьте Node.js.
4. Apache & nginx Settings: включите поддержку .htaccess.

Почему статика? Документация Vite прямо говорит: после билда — это обычные файлы для любого веб-сервера. React 19 + Vite ^7.2.2 генерит оптимизированный dist, готовый к Netlify, Vercel или Plesk. Без сервера — дешевле, быстрее, проще.

Тестируйте: главная / работает? Отлично. Теперь рефреш на маршрутах — и привет, 404. Переходим к фиксу.

Решение проблемы 404 ошибок с react-router-dom через .htaccess

Вот где магия. Создайте .htaccess в корне dist (рядом с index.html):

RewriteEngine On

# Если файл или папка существуют — отдаем их
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Иначе — fallback на index.html для SPA
RewriteRule ^ /index.html [L]

Загрузите, очистите кэш Plesk (Domains > Hosting Settings > Clear Cache). Теперь рефреш на /contact — сервер кидает всё на index.html, React Router сам разберется.

Если Nginx в Plesk (проверьте в Apache & nginx Settings):

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

Добавьте в Additional nginx directives. Готово! Это классический history fallback spa для react router 404. Работает на Apache/Nginx, без хаков.

А если в подпапке, типа /app/? Добавьте basename="/app" в <BrowserRouter> в main.jsx.

Альтернативные подходы: HashRouter и настройка базового пути

Не хотите ковырять сервер? Перейдите на <HashRouter> в react-router-dom. Замените BrowserRouter на HashRouter — URL станут /#!/contact. Серверу плевать, fallback не нужен. Минус: хэш в адресной строке выглядит старомодно, но для MVP сойдет.

Из блога Muffin Man: для субпапок — basename + .htaccess с путем:

RewriteRule ^/subfolder/(.*)$ /subfolder/index.html [L]

В vite.config.js тоже можно base: '/subfolder/' для билда. Но для рута Plesk хватит стандартного.

Еще трюк: файл _redirects (без точки!) в dist/public:

/* /index.html 200

Plesk его подхватит как правило редиректа. Быстро, без правки конфигов.

Когда использовать Node.js расширение в Plesk для SPA приложений

Только если нужен SSR (Server-Side Rendering) или API на сервере. Для вашего случая — нет. Но если упорствуетесь:

1. Установите Node.js в Plesk (Extensions > Node.js).
2. Application Startup File: создайте server.js:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static('dist'));
app.get('*', (req, res) => res.sendFile(path.join(__dirname, 'dist/index.html')));

app.listen(process.env.PORT || 3000);

3. package.json: добавьте "start": "node server.js", укажите server.js в Startup File.

Заливка через Git или npm install. Но зачем? Статика быстрее, дешевле. Node.js для plesk nodejs deploy — оверкилл для чистого фронта.

Источники

1. Stack Overflow — Решение развертывания Vite React на Plesk без Node.js и фикс 404: https://stackoverflow.com/questions/79876969/deploying-vite-react-app-on-plesk-application-startup-file-missing-or-404-o
2. Muffin Man — Настройка React Router с .htaccess и basename для субпапок: https://muffinman.io/blog/react-router-subfolder-on-server/
3. Vite Documentation — Официальное руководство по статическому деплою Vite SPA приложений: https://vite.dev/guide/static-deploy.html

Заключение

Развернуть vite react plesk проще простого: билд dist как статику, .htaccess для react router 404 — и никаких ‘Application Startup File’. Забудьте Node.js, если нет SSR. Это сэкономит время и ресурсы. Тестируйте на staging, и ваше SPA на React 19 взлетит. Если субпапки или кастом — HashRouter в помощь. Удачи с деплоем!