Введение
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 myappsudo 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 reactsudo 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 nginsudo 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/tcpsudo 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.
