Come installare ReactJS con proxy Nginx su CentOS 8

React è una libreria JavaScript gratuita e open-source sviluppata da Facebook. Viene utilizzata per creare componenti frontend e UI web. È spesso utilizzata per sviluppare applicazioni web o app mobili. Permette agli sviluppatori di creare componenti riutilizzabili che sono indipendenti l’uno dall’altro. Può essere utilizzata con altre librerie tra cui Axios, JQuery AJAX o la funzione window.fetch integrata nel browser.

In questo post, ti mostreremo come installare React JS su CentOS 8

Prerequisiti

• Un server che esegue CentOS 8.
• Un nome di dominio valido puntato all’IP del tuo server.
• Una password di root configurata sul server.

Iniziare

Prima di iniziare, dovrai aggiornare i pacchetti del tuo sistema all’ultima versione. Puoi aggiornarli eseguendo il seguente comando:

dnf update -y

Una volta che tutti i pacchetti sono aggiornati, installa le altre dipendenze richieste con il seguente comando:

dnf install gcc-c++ make curl -y

Una volta completata l’installazione delle dipendenze richieste, puoi procedere al passaggio successivo.

Installa NPM e Node.js

Successivamente, dovrai installare Node.js e NPM nel tuo sistema. NPM, chiamato anche gestore pacchetti, è uno strumento da riga di comando utilizzato per interagire con i pacchetti Javascript. Per impostazione predefinita, l’ultima versione di NPM e Node.js non è inclusa nel repository predefinito di CentOS. Quindi dovrai aggiungere il repository di origine di Node al tuo sistema. Puoi aggiungerlo con il seguente comando:

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

Una volta aggiunto il repository, installa Node.js e NPM con il seguente comando:

dnf install nodejs -y

Una volta completata l’installazione, verifica la versione di Node.js eseguendo il seguente comando:

node -v

Dovresti ottenere il seguente output:

v14.16.0

Puoi anche verificare la versione di NPM eseguendo il seguente comando:

npm -v

Dovresti ottenere il seguente output:

6.14.11

A questo punto, NPM e Node.js sono installati nel tuo sistema. Puoi ora procedere a installare Reactjs.

Installa Reactjs

Prima di iniziare, dovrai installare create-react-app nel tuo sistema. È un’utilità da riga di comando utilizzata per creare un’applicazione React.

Puoi installarlo utilizzando NPM come mostrato di seguito:

npm install -g create-react-app

Una volta installato, verifica la versione installata di create-react-app utilizzando il seguente comando:

create-react-app --version

Dovresti vedere il seguente output:

4.0.3

Successivamente, crea la tua prima app Reactjs con il seguente comando:

create-react-app myapp

Dovresti vedere il seguente output:

Successo! Creato myapp in /root/myapp
Dentro quella directory, puoi eseguire diversi comandi:

  npm start
    Avvia il server di sviluppo.

  npm run build
    Raggruppa l'app in file statici per la produzione.

  npm test
    Avvia il runner di test.

  npm run eject
    Rimuove questo strumento e copia le dipendenze di build, i file di configurazione
    e gli script nella directory dell'app. Se lo fai, non puoi tornare indietro!

Ti suggeriamo di iniziare digitando:

  cd myapp
  npm start

Successivamente, cambia la directory in myapp e avvia l’applicazione con il seguente comando:

cd myapp  
npm start

Una volta che l’applicazione è stata avviata con successo, dovresti ottenere il seguente output:

Compilato con successo!

Puoi ora visualizzare myapp nel browser.

  http://localhost:3000

Nota che la build di sviluppo non è ottimizzata.
Per creare una build di produzione, usa npm run build.

Ora, premi CTRL+C per fermare l’applicazione. Puoi ora procedere al passaggio successivo.

Crea un file di servizio Systemd per Reactjs

Successivamente, è una buona idea creare un file di servizio systemd per gestire il servizio Reactjs. Puoi crearlo con il seguente comando:

nano /lib/systemd/system/react.service

Aggiungi le seguenti righe:

[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

Salva e chiudi il file, quindi ricarica il demone systemd con il seguente comando:

systemctl daemon-reload

Successivamente, avvia il servizio Reactjs e abilitalo per avviarsi al riavvio del sistema con il seguente comando:

systemctl start react  
systemctl enable react

Successivamente, verifica lo stato dell’app Reactjs con il seguente comando:

systemctl status react

Dovresti ottenere il seguente output:

? 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?: Il progetto è in esecuzione su http://0.0.0.0:3000/
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: l'output di webpack è servito da
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Il contenuto non proveniente da webpack è servito da /root/myapp/public
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: 404 verrà reindirizzato a /
Mar 23 02:52:34 centos8 npm[2191]: Avviando il server di sviluppo...
Mar 23 02:52:37 centos8 npm[2191]: Compilato con successo!
Mar 23 02:52:37 centos8 npm[2191]: Puoi ora visualizzare myapp nel browser.
Mar 23 02:52:37 centos8 npm[2191]:   http://localhost:3000
Mar 23 02:52:37 centos8 npm[2191]: Nota che la build di sviluppo non è ottimizzata.
Mar 23 02:52:37 centos8 npm[2191]: Per creare una build di produzione, usa npm run build.

A questo punto, Reactjs è avviato e in ascolto sulla porta 3000. Puoi verificarlo con il seguente comando:

ss -antpl | grep 3000

Dovresti ottenere il seguente output:

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

Una volta terminato, puoi procedere al passaggio successivo.

Configura Nginx come Reverse Proxy per l’App React

Successivamente, dovrai configurare Nginx come reverse proxy per accedere all’app React sulla porta 80. Prima di tutto, installa il pacchetto Nginx con il seguente comando:

dnf install nginx -y

Una volta installato Nginx, crea un nuovo file di configurazione del virtual host Nginx con il seguente comando:

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

Aggiungi le seguenti righe:

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

Salva e chiudi il file quando hai finito, quindi verifica Nginx per eventuali errori di sintassi con il seguente comando:

ginx -t

Dovresti ottenere il seguente output:

nginx: il file di configurazione /etc/nginx/nginx.conf ha una sintassi corretta
nginx: il test del file di configurazione /etc/nginx/nginx.conf è riuscito

Infine, avvia il servizio Nginx e abilitalo per avviarsi al riavvio del sistema eseguendo il seguente comando:

systemctl start nginx  
systemctl enable nginx

Puoi anche verificare lo stato di Nginx eseguendo il seguente comando:

systemctl status nginx

Dovresti ottenere lo stato del servizio React nel seguente output:

? nginx.service - Il server HTTP e reverse proxy nginx
   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: processo master /usr/sbin/nginx
           ??4082 nginx: processo worker

Mar 23 02:57:48 centos8 systemd[1]: Avviando il server HTTP e reverse proxy nginx...
Mar 23 02:57:48 centos8 nginx[4078]: nginx: il file di configurazione /etc/nginx/nginx.conf ha una sintassi corretta
Mar 23 02:57:48 centos8 nginx[4078]: nginx: il test del file di configurazione /etc/nginx/nginx.conf è riuscito
Mar 23 02:57:48 centos8 systemd[1]: nginx.service: Impossibile analizzare il PID dal file /run/nginx.pid: Argomento non valido
Mar 23 02:57:48 centos8 systemd[1]: Avviato il server HTTP e reverse proxy nginx.

Una volta terminato, puoi procedere al passaggio successivo.

Configura il Firewall

Successivamente, dovrai consentire le porte 80 e 443 attraverso il firewall. Puoi consentirle eseguendo il seguente comando:

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

Successivamente, ricarica il firewall per applicare le modifiche alla configurazione:

firebase-cmd --reload

Una volta terminato, puoi procedere al passaggio successivo.

Accedi all’Applicazione Reactjs

Ora, apri il tuo browser web e accedi alla tua applicazione Reactjs utilizzando l’URL http://react.example.com. Dovresti vedere la pagina Reactjs sullo schermo seguente:

Conclusione

Congratulazioni! hai installato con successo Reactjs su CentOS 8. Hai anche configurato Nginx come reverse proxy per l’app Reactjs. Puoi ora iniziare a sviluppare la tua applicazione Reactjs.