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

12 set 2022 6 min di lettura
Как установить ReactJS с прокси-сервером Nginx в CentOS 8
Indice dei contenuti

Введение

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

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

Предпосылки

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

Если вы хотите установить ReactJS на удаленный сервер, продолжайте читать, в противном случае пропустите первый абзац «Подключение к серверу» и читайте следующий.

Подключение к серверу

Чтобы получить доступ к серверу, вам нужно знать IP-адрес. Вам также потребуется ваше имя пользователя и пароль для аутентификации. Чтобы подключиться к серверу как root, введите следующую команду:

ssh root@IP_DEL_SERVER

Далее вам нужно будет ввести пароль пользователя root.

Если вы не используете пользователя root, вы можете войти под другим именем пользователя с помощью той же команды, а затем изменить root на свое имя пользователя:

ssh nome_utente@IP_DEL_SERVER

Затем вам будет предложено ввести пароль пользователя.

Стандартный порт для подключения по ssh — 22, если ваш сервер использует другой порт, вам нужно будет указать его с помощью параметра -p, затем введите следующую команду:

ssh nome_utente@IP_DEL_SERVER -p PORTA

Начать

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

sudo dnf update -y

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

sudo dnf install gcc-c++ make curl -y

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

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

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

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

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

sudo dnf install nodejs -y

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

node -v

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

v14.16.0

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

npm -v

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

6.14.11

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

Установите Reactjs

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

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

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

sudo 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 с помощью следующей команды:

sudo systemctl daemon-reload

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

sudo systemctl start react
sudo systemctl enable react

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

sudo systemctl status react

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

? react.service
 Loaded: loaded (/usr/lib/systemd/system/react.service; disabled; vendor preset: disabled)
 Active: active (running) since 2021-03-22 01:51:33 EDT; 4s 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 с помощью следующей команды:

sudo dnf install nginx -y

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

sudo 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 на наличие синтаксических ошибок с помощью следующей команды:

sudo nginx -t

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

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

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

sudo systemctl start ngin
sudo systemctl enable nginx

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

sudo 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 через брандмауэр. Если вы используете брандмауэр CMD, вы можете разрешить их, выполнив следующие команды:

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

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

sudo firewall-cmd --reload

После этого вы можете перейти к следующему шагу.

Войдите в приложение Reactjs

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

Вывод

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

Support us with a

Successivamente, completa il checkout per l'accesso completo a Noviello.it.
Bentornato! Accesso eseguito correttamente.
Ti sei abbonato con successo a Noviello.it.
Successo! Il tuo account è completamente attivato, ora hai accesso a tutti i contenuti.
Operazione riuscita. Le tue informazioni di fatturazione sono state aggiornate.
La tua fatturazione non è stata aggiornata.