Jak nainstalovat ReactJS s proxy Nginx na CentOS 8

React je bezplatná knihovna JavaScript s otevřeným zdrojovým kódem vyvinutá společností Facebook. Používá se pro vytváření webových frontendů a komponent uživatelského rozhraní. Často se používá pro vývoj webových aplikací nebo mobilních aplikací. Umožňuje vývojářům vytvářet opakovaně použitelné komponenty, které jsou na sobě nezávislé. Lze jej použít s jinými knihovnami včetně Axios, JQuery AJAX nebo s vestavěným window.fetch v prohlížeči.

V tomto příspěvku vám ukážeme, jak nainstalovat React JS na CentOS 8

Předpoklady

• Server se systémem CentOS 8.
• Platný název domény s adresou IP vašeho serveru.
• Na serveru je nakonfigurováno heslo uživatele root.

Začínáme

Než začnete, budete muset aktualizovat systémové balíčky na nejnovější verzi. Můžete je aktualizovat spuštěním následujícího příkazu:

dnf update -y

Jakmile budou všechny balíčky aktuální, nainstalujte další požadované závislosti pomocí následujícího příkazu:

dnf install gcc-c++ make curl -y

Jakmile dokončíte instalaci požadovaných závislostí, můžete přejít k dalšímu kroku.

Instalovat NPM a Node.js

Dále budete muset do systému nainstalovat Node.js a NPM. NPM také nazývaný správce balíčků je nástroj příkazového řádku používaný pro interakci s balíčky Javascript. Ve výchozím nastavení není nejnovější verze NPM a Node.js součástí výchozího úložiště CentOS. Budete tedy muset do svého systému přidat zdrojové úložiště Node. Můžete jej přidat pomocí následujícího příkazu:

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

Po přidání úložiště nainstalujte soubory Node.js a NPM pomocí následujícího příkazu:

dnf install nodejs -y

Po dokončení instalace ověřte verzi Node.js spuštěním následujícího příkazu:

node -v

Měli byste získat následující výstup:

v14.16.0

Verzi NPM můžete také ověřit spuštěním následujícího příkazu:

npm -v

Měli byste získat následující výstup:

6.14.11

V tomto okamžiku jsou ve vašem systému nainstalovány NPM a Node.js. Nyní můžete pokračovat v instalaci Reactjs.

Instalovat Reactjs

Než začnete, budete muset do svého systému nainstalovat create-react-app. Je to nástroj příkazového řádku používaný k vytvoření aplikace React.

Můžete jej nainstalovat pomocí NPM, jak je znázorněno níže:

npm install -g create-react-app

Po instalaci ověřte nainstalovanou verzi create-react-app pomocí následujícího příkazu:

create-react-app --version

Měli byste vidět následující výstup:

4.0.3

Dále vytvořte svou první aplikaci Reactjs pomocí následujícího příkazu:

create-react-app myapp

Měli byste vidět následující výstup:

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

Dále změňte adresář na myapp a spusťte aplikaci následujícím příkazem:

cd myapp
npm start

Po úspěšném spuštění aplikace byste měli získat následující výstup:

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.

Nyní stiskněte CTRL+C pro zastavení aplikace. Nyní můžete přejít k dalšímu kroku.

Vytvořte soubor služby Systemd pro Reactjs

Dále je dobré vytvořit soubor služby systemd pro správu služby Reactjs. Můžete jej vytvořit pomocí následujícího příkazu:

nano /lib/systemd/system/react.service

Přidejte následující řádky:

[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

Uložte a zavřete soubor a poté znovu načtěte démona systemd pomocí následujícího příkazu:

systemctl daemon-reload

Dále spusťte službu Reactjs a povolte její spuštění při restartu systému pomocí následujícího příkazu:

systemctl start react
systemctl enable react

Dále ověřte stav aplikace Reactjs pomocí následujícího příkazu:

systemctl status react

Měli byste získat následující výstup:

? 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.

V tomto okamžiku se Reactjs spustí a naslouchá na portu 3000. Můžete to ověřit pomocí následujícího příkazu:

ss -antpl | grep 3000

Měli byste získat následující výstup:

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

Jakmile budete hotovi, můžete přejít k dalšímu kroku.

Nakonfigurujte Nginx jako reverzní proxy pro aplikaci React

Dále budete muset nakonfigurovat Nginx jako reverzní proxy pro přístup k aplikaci React na portu 80. Nejprve nainstalujte balíček Nginx pomocí následujícího příkazu:

dnf install nginx -y

Jakmile je Nginx nainstalován, vytvořte nový konfigurační soubor virtuálního hostitele Nginx pomocí následujícího příkazu:

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

Přidejte následující řádky:

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;
    }
}

Po dokončení uložte a zavřete soubor a poté ověřte, zda Nginx neobsahuje nějakou chybu syntaxe pomocí následujícího příkazu:

nginx -t

Měli byste získat následující výstup:

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

Nakonec spusťte službu Nginx a povolte její spuštění při restartu systému spuštěním následujícího příkazu:

systemctl start nginx
systemctl enable nginx

Stav Nginx můžete také ověřit spuštěním následujícího příkazu:

systemctl status nginx

V následujícím výstupu byste měli získat stav služby 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.

Jakmile budete hotovi, můžete přejít k dalšímu kroku.

Konfigurovat bránu firewall

Dále budete muset povolit porty 80 a 443 přes bránu firewall. Můžete je povolit spuštěním následujícího příkazu:

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

Poté znovu načtěte bránu firewall, aby se změny konfigurace uplatnily:

firewall-cmd --reload

Jakmile budete hotovi, můžete přejít k dalšímu kroku.

Přístup k aplikaci Reactjs

Nyní otevřete webový prohlížeč a otevřete aplikaci Reactjs pomocí adresy URL http://react.example.com . Na následující obrazovce byste měli vidět stránku Reactjs:

Závěr

Gratulujeme! úspěšně jste nainstalovali Reactjs na CentOS 8. Také jste nakonfigurovali Nginx jako reverzní proxy pro aplikaci Reactjs. Nyní můžete začít vyvíjet svou aplikaci Reactjs.