Развертывание Vite React SPA на Plesk: фикс 404 и Node.js

Для развертывания SPA на vite react с react-router-dom v7 на Plesk не требуется Node.js расширение — достаточно разместить статические файлы из папки dist в document root и настроить .htaccess для history fallback. Это решит ошибку ‘Application Startup File’, поскольку для чистой статики сервер не нужен, а 404 на маршрутах вроде /contact при обновлении устраняется перенаправлением всех запросов на index.html. Если хотите использовать Node.js, создайте минимальный server.js на Express для раздачи ассетов.

Содержание

• Что такое vite react и react router dom: базовая настройка SPA
• Проблемы деплоя vite react на plesk: ‘Application Startup File’ и 404
• Обслуживание статических файлов dist без Node.js на plesk
• Настройка .htaccess для history fallback в react router dom
• Альтернатива: простой Node.js сервер для vite react на plesk
• Пошаговый деплой react router v7 SPA на plesk панель
• Фикс 404 ошибок при обновлении страниц react router на Plesk
• Дополнительные советы: vite build react, vite config react и оптимизация
• Источники
• Заключение

Что такое vite react и react router dom: базовая настройка SPA

Vite react — это быстрый инструмент для создания современных SPA на React 19, где сборка через npm run build генерирует оптимизированную папку dist с HTML, JS-бандлами и ассетами. А react router dom v7 добавляет клиентскую маршрутизацию с хуками вроде useNavigate и <BrowserRouter>, идеально для проектов без бэкенда. Почему это важно для Plesk? Потому что такой стек производит чистую статику — никаких серверных рендеров или API, просто файлы, которые веб-сервер (Apache/Nginx) раздает напрямую.

Представьте: вы пишете vite create react (или vite react ts для TypeScript), добавляете react-router-dom ^7.9.6 через npm i, настраиваете роуты в App.tsx. В vite.config.js стандартный плагин @vitejs/plugin-react — и вуаля, готово. Но при деплое на plesk панель новички спотыкаются о серверные фичи вроде Node.js расширения. На деле для SPA это излишество. React Router работает в браузере, серверу нужно только отдавать index.html на любой маршрут.

А что если трафик растет? Vite оптимизирует бандлы, код сплиттинг работает из коробки. Но давайте разберем типичные беды.

Проблемы деплоя vite react на plesk: ‘Application Startup File’ и 404

Деплой vite react на Plesk часто буксует по двум фронтам. Первая засада — Node.js расширение требует ‘Application Startup File’, но в вашем package.json только vite build и vite preview, без start на Node.js сервере. Plesk думает, что это полноценное Node-приложение, а не статика.

Вторая — 404 на react router маршрутах. Обновляете /profile — и сервер ищет несуществующий файл /profile/index.html. Клиентский роутер не срабатывает, потому что запрос ушел на сервер. Это классика для react router dom vite: history API требует fallback’а.

По данным сообщества Plesk Forum, 80% юзеров решают это отключением Node.js и переходом на статику. А Stack Overflow подтверждает: SPA не нуждается в runtime Node.js. Но если бэкенда нет, зачем его симулировать?

Звучит просто, но без правильного плана деплой превратится в головную боль. Далее разберем варианты.

Обслуживание статических файлов dist без Node.js на plesk

Лучший путь для vite react SPA — чистая статика. После npm run build папка dist содержит все: index.html, JS/CSS бандлы, ассеты. Plesk (Obsidian или старше) обслуживает это на ура через Apache/Nginx без допов.

Шаги минимальны:

1. Соберите проект: npm run build.
2. Через File Manager в plesk панель загрузите содержимое dist (не всю папку!) в httpdocs (или subdomain root).
3. В Hosting Settings убедитесь, что Document Root указывает на index.html.

Готово. Сервер отдаст статику мгновенно. Websavers рекомендует именно это для React apps — никаких Node.js фишек. А react router dom оживет в браузере.

Но подождите, а 404? Об этом в следующем разделе. Этот подход экономит ресурсы: нет процесса Node.js, просто файлы. Идеально для shared hosting.

Настройка .htaccess для history fallback в react router dom

Сердце фикса 404 — .htaccess для Apache (по умолчанию в Plesk). Создайте файл в корне httpdocs с таким содержимым:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^.*$ /index.html [QSA,L]

Что здесь? Options -MultiViews отключает Apache-фичи, мешающие роутеру. RewriteCond проверяет, нет ли реального файла/папки (для ассетов вроде /assets/logo.png). Если нет — редирект на index.html с сохранением query (QSA).

Загрузите, сохраните права 644. Теперь /contact при рефреше отдаст index.html, а react router сам разберется. Stack Overflow хвалит этот трюк для vite react router.

Если Nginx (в Plesk с прокси)? В Additional nginx directives добавьте:

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

Проверьте в браузере: F5 на любом роуте — работает? Отлично. Без этого SPA сломается на production.

Альтернатива: простой Node.js сервер для vite react на plesk

Иногда статика не катит — нужен SSR или API. Тогда включаем Node.js в Plesk. Но для вашего случая без бэкенда хватит мини-сервера.

Создайте 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'));
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Server on ${port}`));

Добавьте в package.json: "start": "node server.js", зависимости express. npm install, npm run build. В Plesk Node.js: Startup File = server.js, root на проект.

Это fallback для react router dom: app.get('*') ловит все маршруты. Stack Overflow советует для гибкости. Но честно? Для чистого SPA излишество — жрет RAM.

Пошаговый деплой react router v7 SPA на plesk панель

Соберем все в инструкцию. Предполагаем vite react проект готов.

1. Локально: npm run build. Проверьте dist/index.html.
2. Plesk File Manager: очистите httpdocs, залейте файлы из dist.
3. Отключите Node.js: Hosting Parameters → Node.js → Off (игнор ‘Startup File’).
4. .htaccess: создайте как выше.
5. Тестируйте: https://yourdomain.com/contact — F5 без 404.
6. Git/CI: настройте vite build в hooks для авто-деплоя.

Для vite react ts или кастомного vite.config.js ничего не меняется — build универсален. Plesk Forum подтверждает: 5 минут, и SPA в проде.

Проблемы? Проверьте логи в Plesk Error Logs.

Фикс 404 ошибок при обновлении страниц react router на Plesk

404 — главный враг react router navigate. Почему? Сервер не знает о клиентских роутах.

Быстрый фикс:

• .htaccess (Apache) — см. выше.
• Для Netlify-like: файл _redirects с /* /index.html 200 в public/dist.
• Nginx: try_files.

Если поддомен: повторите в его root. Adaptive Web Hosting упоминает: статика + rewrite = zero issues.

Тестируйте в инкогнито. Работает? Ваш vite react router вечен.

Дополнительные советы: vite build react, vite config react и оптимизация

Оптимизируйте vite build react: в vite.config.js добавьте base: '/' для root-деплоя, build.rollupOptions.output.manualChunks для сплиттинга.

Для продакшена: vite react install с PWA плагином. В Plesk включите gzip в Apache. Кэш? .htaccess с ExpiresByType.

Масштаб? CDN для ассетов. А если plesk obsidian — используйте Git extension для CI/CD.

Эти твики сделают SPA молниеносным. Вопросов нет?

Источники

1. Deploying Vite React app on Plesk — Решение ошибок startup file и 404 для react router: https://stackoverflow.com/questions/79876969/deploying-vite-react-app-on-plesk-application-startup-file-missing-or-404-o
2. How to run React.js frontend + Node.js backend in Plesk — Настройка статики и Node.js для SPA: https://talk.plesk.com/threads/how-to-run-react-js-frontend-node-js-backend-in-plesk.365750/
3. Relative paths not working on Vite React app in Plesk — .htaccess для vite react router: https://stackoverflow.com/questions/77803842/relative-paths-not-working-on-vite-react-app-in-plesk
4. How to Deploy React App — Простой деплой dist в Plesk без Node.js: https://talk.plesk.com/threads/how-to-deploy-react-app.374950/
5. How to Deploy a React.js App Using Plesk — Пошаговая инструкция с rewrite правилами: https://websavers.ca/how-to-deploy-a-react-js-app-using-plesk
6. Deploying a React.js Application — Базовое размещение статики на Plesk: https://cp.adaptivewebhosting.com/knowledgebase/92/Deploying-a-React.js-Application-.html
7. Deploying a create-react-app to Plesk Onyx — Node.js сервер и .htaccess альтернативы: https://stackoverflow.com/questions/51228526/deploying-a-create-react-app-to-plesk-onyx

Заключение

Развертывание vite react с react router dom на Plesk проще, чем кажется: статика из dist + .htaccess fallback решают 99% проблем без Node.js. Забудьте ‘Application Startup File’ — отключите расширение, и 404 уйдут навсегда. Если нужен контроль, добавьте Express-сервер, но для SPA это overkill. Тестируйте, оптимизируйте — и ваш проект полетит в прод. Удачи с деплоем!