Запускаем вёрстку на React на хостинге: пошаговое руководство

React — популярная библиотека для создания современных веб-приложений. После завершения разработки возникает вопрос: как разместить проект на хостинге, чтобы он стал доступен в интернете? В этой статье мы разберём процесс деплоя React-приложения на виртуальный хостинг (на примере REG.RU), начиная от сборки проекта и заканчивая настройкой маршрутов. Это руководство подойдёт для новичков, которые хотят быстро и просто запустить своё приложение.

Шаг 1. Подготовка проекта

Перед отправкой приложения на сервер его нужно собрать в продакшн-версию. React-проекты обычно используют инструменты сборки, такие как Vite или Create React App. Мы рассмотрим процесс на примере Vite, но шаги аналогичны и для других инструментов.

1. После этого в папке dist (или build, в зависимости от настроек) появятся оптимизированные статические файлы: index.html, CSS, JavaScript и другие ресурсы.Соберите проект
   В корневой папке проекта выполните команду:npm run build
   
2. Это гарантирует, что пути к файлам будут работать независимо от того, где размещён проект.Проверьте пути
   Убедитесь, что пути к файлам настроены правильно. Если вы деплоите приложение в корень домена (например, http://example.com), в файле vite.config.js можно указать:import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   
   export default defineConfig({
   plugins: [react()],
   base: './', // Относительные пути для универсальности
   });
   Затем пересоберите проект:npm run build
   

Шаг 2. Выбор хостинга

Для простого React-приложения подойдёт виртуальный хостинг (shared hosting), так как после сборки мы получаем статические файлы, не требующие серверного рендеринга или Node.js. В качестве примера мы используем REG.RU:

• Перейдите на сайт REG.RU и выберите тариф виртуального хостинга (например, "Host-0").
• Зарегистрируйте домен или используйте технический адрес, который предоставляет хостинг (например, 123-123-123-123.host.ru).
• После покупки вы получите доступ к панели управления и данные для подключения через FTP.

Шаг 3. Загрузка файлов на хостинг

На виртуальном хостинге REG.RU файлы сайта размещаются в папке public_html. Нужно загрузить содержимое папки dist в эту директорию.

Через FTP

1. Установите FTP-клиент, например, FileZilla.
2. В панели управления REG.RU найдите данные для FTP (хост, логин, пароль).
3. Подключитесь к серверу и откройте папку public_html.
4. Перетащите все файлы из папки dist (не саму папку, а её содержимое: index.html, assets и т.д.) в public_html.

Через файловый менеджер

1. В панели управления хостингом найдите "Файловый менеджер".
2. Откройте public_html.
3. Загрузите архив dist.zip (предварительно заархивируйте папку dist) и разархивируйте его в public_html.

Шаг 4. Настройка маршрутизации (для React Router)

Если ваше приложение использует библиотеку react-router-dom для клиентской маршрутизации, переход по ссылкам (например, /main или /main/help) может возвращать ошибку 404. Это происходит, потому что сервер не знает о виртуальных путях React Router. Нужно настроить перенаправление всех запросов на index.html.

• Создайте файл .htaccess в папке public_html и добавьте:RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  
• Загрузите файл на сервер через FTP или файловый менеджер.

Этот код указывает серверу Apache перенаправлять все запросы к несуществующим файлам на index.html, где React Router обработает маршруты.

Шаг 5. Проверка работы

• Откройте ваш домен в браузере (например, http://ваш_домен.ru).
• Убедитесь, что главная страница загружается.
• Проверьте маршруты (например, /main), чтобы убедиться, что они работают корректно.

Возможные проблемы и решения

1. Пустая страница
   Откройте консоль браузера (F12 → Console). Если есть ошибки 404 для ресурсов, проверьте, что все файлы из dist загружены в public_html, а не в подпапку.
2. 404 на маршрутах
   Убедитесь, что .htaccess настроен правильно и сервер поддерживает его (на REG.RU Apache включён по умолчанию).
3. Медленная загрузка
   Очистите кэш браузера и проверьте, что файлы загружены полностью.

Заключение

Размещение React-приложения на виртуальном хостинге — простой процесс, если следовать этим шагам. REG.RU — хороший выбор для новичков благодаря удобной панели управления и доступной цене. После настройки вы получите рабочее приложение, доступное в интернете. Если вы хотите автоматизировать деплой или использовать более сложные сценарии, обратите внимание на платформы вроде Vercel или Netlify — но это уже тема для другой статьи.

Удачи с запуском вашего проекта!