Шаг 1. Обновление репозитория пакетов.
Чтобы обеспечить плавный процесс установки, крайне важно обновить вашу систему Ubuntu до последней стабильной версии. Откройте терминал и выполните следующие команды:
sudo apt update
Это позволит получить самую свежую информацию о пакете и обновить все устаревшие пакеты до новейших версий.
Шаг 2. Установка Node.js и npm.
React.JS требует, чтобы в вашей системе были установлены Node.js и npm (менеджер пакетов Node). Мы установим их, используя официальный репозиторий NodeSource для самых последних версий.
Сначала добавьте репозиторий NodeSource в свою систему:
curl -sL https://deb.nodesource.com/setup_20.x | sudo -E bash -
Затем установите Node.js и npm, выполнив:
sudo apt install nodejs
Проверьте установку, проверив версии Node.js и npm:
node -v npm -v
Шаг 3. Установка приложения create-react-app.
Чтобы упростить процесс создания нового приложения React, мы воспользуемся утилитой create-react-app. Этот инструмент устанавливает среду разработки со всеми необходимыми инструментами сборки и конфигурациями.
Установить create-react-app глобально с помощью npm:
sudo npm install -g create-react-app
Проверьте установку, выполнив:
create-react-app --version
Шаг 4. Создайте свое первое приложение React
С create-react-app установлено, давайте создадим наше первое приложение React. Перейдите в каталог, в котором вы хотите создать проект, и выполните следующую команду:
create-react-app my-app
Заменять my-app с желаемым названием приложения. Эта команда создаст новый каталог с указанным именем и настроит внутри него базовую структуру проекта React.
После завершения процесса создания проекта перейдите в каталог проекта:
cd my-app
Чтобы запустить сервер разработки и запустить приложение React, используйте следующую команду:
npm start
Это скомпилирует ваше приложение и запустит локальный сервер разработки. Откройте веб-браузер и посетите http://localhost:3000 чтобы увидеть ваше приложение React в действии.
Шаг 5. Настройте обратный прокси-сервер с помощью Apache.
Если вы хотите развернуть свое приложение React и сделать его доступным через доменное имя, вы можете настроить обратный прокси-сервер с помощью веб-сервера Apache. Этот шаг не является обязательным, но рекомендуется для производственных развертываний.
Установите Apache, запустив:
sudo apt install apache2
Создайте новый файл конфигурации виртуального хоста Apache:
sudo nano /etc/apache2/sites-available/react-app.conf
Добавьте в файл следующую конфигурацию:
<VirtualHost *:80> ServerName yourdomain.com ProxyRequests off ProxyPass / http://127.0.0.1:3000/ ProxyPassReverse / http://127.0.0.1:3000/ </VirtualHost>
Замените yourdomain.com своим фактическим доменным именем.
Сохраните файл и выйдите из редактора, затем включите новый виртуальный хост и необходимые модули Apache:
sudo a2ensite react-app.conf sudo a2enmod proxy proxy_http sudo systemctl restart apache2
Теперь ваше приложение React должно быть доступно через ваше доменное имя.
