Как установить ReactJS с прокси Nginx на CentOS 8

React — это бесплатная и с открытым исходным кодом библиотека JavaScript, разработанная Facebook. Она используется для создания веб-фронтенда и компонентов пользовательского интерфейса. Часто используется для разработки веб-приложений или мобильных приложений. Она позволяет разработчикам создавать переиспользуемые компоненты, которые независимы друг от друга. Может использоваться с другими библиотеками, включая Axios, JQuery AJAX или встроенный в браузер window.fetch.

В этом посте мы покажем вам, как установить React JS на CentOS 8

Предварительные требования

• Сервер с установленным CentOS 8.
• Действительное доменное имя, указывающее на IP вашего сервера.
• Настроенный root-пароль на сервере.

Начало работы

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

dnf update -y

После того как все пакеты будут обновлены, установите другие необходимые зависимости с помощью следующей команды:

dnf install gcc-c++ make curl -y

После завершения установки необходимых зависимостей вы можете перейти к следующему шагу.

Установка NPM и Node.js

Далее вам нужно будет установить Node.js и NPM в вашей системе. NPM, также называемый менеджером пакетов, — это инструмент командной строки, используемый для взаимодействия с пакетами JavaScript. По умолчанию последняя версия NPM и Node.js не включена в стандартный репозиторий CentOS. Поэтому вам нужно будет добавить репозиторий Node source в вашу систему. Вы можете добавить его с помощью следующей команды:

curl -sL https://rpm.nodesource.com/setup_14.x | bash -

После добавления репозитория установите Node.js и NPM с помощью следующей команды:

dnf install nodejs -y

После завершения установки проверьте версию Node.js, выполнив следующую команду:

node -v

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

v14.16.0

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

npm -v

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

6.14.11

На этом этапе NPM и Node.js установлены в вашей системе. Теперь вы можете перейти к установке Reactjs.

Установка Reactjs

Перед началом вам нужно будет установить create-react-app в вашей системе. Это утилита командной строки, используемая для создания React-приложения.

Вы можете установить его с помощью NPM, как показано ниже:

npm install -g create-react-app

После установки проверьте установленную версию create-react-app, используя следующую команду:

create-react-app --version

Вы должны увидеть следующий вывод:

4.0.3

Далее создайте ваше первое приложение Reactjs с помощью следующей команды:

create-react-app myapp

Вы должны увидеть следующий вывод:

Успех! Создан myapp в /root/myapp
Внутри этого каталога вы можете выполнять несколько команд:

  npm start
    Запускает сервер разработки.

  npm run build
    Упаковывает приложение в статические файлы для продакшена.

  npm test
    Запускает тестовый раннер.

  npm run eject
    Удаляет этот инструмент и копирует зависимости сборки, конфигурационные файлы
    и скрипты в каталог приложения. Если вы это сделаете, вы не сможете вернуться!

Мы рекомендуем вам начать с ввода:

  cd myapp
  npm start

Далее измените каталог на myapp и запустите приложение с помощью следующей команды:

cd myapp  
npm start

После успешного запуска приложения вы должны получить следующий вывод:

Скомпилировано успешно!

Теперь вы можете просмотреть myapp в браузере.

  http://localhost:3000

Обратите внимание, что сборка разработки не оптимизирована.
Чтобы создать сборку для продакшена, используйте npm run build.

Теперь нажмите CTRL+C, чтобы остановить приложение. Теперь вы можете перейти к следующему шагу.

Создание файла службы Systemd для Reactjs

Далее будет хорошей идеей создать файл службы systemd для управления службой Reactjs. Вы можете создать его с помощью следующей команды:

nano /lib/systemd/system/react.service

Добавьте следующие строки:

[Unit]
After=network.target

[Service]
Type=simple
User=root
WorkingDirectory=/root/myapp
ExecStart=/usr/bin/npm start
Restart=on-failure

[Install]
WantedBy=multi-user.target

Сохраните и закройте файл, затем перезагрузите демон systemd с помощью следующей команды:

systemctl daemon-reload

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

systemctl start react  
systemctl enable react

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

systemctl status react

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

? react.service
   Loaded: loaded (/usr/lib/systemd/system/react.service; disabled; vendor preset: disabled)
   Active: active (running) since Tue 2021-03-23 02:52:32 EDT; 6s ago
 Main PID: 2191 (node)
    Tasks: 29 (limit: 12524)
   Memory: 220.3M
   CGroup: /system.slice/react.service
           ??2191 npm
           ??2202 node /root/myapp/node_modules/.bin/react-scripts start
           ??2209 /usr/bin/node /root/myapp/node_modules/react-scripts/scripts/start.js

Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Проект работает на http://0.0.0.0:3000/
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: вывод webpack обслуживается из
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Контент, не относящийся к webpack, обслуживается из /root/myapp/public
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: 404s будут перенаправлены на /
Mar 23 02:52:34 centos8 npm[2191]: Запуск сервера разработки...
Mar 23 02:52:37 centos8 npm[2191]: Скомпилировано успешно!
Mar 23 02:52:37 centos8 npm[2191]: Теперь вы можете просмотреть myapp в браузере.
Mar 23 02:52:37 centos8 npm[2191]:   http://localhost:3000
Mar 23 02:52:37 centos8 npm[2191]: Обратите внимание, что сборка разработки не оптимизирована.
Mar 23 02:52:37 centos8 npm[2191]: Чтобы создать сборку для продакшена, используйте npm run build.

На этом этапе Reactjs запущен и слушает на порту 3000. Вы можете проверить это с помощью следующей команды:

ss -antpl | grep 3000

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

LISTEN    0         128                0.0.0.0:3000             0.0.0.0:*        users:((