Как установить React на виртуальном хостинге?
React — это JavaScript-библиотека для создания пользовательских интерфейсов (UI), разработанная Facebook.
Что делает: помогает создавать интерактивные веб-приложения.
Как работает: разбивает интерфейс на компоненты, которые обновляются без перезагрузки страницы.
Преимущества:
Компоненты — переиспользуемые блоки интерфейса.
Быстрота — благодаря виртуальному DOM обновляется только нужное.
Односторонняя передача данных — проще контролировать состояние.
Экосистема — много готовых библиотек и инструментов.
Зачем нужен: Для создания современных, быстрых и масштабируемых веб-приложений (сайты, админки, личные кабинеты и т.д.).
1. Создание сайта и настройка обработчика для приложения React:
- В разделе "Сайты" нажмите кнопку "Создать сайт".
- Заполните необходимые поля, такие как доменное имя и путь к корневой директории сайта.
- В поле "Обработчик" выберите "Node.js".
- Убедитесь, что версия Node.js соответствует требованиям Next.js (рекомендуется версия 18.17 или выше).
- В поле "Способ подключения" выберите "Порт", так как приложения Node.js по умолчанию работают через порт.
2. Создание необходимых директорий и файлов:
1. В корневом каталоге сайта создайте директорию `public`
и в ней файл - index.html с содержимым:
<!DOCTYPE html>
<html>
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
2. В корневом каталоге сайта создайте директорию `src`
и в ней файл - index.js с содержимым:
import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>React работает на хостинге!</h1>);
3. В корневом каталоге сайта создайте файл - server.js
С содержимым:
// server.js
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
// Используйте регулярное выражение для wildcard
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
const PORT = process.env.PORT || XXXXX;
app.listen(PORT, () => {
console.log(`Сервер запущен на порту ${PORT}`);
});
Важно! XXXX - номер порта, посмотреть мужно в настройках сайта:
3. В корневом каталоге сайта создайте файл - package.json
С содержимым:
{
"name": "react.test.808.by",
"version": "1.0.0",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js",
"build": "react-scripts build"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Важно! react.test.808.by - название Вашего приложения react (в данном случае домен сайта)
3. Установка, сборка и запуск приложения:
- Откройте shell-клиент под пользователем-владельцем сайта.
- Выполните команду:
npm install
Скорее всего ошибка, с которой вы столкнулись, связана с изменениями в Node.js начиная с версии 17, которые повлияли на использование OpenSSL в криптографических операциях. Конкретно, ошибка ERR_OSSL_EVP_UNSUPPORTED связана с использованием старых алгоритмов хэширования, которые не поддерживаются в OpenSSL 3, поставляемом с новыми версиями Node.js.
Использование переменной окружения для включения поддержки старых алгоритмов
Вы можете временно включить поддержку старых криптографических алгоритмов, установив переменную окружения NODE_OPTIONS перед сборкой. Это делается следующим образом в shell:
export NODE_OPTIONS=--openssl-legacy-provider
Далее делаем сборку приложения:
npm run build
И запускаем приложение:
npm start
Как проверить работу React
Запустите сайт в браузере и должно появится:
React работает на хостинге!
4. Дополнительные настройки
Если приложение должно работать в продакшн-режиме, убедитесь, что у вас есть правильная настройка SSL для вашего домена (например, с помощью Let's Encrypt или другого сертификата).
Если вы хотите настроить автоматический перезапуск приложения, используйте PM2 или другой процесс-менеджер для Node.js.
Пример команды для запуска с PM2:
npm install pm2 -g
pm2 start server.js --name "react.test.808.by"
pm2 save
Важно! react.test.808.by - название вагего приложения.
Теперь ваше приложение будет работать стабильно и перезапускаться автоматически в случае сбоев.
5. Установка дополнительных пакетов:
- После создания сайта нажмите на кнопку с изображением трех точек рядом с нужным сайтом и выберите "Просмотр пакетов Node.js".
- Нажмите кнопку "Установить".
- В поле "Название пакетов Node.js" введите через пробел:
название_пакета название_пакета название_пакета
- Нажмите "ОК" для начала установки пакетов.
После установки новых пакетов, не забывайте пересобирать и переустанвливать зависимости, как в п.3.
Что дальше?
Разработывайте или используете react приложения на хостинге самостоятельно или обратитесь к разработчикам.