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_SERVERSuccessivamente 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_SERVERSuccessivamente 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 PORTAIniziare
Prima di iniziare, sarà necessario aggiornare i pacchetti di sistema all'ultima versione. Puoi aggiornarli eseguendo il seguente comando:
sudo dnf update -yUna volta che tutti i pacchetti sono aggiornati, installa le altre dipendenze richieste con il seguente comando:
sudo dnf install gcc-c++ make curl -yUna 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 -yUna volta completata l'installazione, verifica la versione di Node.js eseguendo il seguente comando:
node -vDovresti ottenere il seguente output:
v14.16.0È inoltre possibile verificare la versione di NPM eseguendo il comando seguente:
npm -vDovresti ottenere il seguente output:
6.14.11A 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-appUna volta installato, verifica la versione installata di create-react-app utilizzando il seguente comando:
create-react-app --versionDovresti vedere il seguente output:
4.0.3Quindi, crea la tua prima app Reactjs con il seguente comando:
create-react-app myappDovresti 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 startSuccessivamente, cambia la directory in myapp e avvia l'applicazione con il seguente comando:
cd myappsudo npm startUna 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.serviceAggiungi 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.targetSalvare e chiudere il file, quindi ricaricare il demone systemd con il seguente comando:
sudo systemctl daemon-reloadSuccessivamente, avvia il servizio Reactjs e abilitalo all'avvio al riavvio del sistema con il seguente comando:
sudo systemctl start reactsudo systemctl enable reactSuccessivamente, verifica lo stato dell'app Reactjs con il seguente comando:
sudo systemctl status reactDovresti 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 3000Dovresti 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 -yUna volta installato Nginx, crea un nuovo file di configurazione dell'host virtuale Nginx con il seguente comando:
sudo nano /etc/nginx/conf.d/react.confAggiungi 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 -tDovresti ottenere il seguente output:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successfulInfine, avvia il servizio Nginx e abilitalo all'avvio al riavvio del sistema eseguendo il seguente comando:
sudo systemctl start nginsudo systemctl enable nginxPuoi anche verificare lo stato di Nginx eseguendo il seguente comando:
sudo systemctl status nginxDovresti 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/tcpsudo firewall-cmd --permanent --add-port=443/tcpQuindi, ricarica il firewall per applicare le modifiche alla configurazione:
sudo firewall-cmd --reloadUna 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.
