Як встановити 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 як зворотний проксі.