Wir lernen React JS – Server Setup (Part 1)

Wir lernen React JS

React – das wohl derzeit gefragteste Thema wenn es um moderne Webtechnologie geht. React ist eine Javascript Bibliothek, die von Facebook entwickelt worden ist. Im großen und ganzen geht bei React um Performance und die Wartung großer JS Webanwendungen. Anstatt alles in den regulären DOM zu schreiben, benutzt React ein sogenanntes virtuelles DOM.

In dieser tutorial Serie möchten wir euch ReactJS näher bringen. Ziel unseres Tutorials ist es eine Web Anwendung zu entwicklen mit folgenden Features:

  1. moderne ReactJS Web Applikation
  2. basierend auf einem headless CMS System
  3. Bootstrap CSS
  4. Kein jQuery

Wir sind absolute Neulinge auf dem Thema. Trotzdem versuchen wir euch das beizubringen, was wir beim Lernen von React gelernt haben. So könnt ihr hoffentlich die selben Fehler vermeiden die wir gemacht haben. Und wo wir schon bei Fehlern sind, hier ist schon der Erste.

Lesson 1: Kein Debian Server – immer Ubuntu.

Kurzer Background: wir haben uns natürlich schon vorher mit ReactJS beschäftigt. Damals haben wir es auf einem Debian Server probiert. Schon bald sind wir an unsere Grenzen gekommen, denn die Debian Packages sind nie so aktuell wie von Ubuntu. Aktuelle NodeJS version? Aktuelle NPM version? Alles nur über Umwege / source apt listen zu erhalten. Also besser direkt mit Ubuntu starten.

Ubuntu 20.04 Server Aufsetzen

Wir sind Fans von den günstigen Hetzner Cloud Servern. Hier kostet ein 2GB Ram, 20 GB SSD und 1 CPU server 2,89€ pro Monat. Im Vergleich zu Digital Ocean oder Vulture sind die Preise sehr niedrig. Aber Hetzner Cloud Server stehen nur deutschen Kunden zu verfügung.

Server Standort Nürnberg, OS Image Ubuntu 20.04 (wichtig wegen up to date packages) ausgewählt und server erstellt.

Hetzner cloud server erstellen

Dann per SHH einloggen

ssh -l root 135.181.96.211

Wenn alles geklappt hat, erhaltet ihr eine Welcome to Ubuntu 20.04.1 Meldung.

Pakete Installieren

Welche Pakete benötigen wir für ReactJS? Das war auch unsere erste Frage, leider haben wir keine Antwort gefunden. Deshalb ist hier unsere:

  • Nginx (Web server der port http(s) Anfragen an den React Server weiterleitet)
  • NodeJS (dependency für NPM)
  • NPM (Node Package Manager mit dem wir React installieren)
  • ProFTPD (FTP Server)
  • Git (damit wir Dateien von Github ziehen können)
  • MariaDB (optional, aber wir wollen später unser headless CMS unter MariaDB laufen lassen)
  • Image Processing packages (optional, aber wir wollen später komprimierte Bilder ausgeben)

Bevor wir anfangen erstmal alles updaten:

apt update
apt upgrade

Nginx Webserver

Zu erst installieren wir den nginx webserver. Dieser kümmert sich später darum, dass unsere Webanwendung über http / https erreichbar ist. Nginx ist sozusagen unser reverse proxy.

apt install nginx

Wir sind kein Fan von der standard nginx config (ist jedem selber überlassen), aber wir werden die config mit dem nginx boilerplate von A5hleyRich überspielen. Dazu benötigen wir git also:

apt install git

Damit ist git installiert und wir können das nginx boilerplate herunterladen. Vorher noch ein Backup der conf machen:

mv /etc/nginx /etc/nginx.backup
git clone https://github.com/A5hleyRich/wordpress-nginx.git /etc/nginx

Struktur ist einfach. Unter sites gibt es pro domain einen Ordner mit Unterordnern für cache, logs und public. So sieht es bei uns aus:

  • sites
    • subdomain.example.com
      • logs
      • cache
      • public
    • subdomain2.example.com
      • logs
      • cache
      • public

Ihr müsst diese Ordner natürlich erstellen. Dann können wir in /etc/nginx/sites-available/ unsere subdomain für ReactJS anlegen:

cd /etc/nginx/sites-available/
nano subdomain.example.com

Kopiert folgende Daten in die subdomain config:

server {
      # Ports to listen on, uncomment one.
      listen 80;

      # Server name to listen for
      server_name subdomain.example.com;

      # Path to document root
      root /sites/subdomain.example.com/public;

      # File to be used as index
      index index.html;

      # Overrides logs defined in nginx.conf, allows per site logs.
      access_log /sites/subdomain.example.com/logs/access.log;
      error_log /sites/subdomain.example.com/logs/error.log;

      location / {
        # reverse proxy for next server
        proxy_pass http://localhost:3000;
      }
}

Später mehr zum proxy pass bzw warum port 3000. Eure Subdomain muss natürlich auch zu euren Server zeigen. Nun noch die Seite aktivieren, config testen und nginx starten

ln -s /etc/nginx/sites-available/subdomain.example.com.conf /etc/nginx/sites-enabled/
nginx -t
service nginx restart

Ruft nun eure subdomain auf und ihr solltet ein welcome to nginx sehen.

NPM & NodeJs

Als nächsten Schritt werden wir NPM und NodeJS installieren.

apt install npm

Wenn man npm installiert wird NodeJS direkt mitinstalliert. Führt danach noch ein folgende Befehle aus um zu sehen welche Version ihr installiert habt.

npm -v
nodejs -v

ProFTPD & MariaDB

Nun noch proFTPd und MariaDB installieren. proFTPd ist unser FTP Server und mariadb benutzen wir später für unser headless CMS System.

apt install proftpd
apt install mariadb-server
ProFTPd config ändern (required shell off und jail users aktivieren). Dann noch einen Nutzer erstellen
nano /etc/proftpd/proftpd.conf

# Auskommentieren
DefaultRoot ~
RequireValidShell off

adduser FTP_USER_NAME –ingroup www-data -shell /bin/false -home /sites/subdomain.example.com/public

service proftpd restart

Maria DB einrichten

mysql_secure_installation

React Starter

Facebook bietet mit Create React App eine vorkonfigurierte Umgebung an, die mit allem, was ihr zum Erstellen einer React-App benötigt, ausgestattet ist. Sie erstellt einen Live-Entwicklungsserver, verwendet Webpack, um React, JSX und ES6 automatisch zu kompilieren. CSS-Dateien automatisch zu präfixieren und verwendet ESLint, um Fehler im Code zu testen und vor Fehlern zu warnen.

Der Sever läuft auf port 3000. Deswegen haben wir auch im nginx das port forwarding so eingestellt.

cd /sites/subdomain.example.com/public
npx create-react-app react-tutorial
mv react-tutorial/* .
npm start

Euer erster React Server läuft. Im nächsten Tutorial zeigen wir euch nextJS und erklären warum ihr dieses benutzen sollt.

React starter welcome
Dieser Eintrag wurde veröffentlicht am General. Setzte ein Lesezeichen permalink.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.