Как установить ReactJS на Ubuntu 22.04

ReactJS — это фронтенд-библиотека с открытым исходным кодом на Javascript для построения пользовательских интерфейсов на основе компонентов. Она используется для разработки отдельных страниц, мобильных приложений или серверных рендеринговых приложений.

В этой статье мы установим ReactJS и настроим обратный прокси-сервер, чтобы можно было получить доступ к нему через доменное имя.

Установка ReactJS на Ubuntu 22.04 — это несложный процесс, который может занять до 15 минут. Давайте приступим!

Необходимые условия

• Сервер с Ubuntu 22.04 в качестве ОС
• NVMe VPS с не менее чем 2 ГБ оперативной памяти
• Привилегии пользователя: root или не root с правами sudo

Шаг 1. Обновление системы

Прежде чем приступить к установке, необходимо обновить системные пакеты до последних доступных версий.

sudo apt-get update -y && sudo apt-get upgrade -y

Шаг 2. Установите NodeJS

NodeJS — это кроссплатформенная среда выполнения Javascript с открытым исходным кодом, необходимая для работы приложения ReactJS. Для установки NodeJS выполните следующие команды:

curl -sL https://deb.nodesource.com/setup_18.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt-get install -y nodejs

После установки проверьте версию установленного Node:

node -v

Вы должны получить следующий результат:

root@host:~# node -v
v18.16.1

Автоматически при этой установке система установит NPM. NPM — это менеджер пакетов для программирования на Javascript. Чтобы проверить версию установленного NPM, выполните следующую команду:

npm -v

Вы должны получить следующий результат:

root@host:~# npm -v
9.5.1

Чтобы обновить NPM до последней доступной версии, выполните следующую команду:

npm install npm@latest -g

Теперь должна быть установлена последняя версия NPM:

root@host:~# npm -v
9.7.2

Шаг 3. Установка ReactJS и создание приложения

Нам необходимо установить пакет ReactJS, необходимый для создания проектов ReactJS. Для этого выполните следующую команду:

npm install -g create-react-app

После установки проверьте установленную версию:

create-react-app --version

Вы должны получить следующий результат:

root@host:~# create-react-app --version
5.0.1

Для создания приложения ReactJS выполните следующую команду:

create-react-app rosehosting-project

После создания вы должны получить вывод, аналогичный приведенному ниже:

Шаг 4. Создание служебного файла ReactJS

Для создания служебного файла systemd выполните следующую команду:

touch /lib/systemd/system/reactjs.service

Откройте файл и вставьте в него следующие строки кода:

[Service]
Type=simple
User=root
Restart=on-failure
WorkingDirectory=/root/rosehosting-project
ExecStart=npm start -- --port=3000

Сохраните файл, закройте его и перезагрузите демон:

systemctl daemon-reload

Запустите и включите службу ReactJS:

sudo systemctl start reactjs && sudo systemctl enable reactjs

Проверьте состояние сервиса:

sudo systemctl status reactjs

Вы должны получить следующий результат:

Шаг 5. Установить Web-сервер Apache

Для установки Web-сервера Apache выполните следующую команду:

sudo apt install apache2

После установки запустите и включите службу.

sudo systemctl enable apache2 && sudo systemctl start apache2

Проверьте, работает ли служба:

sudo systemctl status apache2

Вы должны получить следующий результат:

Шаг 6. Создание файла виртуального хоста Apache и настройка обратного прокси-сервера

Создайте файл:

touch /etc/apache2/sites-available/reactjs.conf

Откройте файл и вставьте в него следующие строки кода:

<VirtualHost *:80>
  ServerName yourdomain.com
  ProxyRequests off
  ProxyPass / http://127.0.0.1:3000/
  ProxyPassReverse / http://127.0.0.1:3000/ 
</VirtualHost>

Сохраните файл, закройте его и включите сайт

a2ensite reactjs.conf
a2enmod proxy
a2enmod proxy_http

Проверьте синтаксис Apache:

apachectl -t

Вы должны получить следующий результат:

root@vps:~# apachectl -t
Syntax OK

Если синтаксис в порядке, перезапустите службу Apache.

systemctl reload apache2

После перезапуска службы Apache можно получить доступ к ReactJS по адресу http://yourdomain.com.

Вот и все. Вы успешно установили и настроили ReactJS на Ubuntu 22.04 с Apache в качестве обратного прокси.