Come installare ReactJS con Nginx proxy su CentOS 8

Introduzione

React è una libreria JavaScript gratuita e open source sviluppata da Facebook. Viene utilizzato per creare frontend web e componenti dell'interfaccia utente. Viene spesso utilizzato per lo sviluppo di applicazioni Web o app mobili. Consente agli sviluppatori di creare componenti riutilizzabili indipendenti l'uno dall'altro. Può essere utilizzato con altre librerie tra cui Axios, JQuery AJAX o il window.fetch integrato 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 con l'IP del tuo server.
• L'accesso root o un utente con privilegi sudo.

Se desideri installare ReactJS su un server in remoto continua a leggere, altrimenti salta il primo paragrafo "Connessione al Server" e leggi il successivo.

Connessione al Server

Per accedere al server, è necessario conoscere l'indirizzo IP. Avrai anche bisogno dell'username e della password per l'autenticazione. Per connettersi al server come utente root digitare il seguente comando:

ssh root@IP_DEL_SERVER

Successivamente sarà necessario inserire la password dell'utente root.

Se non utilizzate l'utente root potete connettervi con un'altro nome utente utilizzando lo stesso comando, quindi modificare root con il vostro nome_utente:

ssh nome_utente@IP_DEL_SERVER

Successivamente vi verrà chiesto di inserire la password del vostro utente.

La porta standard per connettersi tramite ssh è la 22, se il vostro server utilizza una porta diversa, sarà necessario specificarla utilizzando il parametro -p, quindi digitare il seguente comando:

ssh nome_utente@IP_DEL_SERVER -p PORTA

Iniziare

Prima di iniziare, sarà necessario aggiornare i pacchetti di sistema all'ultima versione. Puoi aggiornarli eseguendo il seguente comando:

sudo dnf update -y

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

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

Una volta terminata l'installazione delle dipendenze richieste, è possibile procedere al passaggio successivo.

Installare NPM e Node.js

Successivamente, dovrai installare Node.js e NPM nel tuo sistema. NPM, chiamato anche gestore di 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 dei sorgenti di Node al tuo sistema. Puoi aggiungerlo con il seguente comando curl:

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

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

sudo 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

È inoltre possibile verificare la versione di NPM eseguendo il comando seguente:

npm -v

Dovresti ottenere il seguente output:

6.14.11

A questo punto, NPM e Node.js sono installati nel sistema. Ora puoi procedere con l'installazione di Reactjs.

Installare Reactjs

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

È possibile installarlo utilizzando NPM come mostrato di seguito:

sudo 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

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

create-react-app myapp

Dovresti vedere il seguente output:

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

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

cd myapp

sudo npm start

Una volta che l'applicazione è stata avviata correttamente, dovresti ottenere il seguente output:

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.

Ora, premi CTRL + C per interrompere l'applicazione. È ora possibile procedere al passaggio successivo.

Creare 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:

sudo 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

Salvare e chiudere il file, quindi ricaricare il demone systemd con il seguente comando:

sudo systemctl daemon-reload

Successivamente, avvia il servizio Reactjs e abilitalo all'avvio al riavvio del sistema con il seguente comando:

sudo systemctl start react

sudo systemctl enable react

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

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

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.

Configurare Nginx come proxy inverso per l'app React

Successivamente, dovrai configurare Nginx come proxy inverso per accedere all'app React sulla porta 80. Innanzitutto, installa il pacchetto Nginx con il seguente comando:

sudo dnf install nginx -y

Una volta installato Nginx, crea un nuovo file di configurazione dell'host virtuale Nginx con il seguente comando:

sudo 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 qualsiasi errore di sintassi con il seguente comando:

sudo nginx -t

Dovresti ottenere il seguente output:

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

Infine, avvia il servizio Nginx e abilitalo all'avvio al riavvio del sistema eseguendo il seguente comando:

sudo systemctl start ngin

sudo systemctl enable nginx

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

sudo systemctl status nginx

Dovresti ottenere lo stato del servizio React nel seguente output:

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

Una volta terminato, puoi procedere al passaggio successivo.

Configurare il firewall

Successivamente, sarà necessario consentire le porte 80 e 443 attraverso il firewall. Se utilizzi CMD Firewall puoi consentirli eseguendo i seguenti comandi:

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

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

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

sudo firewall-cmd --reload

Una volta terminato, puoi procedere al passaggio successivo.

Accedere 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 nella schermata seguente:

Conclusione

Congratulazioni! hai installato correttamente Reactjs su CentOS 8. Hai anche configurato Nginx come proxy inverso per l'app Reactjs. Ora puoi iniziare a sviluppare la tua applicazione Reactjs.