ReactJS met Nginx proxy installeren op CentOS 8

React is een gratis en open-source JavaScript bibliotheek ontwikkeld door Facebook. Het wordt gebruikt voor het maken van web frontend en UI componenten. Het wordt vaak gebruikt voor het ontwikkelen van Web Applicaties of Mobiele Apps. Het stelt ontwikkelaars in staat om herbruikbare componenten te maken die onafhankelijk van elkaar zijn. Het kan samen met andere bibliotheken gebruikt worden, waaronder, Axios, JQuery AJAX, of het in de browser ingebouwde window.fetch.

In deze post laten we je zien hoe je React JS op CentOS 8 kunt installeren.

Vereisten

  • Een server die CentOS 8 draait.
  • Een geldige domeinnaam gericht met je server IP.
  • Een root wachtwoord is op de server ingesteld.

Aan de slag

Alvorens te beginnen moet je je systeempakketten bijwerken tot de laatste versie. Je kunt ze bijwerken door het volgende commando uit te voeren:

dnf update -y

Zodra alle pakketten bijgewerkt zijn, installeer je andere vereiste afhankelijkheden met het volgende commando:

dnf install gcc-c++ make curl -y

Als je klaar bent met het installeren van de vereiste afhankelijkheden, kun je verder gaan met de volgende stap.

Installeer NPM en Node.js

Vervolgens moet je Node.js en NPM in je systeem installeren. NPM ook wel package manager genoemd is een command-line hulpmiddel dat gebruikt wordt voor interactie met Javascript pakketten. Standaard is de nieuwste versie van NPM en Node.js niet opgenomen in de CentOS standaard repository. Je zult dus de Node bron repository aan je systeem moeten toevoegen. Je kunt hem toevoegen met het volgende commando:

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

Zodra de repository is toegevoegd, installeer je de Node.js en NPM met het volgende commando:

dnf install nodejs -y

Als de installatie voltooid is, controleer dan de versie van Node.js door het volgende commando uit te voeren:

node -v

Je zou de volgende uitvoer moeten krijgen:

v14.16.0

Je kunt ook de NPM versie verifiëren door het volgende commando uit te voeren:

npm -v

Je zou de volgende uitvoer moeten krijgen:

6.14.11

Op dit punt zijn NPM en Node.js in je systeem geïnstalleerd. Je kunt nu verder gaan met de installatie van Reactjs.

Installeer Reactjs

Voor je begint, moet je create-react-app in je systeem installeren. Het is een command-line hulpprogramma dat gebruikt wordt om een React Applicatie te maken.

Je kunt het installeren met de NPM zoals hieronder te zien is:

npm install -g create-react-app

Eenmaal geïnstalleerd, controleer je de geïnstalleerde versie van create-react-app met het volgende commando:

create-react-app --version

Je zou de volgende uitvoer moeten zien:

4.0.3

Maak vervolgens je eerste Reactjs app met het volgende commando:

create-react-app myapp

Je zou de volgende uitvoer moeten zien:

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

Verander vervolgens de directory in myapp en start de applicatie met het volgende commando:

cd myapp
npm start

Als de applicatie met succes gestart is, zou je de volgende uitvoer moeten krijgen:

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.

Druk nu op CTRL+C om de toepassing te stoppen. Je kunt nu verder gaan met de volgende stap.

Maak een Systemd Service bestand voor Reactjs

Vervolgens is het een goed idee om een systemd dienstbestand aan te maken om de dienst Reactjs te beheren. Je kunt het aanmaken met het volgende commando:

nano /lib/systemd/system/react.service

Voeg de volgende regels toe:

[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

Bewaar en sluit het bestand en herlaad dan de systemd daemon met het volgende commando:

systemctl daemon-reload

Start vervolgens de Reactjs dienst en zet hem aan om te starten bij het herstarten van het systeem met het volgende commando:

systemctl start react
systemctl enable react

Controleer vervolgens de status van de Reactjs app met het volgende commando:

systemctl status react

Je zou de volgende uitvoer moeten krijgen:

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

Op dit punt is Reactjs gestart en luistert het op poort 3000. Je kunt dit verifiëren met het volgende commando:

ss -antpl | grep 3000

Je zou de volgende uitvoer moeten krijgen:

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

Als je klaar bent, kun je verder gaan met de volgende stap.

Configureer Nginx als omgekeerde proxy voor React App

Vervolgens moet je Nginx instellen als een omgekeerde proxy om de React app op poort 80 te benaderen. Installeer eerst het Nginx pakket met het volgende commando:

dnf install nginx -y

Als Nginx geïnstalleerd is, maak je een nieuw Nginx virtual host configuratiebestand met het volgende commando:

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

Voeg de volgende regels toe:

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

Sla het bestand op en sluit het als je klaar bent, controleer dan de Nginx op eventuele syntaxfouten met het volgende commando:

nginx -t

Je zou de volgende uitvoer moeten krijgen:

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

Start tenslotte de Nginx service en zet hem aan om te starten bij het herstarten van het systeem door het volgende commando uit te voeren:

systemctl start nginx
systemctl enable nginx

Je kunt ook de status van de Nginx controleren door het volgende commando uit te voeren:

systemctl status nginx

Je zou de status van de React dienst moeten krijgen in de volgende uitvoer:

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

Als je klaar bent, kun je verder gaan met de volgende stap.

Configureer de firewall

Vervolgens moet je poorten 80 en 443 door de firewall toestaan. Je kunt ze toestaan door het volgende commando uit te voeren:

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

Herlaad vervolgens de firewall om de veranderingen in de configuratie toe te passen:

firewall-cmd --reload

Als je klaar bent, kun je verder gaan met de volgende stap.

Toegang tot de Reactjs toepassing

Open nu je webbrowser en benader je Reactjs toepassing met de URL http://react.example.com. Je zou de Reactjs pagina op het volgende scherm moeten zien:

React.js op CentOS

Conclusie

Gefeliciteerd! je hebt Reactjs met succes geïnstalleerd op CentOS 8. Je hebt ook Nginx geconfigureerd als een reverse proxy voor de Reactjs app. Je kunt nu beginnen met de ontwikkeling van je Reactjs applicatie.