{"id":6028,"date":"2020-09-22T08:24:28","date_gmt":"2020-09-22T06:24:28","guid":{"rendered":"https:\/\/www.welaunch.io\/de\/?p=6028"},"modified":"2020-09-22T11:24:21","modified_gmt":"2020-09-22T09:24:21","slug":"react-js-server-setup","status":"publish","type":"post","link":"https:\/\/www.welaunch.io\/de\/2020\/09\/react-js-server-setup\/","title":{"rendered":"Wir lernen React JS &#8211; Server Setup (Part 1)"},"content":{"rendered":"<p>React &#8211; das wohl derzeit gefragteste Thema wenn es um moderne Webtechnologie geht. React ist eine Javascript Bibliothek, die von Facebook entwickelt worden ist. Im gro\u00dfen und ganzen geht bei React um Performance und die Wartung gro\u00dfer JS Webanwendungen. Anstatt alles in den regul\u00e4ren DOM zu schreiben, benutzt React ein sogenanntes virtuelles DOM.<\/p>\n<p>In dieser tutorial Serie m\u00f6chten wir euch ReactJS n\u00e4her bringen. Ziel unseres Tutorials ist es eine Web Anwendung zu entwicklen mit folgenden Features:<\/p>\n<ol>\n<li>moderne ReactJS Web Applikation<\/li>\n<li>basierend auf einem headless CMS System<\/li>\n<li>Bootstrap CSS<\/li>\n<li>Kein jQuery<\/li>\n<\/ol>\n<p>Wir sind absolute Neulinge auf dem Thema. Trotzdem versuchen wir euch das beizubringen, was wir beim Lernen von React gelernt haben. So k\u00f6nnt ihr hoffentlich die selben Fehler vermeiden die wir gemacht haben. Und wo wir schon bei Fehlern sind, hier ist schon der Erste.<\/p>\n<div class=\"message-box relative dark\" style=\"padding-top:15px;padding-bottom:15px;\"><div class=\"message-box-bg-image bg-fill fill\" ><\/div><div class=\"message-box-bg-overlay bg-fill fill\" style=\"background-color:rgb(49, 113, 238);\"><\/div><div class=\"container relative\"><div class=\"inner last-reset\">\n<div class=\"row align-middle align-center\"  id=\"row-963301486\">\n\n\t<div id=\"col-1897339047\" class=\"col small-12 large-12\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<p>Lesson 1: Kein Debian Server &#8211; immer Ubuntu.<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n<\/div><\/div><\/div>\n\t<div id=\"gap-384034712\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-384034712 {\n  padding-top: 30px;\n}\n<\/style>\n\t<\/div>\n\t\n<p>Kurzer Background: wir haben uns nat\u00fcrlich schon vorher mit ReactJS besch\u00e4ftigt. 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 \u00fcber Umwege \/ source apt listen zu erhalten. Also besser direkt mit Ubuntu starten.<\/p>\n<h2>Ubuntu 20.04 Server Aufsetzen<\/h2>\n<p>Wir sind Fans von den g\u00fcnstigen Hetzner Cloud Servern. Hier kostet ein 2GB Ram, 20 GB SSD und 1 CPU server 2,89\u20ac pro Monat. Im Vergleich zu Digital Ocean oder Vulture sind die Preise sehr niedrig. Aber Hetzner Cloud Server stehen nur deutschen Kunden zu verf\u00fcgung.<\/p>\n<p>Server Standort N\u00fcrnberg, OS Image Ubuntu 20.04 (wichtig wegen up to date packages) ausgew\u00e4hlt und server erstellt.<\/p>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_1869001757\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"609\" src=\"https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/Hetzner-cloud-server-erstellen-1024x611.png\" class=\"attachment-large size-large\" alt=\"Hetzner cloud server erstellen\" srcset=\"https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/Hetzner-cloud-server-erstellen-1024x611.png 1024w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/Hetzner-cloud-server-erstellen-300x179.png 300w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/Hetzner-cloud-server-erstellen-768x458.png 768w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/Hetzner-cloud-server-erstellen-500x298.png 500w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/Hetzner-cloud-server-erstellen-1000x597.png 1000w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/Hetzner-cloud-server-erstellen.png 1176w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style>\n#image_1869001757 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n<p>Dann per SHH einloggen<\/p>\n<pre class=\"p1\"><span class=\"s1\">ssh -l root 135.181.96.211\r\n<\/span><\/pre>\n<p>Wenn alles geklappt hat, erhaltet ihr eine Welcome to Ubuntu 20.04.1 Meldung.<\/p>\n<h2>Pakete Installieren<\/h2>\n<p>Welche Pakete ben\u00f6tigen wir f\u00fcr ReactJS? Das war auch unsere erste Frage, leider haben wir keine Antwort gefunden. Deshalb ist hier unsere:<\/p>\n<ul>\n<li>Nginx (Web server der port http(s) Anfragen an den React Server weiterleitet)<\/li>\n<li>NodeJS (dependency f\u00fcr NPM)<\/li>\n<li>NPM (Node Package Manager mit dem wir React installieren)<\/li>\n<li>ProFTPD (FTP Server)<\/li>\n<li>Git (damit wir Dateien von Github ziehen k\u00f6nnen)<\/li>\n<li>MariaDB (optional, aber wir wollen sp\u00e4ter unser headless CMS unter MariaDB laufen lassen)<\/li>\n<li>Image Processing packages (optional, aber wir wollen sp\u00e4ter komprimierte Bilder ausgeben)<\/li>\n<\/ul>\n<p>Bevor wir anfangen erstmal alles updaten:<\/p>\n<pre><span class=\"s1\">apt update\r\napt upgrade<\/span><\/pre>\n<h3>Nginx Webserver<\/h3>\n<p>Zu erst installieren wir den nginx webserver. Dieser k\u00fcmmert sich sp\u00e4ter darum, dass unsere Webanwendung \u00fcber http \/ https erreichbar ist. Nginx ist sozusagen unser reverse proxy.<\/p>\n<pre>apt install nginx<\/pre>\n<p>Wir sind kein Fan von der standard nginx config (ist jedem selber \u00fcberlassen), aber wir werden die config mit dem nginx boilerplate von A5hleyRich \u00fcberspielen. Dazu ben\u00f6tigen wir git also:<\/p>\n<pre>apt install git<\/pre>\n<p>Damit ist git installiert und wir k\u00f6nnen das nginx boilerplate herunterladen. Vorher noch ein Backup der conf machen:<\/p>\n<pre>mv \/etc\/nginx \/etc\/nginx.backup\r\ngit clone https:\/\/github.com\/A5hleyRich\/wordpress-nginx.git \/etc\/nginx<\/pre>\n<p>Struktur ist einfach. Unter sites gibt es pro domain einen Ordner mit Unterordnern f\u00fcr cache, logs und public. So sieht es bei uns aus:<\/p>\n<ul>\n<li>sites\n<ul>\n<li>subdomain.example.com\n<ul>\n<li>logs<\/li>\n<li>cache<\/li>\n<li>public<\/li>\n<\/ul>\n<\/li>\n<li>subdomain2.example.com\n<ul>\n<li>logs<\/li>\n<li>cache<\/li>\n<li>public<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Ihr m\u00fcsst diese Ordner nat\u00fcrlich erstellen. Dann k\u00f6nnen wir in \/etc\/nginx\/sites-available\/ unsere subdomain f\u00fcr ReactJS anlegen:<\/p>\n<pre>cd \/etc\/nginx\/sites-available\/\r\nnano subdomain.example.com<\/pre>\n<p>Kopiert folgende Daten in die subdomain config:<\/p>\n<pre>server {\r\n      # Ports to listen on, uncomment one.\r\n      listen 80;\r\n\r\n      # Server name to listen for\r\n      server_name subdomain.example.com;\r\n\r\n      # Path to document root\r\n      root \/sites\/subdomain.example.com\/public;\r\n\r\n      # File to be used as index\r\n      index index.html;\r\n\r\n      # Overrides logs defined in nginx.conf, allows per site logs.\r\n      access_log \/sites\/subdomain.example.com\/logs\/access.log;\r\n      error_log \/sites\/subdomain.example.com\/logs\/error.log;\r\n\r\n      location \/ {\r\n        # reverse proxy for next server\r\n        proxy_pass http:\/\/localhost:3000;\r\n      }\r\n}<\/pre>\n<p>Sp\u00e4ter mehr zum proxy pass bzw warum port 3000. Eure Subdomain muss nat\u00fcrlich auch zu euren Server zeigen. Nun noch die Seite aktivieren, config testen und nginx starten<\/p>\n<pre>ln -s \/etc\/nginx\/sites-available\/subdomain.example.com.conf \/etc\/nginx\/sites-enabled\/\r\nnginx -t\r\nservice nginx restart<\/pre>\n<p>Ruft nun eure subdomain auf und ihr solltet ein welcome to nginx sehen.<\/p>\n<h2>NPM &amp; NodeJs<\/h2>\n<p>Als n\u00e4chsten Schritt werden wir NPM und NodeJS installieren.<\/p>\n<pre>apt install npm<\/pre>\n<p>Wenn man npm installiert wird NodeJS direkt mitinstalliert. F\u00fchrt danach noch ein folgende Befehle aus um zu sehen welche Version ihr installiert habt.<\/p>\n<pre>npm -v\r\nnodejs -v<\/pre>\n<h2>ProFTPD &amp; MariaDB<\/h2>\n<p>Nun noch proFTPd und MariaDB installieren. proFTPd ist unser FTP Server und mariadb benutzen wir sp\u00e4ter f\u00fcr unser headless CMS System.<\/p>\n<pre>apt install proftpd\r\napt install mariadb-server<\/pre>\n<pre>ProFTPd config \u00e4ndern (required shell off und jail users aktivieren). Dann noch einen Nutzer erstellen<\/pre>\n<pre>nano \/etc\/proftpd\/proftpd.conf<\/pre>\n<p># Auskommentieren<br \/>\nDefaultRoot ~<br \/>\nRequireValidShell off<\/p>\n<p>adduser FTP_USER_NAME &#8211;ingroup www-data -shell \/bin\/false -home \/sites\/subdomain.example.com\/public<\/p>\n<p>service proftpd restart<\/p>\n<p>Maria DB einrichten<\/p>\n<pre>mysql_secure_installation<\/pre>\n<h2>React Starter<\/h2>\n<p>Facebook bietet mit Create React App eine vorkonfigurierte Umgebung an, die mit allem, was ihr zum Erstellen einer React-App ben\u00f6tigt, ausgestattet ist. Sie erstellt einen Live-Entwicklungsserver, verwendet Webpack, um React, JSX und ES6 automatisch zu kompilieren. CSS-Dateien automatisch zu pr\u00e4fixieren und verwendet ESLint, um Fehler im Code zu testen und vor Fehlern zu warnen.<\/p>\n<p>Der Sever l\u00e4uft auf port 3000. Deswegen haben wir auch im nginx das port forwarding so eingestellt.<\/p>\n<pre>cd \/sites\/subdomain.example.com\/public\r\nnpx create-react-app react-tutorial\r\nmv react-tutorial\/* .\r\nnpm start<\/pre>\n<p>Euer erster React Server l\u00e4uft. Im n\u00e4chsten Tutorial zeigen wir euch nextJS und erkl\u00e4ren warum ihr dieses benutzen sollt.<\/p>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_1550617810\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"394\" src=\"https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/React-starter-welcome.png\" class=\"attachment-large size-large\" alt=\"React starter welcome\" srcset=\"https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/React-starter-welcome.png 650w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/React-starter-welcome-300x182.png 300w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/React-starter-welcome-500x303.png 500w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style>\n#image_1550617810 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n","protected":false},"excerpt":{"rendered":"<p>React &#8211; das wohl derzeit gefragteste Thema wenn es um moderne Webtechnologie geht. React ist eine Javascript Bibliothek, die von Facebook entwickelt worden ist. Im gro\u00dfen und ganzen geht bei React um Performance und die Wartung gro\u00dfer JS Webanwendungen. Anstatt alles in den regul\u00e4ren DOM zu schreiben, benutzt React ein sogenanntes virtuelles DOM. In dieser&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6048,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general"],"_links":{"self":[{"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/posts\/6028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/comments?post=6028"}],"version-history":[{"count":10,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/posts\/6028\/revisions"}],"predecessor-version":[{"id":6049,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/posts\/6028\/revisions\/6049"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/media\/6048"}],"wp:attachment":[{"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/media?parent=6028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/categories?post=6028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/tags?post=6028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}