Поиск по сайту:

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

На этой странице

  1. Предпосылки
  2. Начало работы
  3. Установите NPM и Node.js.
  4. Установите Reactjs
  5. Создание служебного файла Systemd для Reactjs
  6. Настройка Nginx в качестве обратного прокси-сервера для приложения React
  7. Настройка брандмауэра
  8. Доступ к приложению Reactjs
  9. Заключение

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 в вашу систему. Вы можете добавить его с помощью следующей команды:

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

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

Success! Created myapp at /root/myapp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd myapp
  npm start

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

cd myapp
npm start

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

Compiled successfully!

You can now view myapp in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use 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?: Project is running at http://0.0.0.0:3000/
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: webpack output is served from
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Content not from webpack is served from /root/myapp/public
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: 404s will fallback to /
Mar 23 02:52:34 centos8 npm[2191]: Starting the development server...
Mar 23 02:52:37 centos8 npm[2191]: Compiled successfully!
Mar 23 02:52:37 centos8 npm[2191]: You can now view myapp in the browser.
Mar 23 02:52:37 centos8 npm[2191]:   http://localhost:3000
Mar 23 02:52:37 centos8 npm[2191]: Note that the development build is not optimized.
Mar 23 02:52:37 centos8 npm[2191]: To create a production build, use npm run build.

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

ss -antpl | grep 3000

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

LISTEN    0         128                0.0.0.0:3000             0.0.0.0:*        users:(("node",pid=2209,fd=18))

Как только вы закончите, вы можете перейти к следующему шагу.

Настройте Nginx в качестве обратного прокси для приложения React

Затем вам нужно будет настроить Nginx в качестве обратного прокси-сервера для доступа к приложению React через порт 80. Сначала установите пакет Nginx с помощью следующей команды:

dnf install nginx -y

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

nano /etc/nginx/conf.d/react.conf

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

server {
    listen 80;
    server_name react.example.com;

    location / {
        proxy_set_header   X-Forwarded-For $remote_addr;
        proxy_set_header   Host $http_host;
        proxy_pass         http://localhost:3000;
    }
}

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

nginx -t

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

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Наконец, запустите службу Nginx и включите ее запуск при перезагрузке системы, выполнив следующую команду:

systemctl start nginx
systemctl enable nginx

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

systemctl status nginx

Вы должны получить статус службы React в следующем выводе:

? nginx.service - The nginx HTTP and reverse proxy server
   Loaded: loaded (/usr/lib/systemd/system/nginx.service; disabled; vendor preset: disabled)
   Active: active (running) since Tue 2021-03-23 02:57:48 EDT; 4s ago
  Process: 4079 ExecStart=/usr/sbin/nginx (code=exited, status=0/SUCCESS)
  Process: 4078 ExecStartPre=/usr/sbin/nginx -t (code=exited, status=0/SUCCESS)
  Process: 4076 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (code=exited, status=0/SUCCESS)
 Main PID: 4081 (nginx)
    Tasks: 2 (limit: 12524)
   Memory: 4.0M
   CGroup: /system.slice/nginx.service
           ??4081 nginx: master process /usr/sbin/nginx
           ??4082 nginx: worker process

Mar 23 02:57:48 centos8 systemd[1]: Starting The nginx HTTP and reverse proxy server...
Mar 23 02:57:48 centos8 nginx[4078]: nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
Mar 23 02:57:48 centos8 nginx[4078]: nginx: configuration file /etc/nginx/nginx.conf test is successful
Mar 23 02:57:48 centos8 systemd[1]: nginx.service: Failed to parse PID from file /run/nginx.pid: Invalid argument
Mar 23 02:57:48 centos8 systemd[1]: Started The nginx HTTP and reverse proxy server.

Как только вы закончите, вы можете перейти к следующему шагу.

Настроить брандмауэр

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

firewall-cmd --permanent --add-port=80/tcp
firewall-cmd --permanent --add-port=443/tcp

Затем перезагрузите брандмауэр, чтобы применить изменения конфигурации:

firewall-cmd --reload

Как только вы закончите, вы можете перейти к следующему шагу.

Доступ к приложению Reactjs

Теперь откройте веб-браузер и войдите в свое приложение Reactjs, используя URL-адрес http://react.example.com. Вы должны увидеть страницу Reactjs на следующем экране:

Заключение

Поздравляем! вы успешно установили Reactjs в CentOS 8. Вы также настроили Nginx в качестве обратного прокси-сервера для приложения Reactjs. Теперь вы можете приступить к разработке своего приложения Reactjs.