Як запустити (задеплоїти) SPA (Single Page Application) на звичайному shared-хостингу

Розробка односторінкових додатків (SPA) на базі Vue або React стала стандартом для сучасних веб-проектів. Однак, коли справа доходить до їх розміщення (деплою) на звичайному shared-хостингу, часто виникає проблема: сайт коректно відкриває тільки головну сторінку, а при спробі перейти на внутрішні маршрути (роути) — повертає помилку 404. Це відбувається тому, що сервер не знає про клієнтський роутинг і намагається шукати відповідні файли.

Щоб SPA коректно працювало на хостингу, потрібно пояснити серверу, як обробляти маршрути. Існує кілька способів вирішення цього завдання, і кожен із них має свої плюси та мінуси.

1. Використовувати хеш-роутинг.

Найпростіший і найшвидший варіант — використовувати маршрути з хешами (наприклад, /#/about замість /about). Такий підхід не вимагає додаткового налаштування сервера, оскільки весь роутинг обробляється за клієнта. Але цей спосіб має значний мінус — пошукові системи не індексують такі сторінки, адже фактично це все одна сторінка. Якщо просування сайту в пошукових системах є важливим, цей варіант не підійде.

2. Дублювати маршрути за сервера.

Інший спосіб — описати маршрути не лише у фронтенді, а й на боці бекенду. Наприклад, можна використовувати PHP для того, щоб сервер розумів, які URL-адреси існують і що їм потрібно віддавати. За такого підходу всі сторінки, включаючи 404, працюватимуть коректно. Але мінус тут очевидний: код роутингу потрібно підтримувати у двох місцях, що ускладнює розробку та обслуговування проекту.

3. Налаштувати сервер на віддачу index.html за відсутності роуту.

Найбільш універсальний спосіб – налаштувати сервер так, щоб за відсутності файлу, що запитується, він віддавав index.html. Саме цей підхід використовується у більшості SPA-проектів. Завдяки цьому всі маршрути, визначені на стороні клієнта, будуть коректно оброблятися навіть при прямому переході за посиланням або оновленням сторінки. Цей метод можна реалізувати, наприклад, через налаштування .htaccess на Apache або аналогічні конфігурації для інших серверів.

Головний плюс даного способу – його простота та сумісність із SEO. Пошукові системи зможуть індексувати сторінки, оскільки вони фактично існують у DOM після завантаження SPA. Однак, мінус полягає в тому, що сервер завжди повертає код відповіді 200, навіть якщо сторінка дійсно не існує. В результаті користувач може не побачити коректну сторінку 404, якщо її явно не реалізувати всередині програми.

.htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>

В цілому, запуск SPA на shared-хостингу – завдання, що цілком вирішується. Головне — розуміти, як сервер обробляє маршрути, і вибрати спосіб, який підходить саме під твій проект. Для простих сайтів без SEO-задач підійде хеш-роутинг, а для повноцінних проектів краще налаштувати сервер або додати базову логіку на стороні PHP.

Якщо вам потрібен якісний і недорогий хостинг, то можу вам порекомендувати Хостинг Україна. Цей блог розміщенний на даному хостингу