Come installare ReactJS con proxy Nginx su CentOS 8

React è una libreria JavaScript gratuita e open source sviluppata da Facebook. Viene utilizzato per creare componenti Web frontend e UI. 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 browser integrato window.fetch.

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.
• Sul server è configurata una password di root.

Per iniziare

Prima di iniziare, dovrai aggiornare i pacchetti di 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 terminata 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 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 di origine 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 comando seguente:

node -v

Dovresti ottenere il seguente output:

v14.16.0

Puoi anche verificare la versione 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 tuo sistema. Ora puoi procedere con l'installazione di Reactjs.

Installa Reactjs

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

Puoi installarlo utilizzando l'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

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

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

cd myapp
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 fermare l'applicazione. Ora puoi 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

Quindi, avvia il servizio Reactjs e abilitalo all'avvio 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?: 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 viene avviato e resta 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 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:

dnf install nginx -y

Una volta installato Nginx, crea un nuovo file di configurazione dell'host virtuale 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 al termine, quindi verifica Nginx per eventuali errori di sintassi con il seguente comando:

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 comando seguente:

systemctl start nginx
systemctl enable nginx

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

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.

Configura Firewall

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

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

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

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