Guide Open Source

GUIDE E MANUALI DEL MONDO LINUX E CMS

Guide Open Source

GUIDE E MANUALI DEL MONDO LINUX E CMS

Guide Open Source

GUIDE E MANUALI DEL MONDO LINUX E CMS

Come installare ReactJS con Nginx server proxy su CentOS 8

Reagire è un programma gratuito e open-source libreria JavaScript sviluppato da Facebook. Esso è utilizzato per la creazione di web frontend e i componenti dell’interfaccia utente. Esso è spesso utilizzato per lo sviluppo di Applicazioni Web o Mobile. Esso consente agli sviluppatori di creare componenti riutilizzabili che sono indipendenti tra loro. Può essere utilizzato con altre biblioteche, tra cui, Axios, JQuery, AJAX, o il browser built-in finestra.fetch.

In questo post, vi mostreremo come installare Reagire JS su CentOS 8

Prerequisiti

  • Un server con CentOS 8.
  • Un nome di dominio valido evidenziato IP del vostro server.
  • Una password di root è configurato sul server.

Guida Introduttiva

Prima di iniziare, è necessario aggiornare il vostro sistema di pacchetti all’ultima versione. È possibile aggiornare eseguendo il seguente comando:

dnf aggiornamento -y

Una volta che tutti i pacchetti sono up-to-date, di installare altre dipendenze con il seguente comando:

dnf installare gcc-c++ fare curl-y

Una volta che hai finito di installare le dipendenze necessarie, si può procedere con il passaggio successivo.

Installare NPM e Node.js

A quel punto, sarà necessario installare Node.js e NPM nel vostro sistema. NPM anche chiamato package manager è uno strumento da riga di comando utilizzato per interagire con Javascript pacchetti. Per impostazione predefinita, la versione più recente di NPM e Node.js non è incluso nel CentOS repository di default. Quindi sarà necessario aggiungere il Nodo di origine repository di sistema. È possibile aggiungere con il seguente comando:

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

Una volta che il repository è aggiunto, installare il Node.js e NPM con il seguente comando:

dnf installare nodejs -y

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

nodo -v

Si dovrebbe ottenere il seguente output:

v14.16.0

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

npm -v

Si dovrebbe ottenere il seguente output:

6.14.11

A questo punto, NPM e Node.js vengono installati nel sistema. È ora possibile procedere all’installazione di Reactjs.

Installare Reactjs

Prima di iniziare, è necessario installare creare-reagire-app nel vostro sistema. Si tratta di una utility a riga di comando utilizzato per creare un Reagire Applicazione.

È possibile installarlo utilizzando il NPM, come illustrato di seguito:

npm install-g creare-reagire-app

Una volta installato, verificare la versione installata di creare-reagire-app utilizzando il seguente comando:

creare-reagire-app --version

Si dovrebbe vedere il seguente output:

4.0.3

Successivamente, creare il tuo primo Reactjs app con il seguente comando:

creare-reagire-applicazione myapp

Si dovrebbe vedere il seguente output:

Il successo! Creato myapp in /root/myapp
All'interno di tale directory, è possibile eseguire diversi comandi:

 npm inizio
 Avvia il server di sviluppo.

 npm eseguire build
 Bundle di app in file statici per la produzione.

 npm test
 Inizia il test runner.

 npm esecuzione di espulsione
 Rimuove questo strumento e copie dipendenze di file di configurazione
 e gli script nella cartella app. Se si esegue questa operazione, non si può tornare indietro!

Vi consigliamo di iniziare digitando:

 cd myapp
 npm inizio

A quel punto, passare alla directory dell’applicazione e avviare l’applicazione con il comando seguente:

cd myapp
npm inizio

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

Compilato correttamente!

È ora possibile visualizzare l'applicazione nel browser.

http://localhost:3000

Nota che la build di sviluppo non è ottimizzato.
Per creare una produzione costruire, utilizzare npm eseguire costruire.

Ora, premere CTRL+C per interrompere l’applicazione. Si può ora procedere con il passaggio successivo.

Creare un Servizio di Systemd File per Reactjs

A quel punto, è una buona idea per creare un servizio di systemd file per gestire il Reactjs servizio. Si possono creare con il seguente comando:

nano /lib/systemd/system/reagire.servizio

Aggiungere le seguenti righe:

[Unit]
Dopo=la rete.destinazione

[Servizio]
Tipo=semplice
Utente=root
WorkingDirectory=/root/myapp
ExecStart=/usr/bin/npm inizio
Riavviare=negativo

[Installazione]
WantedBy=multi-utente.destinazione

Salvare e chiudere il file e poi ricaricare la systemd demone con il seguente comando:

systemctl daemon-reload

A quel punto, avviare il Reactjs servizio e consentono di avviare al riavvio del sistema con il comando seguente:

systemctl start reagire
systemctl enable reagire

Avanti, verificare lo stato della Reactjs app con il seguente comando:

systemctl status di reagire

Si dovrebbe ottenere il seguente output:

? reagire.servizio
 Caricato, caricato (/usr/lib/systemd/system/reagire.servizio; disabili; fornitore di preselezione: disabili)
 Attivo: attivo (in esecuzione) dal Mar 2021-03-23 02:52:32 EDT; 6s fa
 Principali PID: 2191 (nodo)
 Compiti: 29 (limite: 12524)
 Memoria: 220.3 M
 CGroup: /system.affettare/reagire.servizio
 ??2191 npm
 ??2202 nodo /root/myapp/node_modules/.bin/reagire-script di avvio
 ??2209 /usr/bin/node /root/myapp/node_modules/react-scripts/scripts/start.js

23-Mar-02:52:34 centos8 npm[2191]: ? ?wds?: Il progetto è in esecuzione http://0.0.0.0:3000/
23-Mar-02:52:34 centos8 npm[2191]: ? ?wds?: webpack uscita è servita da
23-Mar-02:52:34 centos8 npm[2191]: ? ?wds?: Il contenuto non è da webpack è servita da /root/myapp/pubblico
23-Mar-02:52:34 centos8 npm[2191]: ? ?wds?: 404 volontà di riserva /
23-Mar-02:52:34 centos8 npm[2191]: avviare il server di sviluppo...
23-Mar-02:52:37 centos8 npm[2191]: Compilato correttamente!
23-Mar-02:52:37 centos8 npm[2191]: ora È possibile visualizzare l'applicazione nel browser.
23-Mar-02:52:37 centos8 npm[2191]: http://localhost:3000
23-Mar-02:52:37 centos8 npm[2191]: Nota che la build di sviluppo non è ottimizzato.
23-Mar-02:52:37 centos8 npm[2191]: Per creare una produzione costruire, utilizzare npm eseguire costruire.

A questo punto, Reactjs è iniziato e in ascolto sulla porta 3000. È possibile verificare con il seguente comando:

ss -antpl | grep 3000

Si dovrebbe ottenere il seguente output:

ASCOLTARE 0 128 0.0.0.0:3000 0.0.0.0:* utenti:(("nodo",pid=2209,fd=18)) 

Una volta che hai finito, si può procedere con il passaggio successivo.

Configurare Nginx come Reverse Proxy Per Reagire App

A quel punto, sarà necessario configurare Nginx come reverse proxy per l’accesso a Reagire app sulla porta 80. In primo luogo, installare il Nginx pacchetto con il comando seguente:

dnf installare nginx -y

Una volta che il Nginx è installato, è possibile creare un nuovo Nginx di configurazione del virtual host file con il seguente comando:

nano /etc/nginx/conf.d/reagire.conf

Aggiungere le seguenti righe:

server {
 listen 80;
 server_name react.example.com;

 posizione / {
 proxy_set_header X-Forwarded-For $remote_addr;
 proxy_set_header Host $http_host;
 proxy_pass http://localhost:3000;
}
}

Salvare e chiudere il file quando hai finito, quindi verificare il Nginx per qualsiasi errore di sintassi con il seguente comando:

nginx -t

Si dovrebbe ottenere il seguente output:

nginx: il file di configurazione /etc/nginx/nginx.conf sintassi è ok
nginx: file di configurazione /etc/nginx/nginx.conf test è successo

Infine, avviare il Nginx servizio e consentono di avviare al riavvio del sistema eseguendo il seguente comando:

systemctl start nginx
systemctl enable nginx

È inoltre possibile verificare lo stato di Nginx eseguendo il seguente comando:

systemctl status di nginx

Si dovrebbe ottenere lo stato di Reagire servizio il seguente output:

? nginx.servizio - Il nginx HTTP e il server proxy inverso
 Caricato, caricato (/usr/lib/systemd/system/nginx.servizio; disabili; fornitore di preselezione: disabili)
 Attivo: attivo (in esecuzione) dal Mar 2021-03-23 02:57:48 EDT; 4s fa
 Processo: 4079 ExecStart=/usr/sbin/nginx (codice=chiuso, status=0/SUCCESSO)
 Processo: 4078 ExecStartPre=/usr/sbin/nginx -t (codice=chiuso, status=0/SUCCESSO)
 Processo: 4076 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (codice=chiuso, status=0/SUCCESSO)
 Principali PID: 4081 (nginx)
 Attività: 2 (limite: 12524)
 Memoria: 4.0 M
 CGroup: /system.affettare/nginx.servizio
 ??4081 nginx: master process /usr/sbin/nginx
 ??4082 nginx: processo di lavoro

23-Mar-02:57:48 centos8 systemd[1]: a Partire Il nginx HTTP e il server proxy inverso...
23-Mar-02:57:48 centos8 nginx[4078]: nginx: il file di configurazione /etc/nginx/nginx.conf sintassi è ok
23-Mar-02:57:48 centos8 nginx[4078]: nginx: file di configurazione /etc/nginx/nginx.conf test è successo
23-Mar-02:57:48 centos8 systemd[1]: nginx.servizio: Impossibile analizzare il PID da file /esegui/nginx.pid: argomento non Valido
23-Mar-02:57:48 centos8 systemd[1]: Iniziato Il nginx HTTP e il server proxy inverso.

Una volta che hai finito, si può procedere con il passaggio successivo.

Configurare Il Firewall

A quel punto, sarà necessario per consentire le porte 80 e 443 attraverso il firewall. È possibile consentire loro eseguendo il seguente comando:

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

A quel punto, ricaricare il firewall per applicare le modifiche di configurazione:

firewall-cmd --ricaricare

Una volta che hai finito, si può procedere con il passaggio successivo.

Accesso Reactjs Applicazione

Ora, aprire il browser web e accedere al tuo Reactjs applicazione che utilizza l’URL http://react.example.com. Si dovrebbe vedere il Reactjs pagina la seguente schermata:

React.js su CentOS

Conclusione

Complimenti! hai installato con successo Reactjs su CentOS 8. Hai configurato anche Nginx come reverse proxy per la Reactjs app. È ora possibile iniziare a sviluppare la tua Reactjs applicazione.

Piaciuto l'articolo? Condividilo sui social!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp