ReactJS te installeren op Ubuntu 20.04

ReactJS is een gratis en open-source JavaScript bibliotheek die gebruikt wordt om herbruikbare UI componenten te bouwen. Het werd in 2011 door Facebook ontwikkeld om snel en efficiënt rijke en boeiende web apps te maken met minimale codering. Je kunt er interactieve elementen mee op websites maken. Het gebruikt Virtual DOM dat de app snel maakt. Het biedt een rijke reeks functies, waaronder, Virtueel DOM, Eenrichtings Gegevens Binding, Componenten, JSX, Voorwaardelijke Verklaringen en nog veel meer.

In deze zelfstudie laten we je zien hoe je react app maken installeert en een ReactJS toepassing host met Nginx webserver op Ubuntu 20.04.

Vereisten

  • Een server met Ubuntu 20.04 met minimaal 2 GB RAM.
  • Een geldige domeinnaam gericht met je server IP. In deze tutorial gebruiken we reactjs.example.com domein.
  • Een root wachtwoord is de server geconfigureerd.

Aan de slag

Alvorens te beginnen is het altijd aan te raden je systeempakketten bij te werken tot de laatste versie. Je kunt ze bijwerken door het volgende commando uit te voeren:

apt-get update -y

Zodra alle pakketten zijn bijgewerkt, installeer je andere vereiste afhankelijkheden door het volgende commando uit te voeren:

apt-get install curl gnupg2 -y

Als alle afhankelijkheden geïnstalleerd zijn, kun je verder gaan met de volgende stap.

Installeer Node.js

Vervolgens moet je Node.js op je server installeren. Standaard is de nieuwste versie van Node.js niet beschikbaar in de standaard repository van Ubuntu 20.04. Je zult dus Node.js moeten installeren uit de officiële repository van Node.js.

Voeg eerst de Node.js repository toe met het volgende commando:

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

Voer vervolgens het volgende commando uit om Node.js op je systeem te installeren:

apt-get install nodejs -y

Na de installatie van Node.js werk je de NPM bij naar de nieuwste versie met het volgende commando:

npm install [email protected] -g

Je zou de volgende uitvoer moeten krijgen:

/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js
/usr/bin/npx -> /usr/lib/node_modules/npm/bin/npx-cli.js
+ [email protected]
updated 2 packages in 12.78s

Controleer vervolgens de geïnstalleerde versie van Node.js met het volgende commando:

node -v

Je zou de volgende uitvoer moeten krijgen:

v14.15.3

Als je klaar bent, kun je doorgaan naar de volgende stap.

Installeer het gereedschap Create React App

Create React App is een hulpmiddel dat je tijd bespaart voor setup en configuratie. Je hoeft maar een enkel commando uit te voeren en Create React App stelt alle gereedschappen in die nodig zijn om je project te starten.

Je kunt het Create React App gereedschap installeren met het volgende commando:

npm install -g create-react-app

Je zou de volgende uitvoer moeten krijgen:

/usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js
+ [email protected]
added 67 packages from 25 contributors in 4.705s

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

Maak je eerste React App

In dit deel laten we je zien hoe je een React app maakt met het Create React App gereedschap.

Verander eerst de directory in /opt en maak je eerste project met het volgende commando:

cd /opt
create-react-app reactproject

Je zou de volgende uitvoer moeten zien:

Success! Created reactproject at /opt/reactproject
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 reactproject
  npm start

Happy hacking!

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

cd /opt/reactproject
npm start

Je zou de volgende uitvoer moeten krijgen:

Compiled successfully!

You can now view reactproject in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Druk op CTRL+C om de toepassing te stoppen.

Maak een opstartbestand voor React App

Als je React App automatisch wilt starten bij het herstarten van het systeem, dan moet je een systemd service maken voor je React app. Zo kun je je app gemakkelijk beheren met het systemctl commando. Je kunt een systemd service bestand maken met het volgende commando:

nano /lib/systemd/system/react.service

Voeg de volgende regels toe:

[Service]
Type=simple
User=root
Restart=on-failure
WorkingDirectory=/opt/reactproject
ExecStart=npm start -- --port=3000

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

systemctl daemon-reload

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

systemctl start react
systemctl enable react

Je kunt de status van de React dienst controleren met het volgende commando:

systemctl status react

Je zou de volgende uitvoer moeten krijgen:

? react.service
     Loaded: loaded (/lib/systemd/system/react.service; static; vendor preset: enabled)
     Active: active (running) since Sat 2020-12-19 06:11:42 UTC; 4s ago
   Main PID: 30833 (node)
      Tasks: 30 (limit: 4691)
     Memory: 141.0M
     CGroup: /system.slice/react.service
             ??30833 npm
             ??30844 sh -c react-scripts start "--port=3000"
             ??30845 node /opt/reactproject/node_modules/.bin/react-scripts start --port=3000
             ??30852 /usr/bin/node /opt/reactproject/node_modules/react-scripts/scripts/start.js --port=3000

Dec 19 06:11:42 ubuntu2004 systemd[1]: Started react.service.
Dec 19 06:11:43 ubuntu2004 npm[30833]: > [email protected] start /opt/reactproject
Dec 19 06:11:43 ubuntu2004 npm[30833]: > react-scripts start "--port=3000"
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: webpack output is served from
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Content not from webpack is served from /opt/reactproject/public
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: 404s will fallback to /
Dec 19 06:11:46 ubuntu2004 npm[30852]: Starting the development server...

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

Configureer Nginx voor React App

Het is een goed idee om Nginx te installeren en te configureren als een reverse proxy voor React App. Zo kun je je app benaderen via poort 80.

Installeer eerst het Nginx pakket met het volgende commando:

apt-get install nginx -y

Als Nginx geïnstalleerd is, maak je een nieuw Nginx virtual host configuratiebestand:

nano /etc/nginx/sites-available/reactjs.conf

Voeg de volgende regels toe:

upstream backend {
  server localhost:3000;
}

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

    location / {
        proxy_pass http://backend/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $http_host;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forward-Proto http;
        proxy_set_header X-Nginx-Proxy true;

        proxy_redirect off;
    }
}

Bewaar en sluit het bestand en schakel dan de Nginx virtuele host in met het volgende commando:

ln -s /etc/nginx/sites-available/reactjs.conf /etc/nginx/sites-enabled/

Controleer vervolgens de Nginx op eventuele syntaxfouten door het volgende commando uit te voeren:

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

Herstart tenslotte de Nginx dienst om de veranderingen toe te passen:

systemctl restart nginx

Je kunt ook de status van de Nginx dienst controleren met het volgende commando:

systemctl status nginx

Je zou de volgende uitvoer moeten zien:

? nginx.service - A high performance web server and a reverse proxy server
     Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
     Active: active (running) since Sat 2020-12-19 06:12:42 UTC; 4s ago
       Docs: man:nginx(8)
    Process: 30899 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
    Process: 30913 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
   Main PID: 30915 (nginx)
      Tasks: 3 (limit: 4691)
     Memory: 3.6M
     CGroup: /system.slice/nginx.service
             ??30915 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
             ??30916 nginx: worker process
             ??30917 nginx: worker process

Dec 19 06:12:42 ubuntu2004 systemd[1]: Starting A high performance web server and a reverse proxy server...
Dec 19 06:12:42 ubuntu2004 systemd[1]: Started A high performance web server and a reverse proxy server.

Op dit punt is Nginx geïnstalleerd en geconfigureerd om React App te serveren. Je kunt nu verder gaan met de volgende stap.

Toegang tot de web-interface van React App

Open nu je webbrowser en typ de URL http://reactjs.example.com. Je wordt doorverwezen naar de React.Js webinterface in het volgende scherm:

Conclusie

Gefeliciteerd! je hebt met succes React.Js geïnstalleerd en geconfigureerd op Ubuntu 20.04 server. Ik hoop dat je nu genoeg kennis hebt om je eigen React toepassing in de productie omgeving te implementeren. Voel je vrij me te vragen als je vragen hebt.