One place for hosting & domains

      Erstellen eines selbstsignierten SSL-Zertifikats für Apache unter Ubuntu 20.04


      Einführung

      TLS oder „Transport Layer Security“ – und sein Vorgänger SSL – sind Protokolle, mit denen normaler Datenverkehr in einer geschützten, verschlüsselten Hülle eingeschlossen wird. Mithilfe dieser Technologie können Server sicher Informationen an ihre Clients senden, ohne dass ihre Nachrichten von einer externen Partei abgefangen oder gelesen werden.

      In diesem Leitfaden zeigen wir Ihnen, wie Sie ein selbstsigniertes SSL-Zertifikat mit dem Apache-Webserver unter Ubuntu 20.04 erstellen und verwenden können.

      Hinweis: Ein selbstsigniertes Zertifikat verschlüsselt die Kommunikation zwischen Ihrem Server und jedem Client. Da es jedoch nicht von einer der vertrauenswürdigen Zertifizierungsstellen signiert ist, die in Webbrowsern und Betriebssystemen enthalten sind, können Benutzer das Zertifikat nicht verwenden, um die Identität Ihres Servers automatisch zu überprüfen. Dadurch sehen Ihre Benutzer beim Besuch Ihrer Website einen Sicherheitsfehler.

      Aufgrund dieser Einschränkung sind selbstsignierte Zertifikate nicht für eine Produktionsumgebung geeignet, die der Öffentlichkeit dient. Sie werden normalerweise zum Testen oder zum Sichern nicht kritischer Dienste verwendet, die von einem einzelnen Benutzer oder einer kleinen Gruppe von Benutzern verwendet werden und über alternative Kommunikationskanäle Vertrauen in die Gültigkeit des Zertifikats herstellen können.

      Eine produktionsfähigere Zertifikatlösung finden Sie unter Let’s Encrypt, einer kostenlosen Zertifizierungsstelle. Informationen zum Herunterladen und Konfigurieren eines Let’s Encrypt-Zertifikats finden Sie in unserem Tutorial Sichern von Apache mit Let’s Encrypt unter Ubuntu 20.04.

      Voraussetzungen

      Bevor Sie mit diesem Tutorial beginnen, benötigen Sie Folgendes:

      • Zugriff auf einen Ubuntu 20.04-Server mit einem sudofähigen Nicht- root-Benutzer. In unserem Leitfaden zur Ersteinrichtung des Servers mit Ubuntu 20.04 erfahren Sie, wie Sie dieses Konto erstellen.
      • Außerdem müssen Sie Apache installiert haben. Sie können Apache mit apt installieren. Aktualisieren Sie zunächst den lokalen Paketindex, um die neuesten Upstream-Änderungen widerzuspiegeln:

      Installieren Sie dann das Paket apache2:

      Wenn Sie eine ufw-Firewall eingerichtet haben, öffnen Sie die Ports http und https:

      • sudo ufw allow "Apache Full"

      Stellen Sie nach Fertigstellung dieser Schritte sicher, dass Sie als Nicht-root-Benutzer angemeldet sind und fahren Sie mit dem Tutorial fort.

      Schritt 1 — Aktivieren von mod_ssl

      Bevor wir jegliche SSL-Zertifikate verwenden können, müssen wir zunächst mod_ssl, ein Apache-Modul zur Unterstützung von SSL-Verschlüsselung, aktivieren.

      Aktivieren Sie mod_ssl mit dem Befehl a2enmod:

      Starten Sie Apache neu, um das Modul zu aktivieren:

      • sudo systemctl restart apache2

      Das Modul mod_ssl ist jetzt aktiviert und einsatzbereit.

      Schritt 2 – Erstellen des SSL-Zertifikats

      Nachdem Apache zur Verschlüsselung bereit ist, können wir nun mit der Erstellung eines neuen SSL-Zertifikats fortfahren. Das Zertifikat speichert einige grundlegende Informationen zu Ihrer Website und wird von einer Schlüsseldatei begleitet, mit der der Server verschlüsselte Daten sicher verarbeiten kann.

      Wir können den SSL-Schlüssel und die Zertifikatdateien mit dem Befehl openssl erstellen:

      • sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/ssl/private/apache-selfsigned.key -out /etc/ssl/certs/apache-selfsigned.crt

      Nachdem Sie den Befehl eingegeben haben, werden Sie zu einer Eingabeaufforderung weitergeleitet, in der Sie Informationen zu Ihrer Website eingeben können. Bevor wir dazu kommen, werfen wir einen Blick darauf, was in dem von uns ausgegebenen Befehl geschieht:

      • openssl: Dies ist das Befehlszeilentool zum Erstellen und Verwalten von OpenSSL-Zertifikaten, Schlüsseln und anderen Dateien.
      • req -x509: Dies gibt an, dass wir die CSR-Verwaltung (X.509 Certificate Signing Request) verwenden möchten. X.509 ist ein Infrastrukturstandard für öffentliche Schlüssel, den SSL und TLS für die Schlüssel- und Zertifikatverwaltung einhalten.
      • -nodes: Dies weist OpenSSL an, die Option zum Sichern unseres Zertifikats mit einer Passphrase zu überspringen. Wir wollen, dass Apache die Datei beim Starten des Servers ohne Benutzer-Eingriff lesen kann. Eine Passphrase würde dies verhindern, da wir sie nach jedem Neustart eingeben müssten.
      • -days 365: Diese Option legt fest, wie lange das Zertifikat als gültig angesehen wird. Wir haben sie hier auf ein Jahr festgesetzt. Viele moderne Browser lehnen Zertifikate ab, die länger als ein Jahr gültig sind.
      • -newkey rsa:2048: Dies gibt an, dass wir gleichzeitig ein neues Zertifikat und einen neuen Schlüssel generieren möchten. Wir haben in einem vorherigen Schritt nicht den Schlüssel erstellt, der zum Signieren des Zertifikats erforderlich ist. Daher müssen wir ihn zusammen mit dem Zertifikat erstellen. Der Teil rsa:2048 weist ihn an, einen RSA-Schlüssel mit einer Länge von 2048 Bit zu erstellen.
      • -keyout: Diese Zeile teilt OpenSSL mit, wo die generierte private Schlüsseldatei, die wir erstellen, abgelegt werden soll.
      • -out: Dadurch wird OpenSSL mitgeteilt, wo das von uns erstellte Zertifikat abgelegt werden soll.

      Füllen Sie die Eingabeaufforderungen angemessen aus. Die wichtigste Zeile ist die, die den allgemeinen Namen anfragt. Sie müssen entweder den Hostnamen eingeben, über den Sie auf den Server zugreifen, oder die öffentliche IP-Adresse des Servers. Es ist wichtig, dass dieses Feld mit dem übereinstimmt, was Sie in die Adressleiste Ihres Browsers einfügen, um auf die Website zuzugreifen, da eine Nichtübereinstimmung mehr Sicherheitsfehler verursacht.

      Die vollständige Liste der Eingabeaufforderungen sieht ungefähr so aus:

      Country Name (2 letter code) [XX]:US
      State or Province Name (full name) []:Example
      Locality Name (eg, city) [Default City]:Example 
      Organization Name (eg, company) [Default Company Ltd]:Example Inc
      Organizational Unit Name (eg, section) []:Example Dept
      Common Name (eg, your name or your server's hostname) []:your_domain_or_ip
      Email Address []:[email protected]
      

      Beide von Ihnen erstellten Dateien werden in den entsprechenden Unterverzeichnissen unter /etc/ssl abgelegt.

      Als Nächstes aktualisieren wir unsere Apache-Konfiguration, um das neue Zertifikat und den neuen Schlüssel zu verwenden.

      Schritt 3 – Konfigurieren von Apache zur Verwendung von SSL

      Nachdem wir unser selbstsigniertes Zertifikat und unseren Schlüssel zur Verfügung haben, müssen wir unsere Apache-Konfiguration aktualisieren, um sie verwenden zu können. Unter Ubuntu können Sie neue Apache-Konfigurationsdateien (sie müssen mit .conf enden) in /etc/apache2/sites-available/ ablegen. Diese werden beim nächsten Neuladen oder Neustart des Apache-Prozesses geladen.

      Für dieses Tutorial erstellen wir eine neue minimale Konfigurationsdatei. (Wenn Sie bereits einen Apache <Virtualhost> eingerichtet haben und nur SSL hinzufügen müssen, müssen Sie wahrscheinlich die Konfigurationszeilen kopieren, die mit SSL beginnen, und den VirtualHost-Port von 80 auf 443 umschalten. Wir werden uns um Port 80 im nächsten Schritt kümmern.)

      Öffnen Sie eine neue Datei im Verzeichnis /etc/apache2/sites-available:

      • sudo nano /etc/apache2/sites-available/your_domain_or_ip.conf

      Fügen Sie die folgende minimale VirtualHost-Konfiguration ein:

      /etc/apache2/sites-available/your_domain_or_ip.conf

      <VirtualHost *:443>
         ServerName your_domain_or_ip
         DocumentRoot /var/www/your_domain_or_ip
      
         SSLEngine on
         SSLCertificateFile /etc/ssl/certs/apache-selfsigned.crt
         SSLCertificateKeyFile /etc/ssl/private/apache-selfsigned.key
      </VirtualHost>
      
      

      Stellen Sie sicher, dass Sie die Zeile ServerName so aktualisieren, wie Sie Ihren Server ansprechen möchten. Dies kann ein Hostname, ein vollständiger Domänenname oder eine IP-Adresse sein. Stellen Sie sicher, dass alles, was Sie auswählen, mit dem allgemeinen Namen übereinstimmt, den Sie bei der Erstellung des Zertifikats ausgewählt haben.

      In den verbleibenden Zeilen wird ein DocumentRoot-Verzeichnis angegeben, aus dem Dateien bereitgestellt werden sollen, sowie die SSL-Optionen, die erforderlich sind, um Apache auf unser neu erstelltes Zertifikat und unseren neu erstellten Schlüssel zu verweisen.

      Jetzt erstellen wir unseren DocumentRoot und fügen eine HTML-Datei nur zu Testzwecken ein:

      • sudo mkdir /var/www/your_domain_or_ip

      Öffnen Sie eine neue index.html-Datei mit Ihrem Texteditor:

      • sudo nano /var/www/your_domain_or_ip/index.html

      Fügen Sie Folgendes in die leere Datei ein:

      /var/www/your_domain_or_ip/index.html

      <h1>it worked!</h1>
      

      Dies ist natürlich keine vollständige HTML-Datei, aber die Browser sind nachsichtig und es wird ausreichen, um unsere Konfiguration zu überprüfen.

      Speichern und schließen Sie die Datei. Als Nächstes müssen wir die Konfigurationsdatei mit dem Tool a2ensite aktivieren:

      • sudo a2ensite your_domain_or_ip.conf

      Als Nächstes testen wir auf Konfigurationsfehler:

      • sudo apache2ctl configtest

      Wenn alles erfolgreich ist, erhalten Sie ein Ergebnis, das so aussieht:

      Output

      AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1. Set the 'ServerName' directive globally to suppress this message Syntax OK

      Die erste Zeile enthält eine Meldung, dass die ServerName-Direktive nicht global festgelegt ist. Wenn Sie diese Meldung entfernen möchten, können Sie den ServerName auf den Domänennamen oder die IP-Adresse Ihres Servers in /etc/apache2/apache2.conf festlegen. Dies ist optional, da die Meldung keinen Schaden anrichtet.

      Wenn Ihre Ausgabe Syntax OK enthält, enthält Ihre Konfigurationsdatei keine Syntaxfehler. Wir können Apache sicher neu laden, um unsere Änderungen zu implementieren:

      • sudo systemctl reload apache2

      Laden Sie Ihre Website nun in einem Browser und verwenden Sie https:// am Anfang.

      Sie sollten einen Fehler sehen. Dies ist normal für ein selbstsigniertes Zertifikat! Der Browser warnt Sie, dass er die Identität des Servers nicht überprüfen kann, da unser Zertifikat von keiner seiner bekannten Zertifizierungsstellen signiert ist. Zu Testzwecken und für den persönlichen Gebrauch kann dies in Ordnung sein. Sie sollten in der Lage sein, sich durch erweitert oder weitere Informationen zu klicken und fortzufahren.

      Danach lädt Ihr Browser die Meldung it worked! („es hat funktioniert!“ ).

      Hinweis:  Wenn Ihr Browser überhaupt keine Verbindung zum Server herstellt, stellen Sie sicher, dass Ihre Verbindung nicht durch eine Firewall blockiert wird. Wenn Sie ufw verwenden, öffnen die folgenden Befehle die Ports 80 und 443:

      • sudo ufw allow "Apache Full"

      Als Nächstes fügen wir unserer Konfiguration einen weiteren VirtualHost-Abschnitt hinzu, um einfache HTTP-Anforderungen zu bearbeiten und an HTTPS umzuleiten.

      Schritt 4 – Umleiten von HTTP zu HTTPS

      Derzeit reagiert unsere Konfiguration nur auf HTTPS-Anforderungen an Port 443. Es wird empfohlen, auch auf Port 80 zu antworten, selbst wenn Sie die Verschlüsselung des gesamten Datenverkehrs erzwingen möchten. Richten Sie einen VirtualHost ein, um auf diese unverschlüsselten Anforderungen zu antworten und sie an HTTPS umzuleiten.

      Öffnen Sie dieselbe Apache-Konfigurationsdatei, die wir in den vorherigen Schritten gestartet haben:

      • sudo nano /etc/apache2/sites-available/your_domain_or_ip.conf

      Erstellen Sie unten einen weiteren VirtualHost-Block, der den Anforderungen an Port 80 entspricht. Verwenden Sie die Direktive ServerName, um Ihren Domänennamen oder Ihre IP-Adresse erneut abzugleichen. Verwenden Sie dann Redirect, um alle Anforderungen abzugleichen und an den SSL VirtualHost zu senden. Stellen Sie sicher, dass der nachfolgende Schrägstrich eingefügt wird:

      /etc/apache2/sites-available/your_domain_or_ip.conf

      <VirtualHost *:80>
          ServerName your_domain_or_ip
          Redirect / https://your_domain_or_ip/
      </VirtualHost>
      

      Speichern und schließen Sie diese Datei, wenn Sie fertig sind, und testen Sie dann Ihre Konfigurationssyntax erneut und laden Sie Apache neu:

      • sudo apachectl configtest
      • sudo systemctl reload apache2

      Sie können die neue Weiterleitungsfunktion testen, indem Sie Ihre Website mit einem einfachen http:// vor der Adresse besuchen. Sie sollten automatisch zu https:// umgeleitet werden.

      Zusammenfassung

      Sie haben Apache jetzt so konfiguriert, dass verschlüsselte Anforderungen mithilfe eines selbstsignierten SSL-Zertifikats bereitgestellt und unverschlüsselte HTTP-Anforderungen an HTTPS umgeleitet werden.

      Wenn Sie SSL für eine öffentliche Website verwenden möchten, sollten Sie einen Domänennamen erwerben und eine weit verbreitete Zertifizierungsstelle wie Let’s Encrypt verwenden.

      Weitere Informationen zur Verwendung von Let’s Encrypt mit Apache finden Sie in unserem Tutorial Sichern von Apache mit Let’s Encrypt unter Ubuntu 20.04.



      Source link

      Einrichten einer Node.js-Anwendung für die Produktion unter Ubuntu 20.04


      Einführung

      Node.js ist eine Open-Source-basierte JavaScript-Laufzeitumgebung für das Einrichten von Server- und Netzwerkanwendungen. Die Plattform läuft unter Linux, MacOS, FreeBSD und Windows. Sie können Node.js-Anwendungen zwar in der Befehlszeile ausführen können, doch werden Sie sie in diesem Tutorial als Dienst ausführen. Das bedeutet, dass sie bei erneutem Booten oder einem Absturz neu gestartet werden und zur Verwendung in einer Produktionsumgebung sicher sind.

      In diesem Tutorial werden Sie eine produktionsfähige Node.js-Umgebung auf einem einzelnen Ubuntu 20.04-Server einrichten. Dieser Server wird eine von PM2 verwaltete Node.js-Anwendung ausführen und Benutzern sicheren Zugriff auf die Anwendung über einen Nginx-Reverseproxy bereitstellen. Der Nginx-Server bietet HTTPS mit einem kostenlosen Zertifikat, das von Let’s Encrypt bereitgestellt wird.

      Voraussetzungen

      Dieser Leitfaden geht davon aus, dass Sie Folgendes haben:

      Wenn Sie die Voraussetzungen abgeschlossen haben, verfügen Sie über einen Server, der die Standardplatzhalterseite Ihrer Domäne unter https://example.com/ bereitstellt.

      Schritt 1 — Installieren von Node.js

      Beginnen wir zunächst mit der Installation der neuesten LTS-Version von Node.js unter Verwendung der NodeSource-Paketarchive.

      Installieren Sie zunächst das NodeSource-PPA, um Zugriff auf dessen Inhalt zu erhalten. Stellen Sie sicher, dass Sie sich in Ihrem Stammverzeichnis befinden, und verwenden Sie curl, um das Installationskript für die aktuellste LTS-Version von Node.js aus den Archiven abzurufen.

      • cd ~
      • curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh

      Sie können den Inhalt dieses Skripts mit nano oder Ihrem bevorzugten Texteditor prüfen:

      Wenn Sie das Skript fertig geprüft haben, führen Sie es unter sudo aus:

      • sudo bash nodesource_setup.sh

      Das PPA wird Ihrer Konfiguration hinzugefügt und Ihr lokaler Paket-Cache automatisch aktualisiert. Nach Ausführung des Einrichtungsskripts aus Nodesource können Sie nun das Node.js-Paket installieren:

      Um zu prüfen, welche Version von Node.js Sie nach diesen ersten Schritten installiert haben, geben Sie Folgendes ein:

      Output

      v14.4.0

      Anmerkung: Bei der Installation aus dem NodeSource-PPA wird die ausführbare Node.js-Datei nodejs und nicht node genannt.

      Das nodejs-Paket enthält das binäre nodejs sowie npm, einen Paketmanager für Node-Module. Sie müssen npm also nicht separat installieren.

      npm verwendet eine Konfigurationsdatei in Ihrem Home Verzeichnis, um Aktualisierungen zu verfolgen. Sie wird erstellt, wenn Sie npm das erste Mal ausführen. Führen Sie diesen Befehl aus, um zu verifizieren, dass npm installiert ist, und um die Konfigurationsdatei zu erstellen:

      Output

      6.14.5

      Damit bestimmte npm Pakete funktionieren (z. B. jene, deren Code aus Source erstellt werden muss), müssen Sie das build-essential Paket installieren:

      • sudo apt install build-essential

      Jetzt haben Sie die notwendigen Tools, um mit npm Paketen zu arbeiten, deren Code aus Source erstellt werden muss.

      Mit installierter Node.js-Laufzeitumgebung können wir jetzt mit dem Schreiben einer Node.js-Anwendung fortfahren.

      Schritt 2 — Erstellen einer Node.js-Anwendung

      Lassen Sie uns eine Hello World-Anwendung schreiben, die in beliebigen HTTP-Anfragen „Hello World“ zurückgibt. Diese Beispielanwendung hilft Ihnen dabei, Node.js einzurichten. Sie können sie durch eine eigene Anwendung ersetzen – stellen Sie sicher, dass Sie Ihre Anwendung so ändern, dass an den richtigen IP-Adressen und Ports gelauscht wird.

      Erstellen wir zunächst eine Beispielanwendung namens hello.js:

      Fügen Sie in der Datei den folgenden Code hinzu:

      ~/hello.js

      const http = require('http');
      
      const hostname="localhost";
      const port = 3000;
      
      const server = http.createServer((req, res) => {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end('Hello World!n');
      });
      
      server.listen(port, hostname, () => {
        console.log(`Server running at http://${hostname}:${port}/`);
      });
      

      Speichern Sie die Datei und beenden Sie den Editor.

      Diese Node.js-Anwendung lauscht an der angegebenen Adresse (localhost) und Port (3000) und gibt “Hello World!” mit dem HTTP-Erfolgscode 200 zurück. Da wir an localhost lauschen, können sich Remoteclients nicht mit unserer Anwendung verbinden.

      Geben Sie zum Testen Ihrer Anwendung Folgendes ein:

      Sie erhalten die folgende Ausgabe:

      Output

      Server running at http://localhost:3000/

      Anmerkung: Durch Ausführung einer Node.js-Anwendung auf diese Weise werden weitere Befehle blockiert, bis der Abbruch der Anwendung durch Drücken von Strg+C erzwungen wird.

      Öffnen Sie zum Testen der Anwendung auf Ihrem Server eine weitere Terminalsitzung und stellen Sie unter Verwendung von curl mit localhost eine Verbindung her:

      • curl http://localhost:3000

      Wenn Sie die folgende Ausgabe erhalten, funktioniert die Anwendung ordnungsgemäß und lauscht an der richtigen Adresse und am richtigen Port:

      Output

      Hello World!

      Wenn Sie nicht die erwartete Ausgabe erhalten, stellen Sie sicher, dass Ihre Node.js-Anwendung ausgeführt wird und so konfiguriert ist, dass sie an der richtigen Adresse und am richtigen Port lauscht.

      Sobald Sie sicher sind, dass es funktioniert, erzwingen Sie den Abbruch der Anwendung (wenn Sie es nicht bereits getan haben), indem Sie Strg+C drücken.

      Schritt 3 – Installieren von PM2

      Als Nächstes installieren wir PM2, einen Prozessmanager für Node.js-Anwendungen. PM2 ermöglicht es, Anwendungen zu daemonisieren, damit sie im Hintergrund als Dienst ausgeführt werden.

      Verwenden Sie npm zum Installieren der neuesten Version von PM2 auf Ihrem Server:

      • sudo npm install pm2@latest -g

      Die Option -g weist npm an, das Modul global zu installieren, damit es systemweit verfügbar ist.

      Verwenden wir zunächst den Befehl pm2 start zum Ausführen Ihrer Anwendung hello.js im Hintergrund:

      Dadurch wird Ihre Anwendung auch der Prozessliste von PM2 hinzugefügt, die bei jeder Ausführung einer Anwendung ausgegeben wird:

      Output

      ... [PM2] Spawning PM2 daemon with pm2_home=/home/sammy/.pm2 [PM2] PM2 Successfully daemonized [PM2] Starting /home/sammy/hello.js in fork_mode (1 instance) [PM2] Done. ┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐ │ id │ name │ mode │ ↺ │ status │ cpu │ memory │ ├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤ │ 0 │ hello │ fork │ 0 │ online │ 0% │ 25.2mb │ └────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘

      Wie oben angegeben, weist PM2 automatisch einen App-Namen (basierend auf dem Dateinamen ohne die Erweiterung .js) und eine PM2-ID zu. Außerdem pflegt PM2 weitere Informationen, wie z. B. die PID des Prozesses, den aktuellen Status und die Speicherauslastung.

      Anwendungen, die unter PM2 ausgeführt werden, werden automatisch neu gestartet, wenn eine Anwendung abstürzt oder ihr Abbruch erzwungen wird. Wir können jedoch mit dem Unterbefehl startup einen zusätzlichen Schritt hinzufügen, damit die Anwendung beim Systemstart gestartet wird. Dieser Unterbefehl generiert und konfiguriert ein Startskript zum Starten von PM2 und den verwalteten Prozessen beim Booten von Servern:

      Die letzte Zeile der resultierenden Ausgabe enthält einen Befehl zum Ausführen mit Superuser-Berechtigungen, damit PM2 beim Booten gestartet wird:

      Output

      [PM2] Init System found: systemd sammy [PM2] To setup the Startup Script, copy/paste the following command: sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u sammy --hp /home/sammy

      Führen Sie den Befehl aus der Ausgabe aus, wobei Sie anstelle von sammy Ihren Benutzernamen verwenden:

      • sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u sammy --hp /home/sammy

      Als weiteren Schritt können wir die PM2-Prozessliste und entsprechende Umgebungen speichern:

      Sie haben nun eine systemd-Einheit erstellt, die beim Booten pm2 für Ihren Benutzer ausführt. Diese pm2-Instanz gibt wiederum hello.js zurück.

      Starten Sie den Dienst mit systemctl:

      • sudo systemctl start pm2-sammy

      Wenn an diesem Punkt ein Fehler auftritt, müssen Sie möglicherweise neu starten, was Sie mit sudo reboot erreichen können.

      Überprüfen Sie den Status der systemd-Einheit:

      • systemctl status pm2-sammy

      Für eine ausführliche Übersicht zu systemd lesen Sie bitte Systemd Essentials: Arbeiten mit Diensten, Einheiten und dem Journal.

      Neben den von uns abgedeckten Befehlen bietet PM2 viele Unterbefehle, mit denen Sie Daten über Ihre Anwendung verwalten oder suchen können.

      Stoppen Sie eine Anwendung mit diesem Befehl (geben Sie den App-Namen oder die ID von PM2 an):

      Starten Sie eine Anwendung neu:

      • pm2 restart app_name_or_id

      Listen Sie die aktuell von PM2 verwalteten Anwendungen auf:

      Erhalten Sie Informationen zu einer bestimmten Anwendung mithilfe des App-Namens:

      Der PM2-Prozessmonitor kann mit dem Unterbefehl monit aufgerufen werden. Dadurch werden der Anwendungsstatus sowie die CPU-und Speicherauslastung angezeigt:

      Beachten Sie, dass beim Ausführen von pm2 ohne Argumente auch eine Hilfeseite mit Beispielnutzung angezeigt wird.

      Nachdem Ihre Node.js-Anwendung ausgeführt und von PM2 verwaltet wird, können wir nun den Reverseproxy einrichten.

      Schritt 4 — Einrichten von Nginx als Reverseproxy-Server

      Ihre Anwendung wird ausgeführt und lauscht an localhost. Sie müssen jedoch einen Weg finden, damit Ihre Benutzer darauf zugreifen können. Dazu werden wir den Nginx-Webserver als Reverseproxy einrichten.

      Im Tutorial zu den Voraussetzungen richten Sie Ihre Nginx-Konfiguration in der Datei /etc/nginx/sites-available/example.com ein. Öffnen Sie diese Datei zur Bearbeitung:

      • sudo nano /etc/nginx/sites-available/example.com

      Innerhalb des server-Blocks sollten Sie einen vorhandenen location /-Block haben. Ersetzen Sie den Inhalt dieses Blocks durch die folgende Konfiguration. Wenn Ihre Anwendung so konfiguriert ist, dass sie an einem anderen Port lauscht, aktualisieren Sie den markierten Teil mit der richtigen Portnummer:

      /etc/nginx/sites-available/example.com

      server {
      ...
          location / {
              proxy_pass http://localhost:3000;
              proxy_http_version 1.1;
              proxy_set_header Upgrade $http_upgrade;
              proxy_set_header Connection 'upgrade';
              proxy_set_header Host $host;
              proxy_cache_bypass $http_upgrade;
          }
      ...
      }
      

      Dadurch wird der Server so konfiguriert, dass er auf Anfragen an sein Stammverzeichnis antwortet. Angenommen, unser Server ist unter example.com verfügbar. Durch Aufrufen von https://example.com/ über einen Webbrowser würde die Anfrage an hello.js gesendet werden, wobei an Port 3000 bei localhost gelauscht wird.

      Sie können dem gleichen Serverblock zusätzliche location-Blöcke hinzufügen, um Zugriff auf andere Anwendungen auf dem gleichen Server zu gewähren. Wenn Sie beispielsweise eine andere Node.js-Anwendung an Port 3001 ausführen würden, könnten Sie diesen location-Block hinzufügen, um Zugriff darauf über https://example.com/app2 zu gewähren:

      /etc/nginx/sites-available/example.com — Optional

      server {
      ...
          location /app2 {
              proxy_pass http://localhost:3001;
              proxy_http_version 1.1;
              proxy_set_header Upgrade $http_upgrade;
              proxy_set_header Connection 'upgrade';
              proxy_set_header Host $host;
              proxy_cache_bypass $http_upgrade;
          }
      ...
      }
      

      Sobald Sie die location-Blöcke für Ihre Anwendungen hinzugefügt haben, speichern Sie die Datei und verlassen Sie den Editor.

      Stellen Sie sicher, dass Sie keine Syntaxfehler gemacht haben, indem Sie Folgendes eingeben:

      Starten Sie Nginx neu:

      • sudo systemctl restart nginx

      Wenn Ihre Node.js-Anwendung ausgeführt wird und Ihre Anwendungs- und Nginx-Konfigurationen korrekt sind, sollten Sie nun über den Nginx-Reverseproxy auf Ihre Anwendung zugreifen können. Probieren Sie es aus, indem Sie die URL Ihres Servers (seine öffentliche IP-Adresse oder seinen Domänennamen) aufrufen.

      Zusammenfassung

      Herzlichen Glückwunsch! Ihre Node.js-Anwendung wird nun hinter einem Nginx-Reverseproxy auf einem Ubuntu 20.04-Server ausgeführt. Diese Reverseproxy-Einrichtung ist flexibel genug, um Ihren Benutzern Zugriff auf andere Anwendungen oder statische Webinhalte zu bieten, die Sie freigeben möchten.



      Source link

      Erstellen einer Anwendung für ein inspirierendes Zitat unter Verwendung von AdonisJs und MySQL


      Der Autor wählte den Tech Education Fund, um eine Spende im Rahmen des Programms Write for DOnations zu erhalten.

      Einführung

      AdonisJs ist ein in einfachem JavaScript geschriebenes Node.js Web-Framework, das auf allen gängigen Betriebssystemen läuft. Es verwendet das beliebte Designmuster MVC (Model – View – Controller) und bietet ein stabiles Ökosystem für das Schreiben serverseitiger Webanwendungen. Das Framework bietet nahtlose Authentifizierung, SQL ORM (objekt-relationales Mapping), Migrationen und Datenbank-Seeding. AdonisJs weist eine ähnliche Architektur wie das PHP Webanwendungs-Framework Laravel auf, einschließlich der gleichen Ordnerstruktur und mehrere gemeinsam genutzter Einrichtungskonzepte.

      Standardmäßig verwendet AdonisJs die Edge Template Engine, die für eine intuitive Verwendung konzipiert ist. Genau wie Laravel wird AdonisJs mit einem ORM namens Lucid bereitgestellt, das als Schnittstelle für die Kommunikation zwischen den Modellen einer Anwendung und der Datenbank dient. Mit AdonisJs können Entwickler eine Full-Stack-Anwendung erstellen, bei der der Backend-Server für die Anwendung der Geschäftslogik, das Routing und das Rendering aller Seiten der Anwendung verantwortlich ist. Es ist auch möglich, eine Webdienst-API zu erstellen, um JSON-Antworten von einem Controller zurückzugeben; diese Webdienste können dann über Frontend-Frameworks wie Vue.js, React und Angular konsumiert werden.

      In diesem Tutorial erstellen Sie eine Anwendung mit AdonisJs unter Verwendung seiner CLI. Sie erstellen Routen, Controller, Modelle und Ansichten innerhalb Ihrer Anwendung und führen Formularvalidierungen durch. Das Beispiel in diesem Tutorial wird eine Anwendung für ein inspirierendes Zitat sein, bei der sich ein Benutzer registrieren und anmelden kann, um ein inspirierendes Zitat zu erstellen. Diese Demo-Anwendung bietet Ihnen die Möglichkeit zur Ausführung von CRUD (Create, Read, Update und Delete)-Operationen.

      Voraussetzungen

      Bevor Sie mit diesem Leitfaden beginnen, benötigen Sie Folgendes:

      Anmerkung: Dieses Tutorial verwendet für die Entwicklung einen macOS-Rechner. Wenn Sie ein anderes Betriebssystem verwenden, müssen Sie in den ersten Schritten möglicherweise sudo für npm-Befehle verwenden.

      Schritt 1 – Installieren der Adonis CLI

      In diesem Abschnitt werden Sie Adonis CLI und alle erforderlichen Pakete auf Ihrem lokalen Rechner installieren. Die CLI ermöglicht es Ihnen, ein neues AdonisJs-Projekt aufzubauen, sowie Boilerplates für Controller, Middlewares und Modelle in Ihrer Anwendung zu erstellen und zu generieren. Außerdem erstellen Sie Ihre Datenbank für das Projekt.

      Führen Sie den folgenden Befehl aus, um die AdonisJs CLI global auf Ihrem Rechner über npm zu installieren:

      Geben Sie nach Abschluss der Installation den folgenden Befehl im Terminal ein, um die Installation von AdonisJs zu bestätigen und die aktuelle Version anzuzeigen:

      Sie sehen eine Ausgabe, die die aktuelle Version von AdonisJs zeigt:

      Output

      4.1.0

      Mit der erfolgreichen Installation der AdonisJs CLI haben Sie nun Zugriff auf den Befehl adonis und können ihn zum Erstellen neuer Installationen eines AdonisJs-Projekts, zur Verwaltung Ihres Projekts und zum Erzeugen relevanter Dateien wie die Controller, Modelle usw. verwenden.

      Nun können Sie mit der Erstellung eines neuen AdonisJs-Projekts fortfahren, indem Sie den Befehl adonis wie hier gezeigt verwenden:

      • adonis new adonis-quotes-app

      Der vorhergehende Befehl erstellt eine Anwendung namens adonis-quotes-app​​​ in einem neuen Verzeichnis mit demselben Namen in Ihrem lokalen Projektverzeichnis mit der entsprechenden AdonisJs MVC-Struktur.

      Verschieben Sie sie in den neuen Anwendungsordner:

      Starten Sie dann Ihre Anwendung durch Ausführen von:

      Dadurch wird der Entwicklungsserver auf dem Standardport 3333 gestartet, wie in der Root-Datei .env für Ihre Anwendung angegeben. Navigieren Sie zu http://localhost:3333, um die Begrüßungsseite von AdonisJs anzuzeigen.

      Begrüßungsseite von AdonisJs

      Jetzt schließen Sie die Einrichtung Ihrer Datenbank ab. Hier installieren Sie den Treiber mysql, um sich über npm von Ihrer Node.js-Anwendung mit Ihrem MySQL-Server zu verbinden. Gehen Sie zunächst wieder zu Ihrem Terminal zurück, auf dem die Anwendung derzeit läuft, beenden Sie den Prozess mit STRG+C und führen Sie den folgenden Befehl aus:

      Nachdem Sie nun den MySQL Node.js-Treiber für diese Anwendung erfolgreich installiert haben, müssen Sie die Anwendungsdatenbank erstellen und die entsprechende Verbindung zu ihr aufbauen.

      Die neueste Version von MySQL, die Sie aus dem vorbereitendem Tutorial installiert haben, verwendet ein standardmäßiges Authentifizierungs-Plugin namens caching_ha2_password. Dieses wird derzeit von den Node.js-Treibern für MySQL nicht unterstützt. Um Probleme mit der Datenbankverbindung in Ihrer Anwendung zu vermeiden, müssen Sie einen neuen MySQL-Benutzer anlegen und das derzeit unterstützte Authentifizierungs-Plugin mysql_native_password verwenden.

      Um zu beginnen, greifen Sie mit dem Account root auf den MySQL-Client zu:

      Sie werden aufgefordert, das während der MySQL-Installation eingerichtete Passwort für den Account root einzugeben.

      Erstellen Sie als Nächstes den Benutzer und das Passwort unter Verwendung des Plugins mysql_native_password:

      • CREATE USER 'sammy'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';

      Sie sehen den folgenden Output:

      Output

      Query OK, 0 rows affected (0.02 sec)

      Erstellen Sie nachfolgend eine Datenbank für die Anwendung mit:

      Sie sehen den folgenden Output:

      Output

      Query OK, 1 row affected (0.03 sec)

      Damit haben Sie die Datenbank für diese Anwendung erfolgreich erstellt.

      Aktivieren Sie jetzt den Zugriff auf die erstellte Datenbank für den neuen MySQL-Benutzer. Führen Sie den folgenden Befehl aus, um dem Benutzer alle Berechtigungen in der Datenbank zu erteilen:

      • GRANT ALL PRIVILEGES ON adonis.* TO 'sammy'@'localhost';

      Laden Sie die Berechtigungstabelle neu, indem Sie den folgenden Befehl ausführen, um die soeben vorgenommenen Änderungen zu übernehmen:

      Sie sehen den folgenden Output:

      Output

      Query OK, 0 rows affected (0.00 sec)

      Beenden Sie den MySQL-Client mit:

      Sie haben die AdonisJs CLI erfolgreich installiert, ein neues AdonisJs-Projekt erstellt und mysql über npm installiert.  Außerdem haben Sie die Datenbank für diese Anwendung erstellt und einen MySQL-Benutzer mit den entsprechenden Berechtigungen eingerichtet. Dies ist die Grundeinrichtung für Ihre Anwendung. Im nächsten Abschnitt beginnen Sie mit der Erstellung der erforderlichen Ansichten für Ihre Anwendung.

      Schritt 2 – Verwenden der Edge Templating Engine

      AdonisJs wird mit einer eigenen Template-Engine namens Edge bereitgestellt. Sie ermöglicht Ihnen die Erstellung einer wiederverwendbaren HTML-Vorlage und die Einführung von Front-End-Logik in Ihre Anwendung mit minimalem Code. Edge stellt JavaScript-Entwickler während der Entwicklung einer Anwendung die Werkzeuge zur Verfügung, um ein komponentenbasiertes Layout zu erstellen, Bedingungen zu schreiben, Iterationen zu verwenden und Anzeigeebenen zur Aufnahme der Logik zu erstellen. Alle Template-Dateien enden mit der Erweiterung .edge und werden im Verzeichnis resources/views gespeichert.

      Nachfolgend sind die Ansichten aufgeführt, die Ihre Anwendung für die ordnungsgemäße Funktionsweise benötigt:

      • Master Layout: Mit Edge können Sie eine Seite erstellen, die das CSS, gängige JavaScript-Dateien, jQuery und gängige Bestandteile der Benutzeroberfläche enthält, die in der gesamten Anwendung gleich bleiben, wie zum Beispiel die Navigationsleiste, das Logo, der Header usw. Sobald Sie die Seite Master Layout erstellt haben, übernehmen andere Ansichten (Seiten) in Ihrer Anwendung diese.
      • Index View: Diese Seite verwendet das Master Layout, um gängige Dateien zu erben und Inhalte für die Homepage der Anwendung darzustellen.
      • Login-Seite: Diese Seite verwendet ebenfalls das Master Layout und stellt das Formular mit den Eingabefeldern für Benutzername und Passwort für die Anmeldung der Benutzer dar.
      • Register-Seite: Hier sehen Benutzer ein Formular zur Registrierung und zur dauerhaften Speicherung der Informationen in der Datenbank.
      • Create Quote-Seite: Benutzer werden diese Seite zum Erstellen eines inspirierenden Zitats verwenden.
      • Edit Quote-Seite: Benutzer werden diese Seite zum Bearbeiten eines Zitats verwenden.
      • View Quote-Seite: Benutzer werden diese Seite zum Anzeigen eines bestimmten Zitats verwenden.

      Verwenden Sie zunächst den Befehl adonis, um die Seite Master Layout zu erstellen, indem Sie den folgenden Befehl ausführen:

      • adonis make:view layouts/master

      Sie werden eine Ausgabe ähnlich der folgenden sehen:

      Output

      ✔ create resources/views/layouts/master.edge

      Dieser Befehl erstellt automatisch eine Datei master.edge in Ihrem Ordner resources/views/layouts. Öffnen Sie die neue Datei:

      • nano resources/views/layouts/master.edge

      Fügen Sie den folgenden Code hinzu:

      /resources/views/layouts/master.edge

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>adonis-quotes-app</title>
          {{ style('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') }}
          {{ style('style') }}
          {{ script('https://code.jquery.com/jquery-3.3.1.slim.min.js') }}
      </head>
      <body>
          <div class="container-fliud">
              @include('navbar')
              @!section('content')
          </div>
          {{ script('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js') }}
      
      </body>
      </html>
      

      In dieser Datei schließen Sie die CDN-Dateien für Bootstrap CSS, Bootstrap JavaScript und jQuery ein. Sie fügen einen globalen CSS-Dateinamen style.css hinzu und schließen innerhalb der div eine Partiale-Datei namens navbar ein. Um Fragmente des HTML-Codes, die Sie auf mehreren Seiten Ihrer Anwendung benötigen, wie nav oder footer, wiederzuverwenden, können Sie Partiale einfügen. Dabei handelt es sich um kleinere Dateien, die den sich wiederholenden Code enthalten, sodass der Code für diese Elemente schneller an einer Stelle und nicht bei jedem Auftreten aktualisiert werden kann. Die navbar enthält Markierungen für die Schaltflächen Login und Register, ein Logo und einen Home-Link.

      Auf diese Weise können alle nachfolgenden für diese Anwendung erstellten Seiten das Master-Layout erweitern und die navbar rendern, ohne dass der Inhalt neu geschrieben werden muss. Sie erstellen diese Datei navbar später im Tutorial.

      Abschließend definieren Sie einen Abschnitt-Tag @! section(), um Inhalte anderer Seiten einzuschließen und sie vom Master-Layout rendern zu lassen. Damit dies wie erwartet funktioniert, müssen alle neuen Seiten, die das Master-Layout erweitern, auch einen Abschnitt-Tag mit demselben Namen (d. h. @section('content')) definieren.

      Speichern und schließen Sie die Datei, sobald Sie mit der Bearbeitung fertig sind.

      Als Nächstes verwenden Sie den Befehl adonis, um die Navigationsleiste zu erstellen:

      Sie sehen einen Output, der so ähnlich wie der nachfolgende aussieht:

      Output

      ✔ create resources/views/navbar.edge

      Öffnen Sie die neu erstellte Datei:

      • nano resources/views/navbar.edge

      Fügen Sie dann den folgenden Code hinzu:

      /resources/views/navbar.edge

      <nav class="navbar navbar-expand-lg navbar-dark text-white">
          <a class="navbar-brand" >LOGO</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
      
          <div class="collapse navbar-collapse" id="navbarNav">
              <ul class="navbar-nav">
                  <li class="nav-item active ">
                      <a class="btn text-white" href="https://www.digitalocean.com/">Home</a>
                  </li>
              </ul>
          </div>
          <div class="navbar-right" id="navbarNav">
              @loggedIn
                  <ul class="navbar-nav">
                          <li>
                              <div class="text-right">
                                   <a href="{{route('create.quote')}}" class="btn btn-outline-primary">Create Quote</a>
                              </div>
                          </li>
      
                      <li class="nav-item dropdown">
                          <a class="nav-link dropdown-toggle" href="https://www.digitalocean.com/#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             {{ auth.user.username}}
                          </a>
                          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                              <form method="POST" action="{{route('logout')}}">
                                  {{ csrfField() }}
                                    <button  type="submit" class="dropdown-item" href="">logout</button>
                              </form>
                          </div>
                      </li>
                  </ul>
              @else
                  <ul class="navbar-nav">
                      <li class="nav-item active pr-2">
                          <a href="{{route('login.create')}}" class="btn btn-outline-danger">
                            login
                          </a>
                      </li>
                      <li class="nav-item active pr-2">
                          <a href="{{route('register.create')}}" class="btn btn-outline-primary">
                              Register
                          </a>
                      </li>
                  </ul>
              @endloggedIn
          </div>
      </nav>
      

      Zusätzlich zur Definition der Links zu der Homepage und einer Schaltfläche zum Registrieren und Anmelden fügen Sie ein Tag @loggedIn hinzu. Damit können Sie eine bedingte Anweisung um den authentifizierten Benutzer herum schreiben und bei Bedarf entsprechende Inhalte anzeigen. Für einen authentifizierten Benutzer zeigt die Anwendung den Benutzernamen und eine Schaltfläche zum Erstellen eines neuen Zitats an. Wenn ein Benutzer nicht angemeldet ist, zeigt Ihre Anwendung eine Schaltfläche für die Anmeldung oder die Registrierung an. Diese Seite wird als Partiale auf jeder Seite eingefügt, so wie es zuvor im Master-Layout für diese Anwendung enthalten war.

      Speichern und schließen Sie die Datei.

      Nun erstellen Sie die Indexseite, die Sie für die Homepage der Anwendung verwenden. Sie wird die Liste aller inspirierenden Zitate, die die Benutzer schreiben, rendern und anzeigen:

      Sie werden eine Ausgabe sehen, die der folgenden ähnelt:

      Output

      ✔ create resources/views/index.edge

      Die hier erstellte Datei wird sich in resources/views/index.edge befinden. Öffnen Sie die Datei:

      • nano resources/views/index.edge

      Fügen Sie dann den folgenden Code hinzu:

      /resources/views/index.edge

      @layout('layouts/master')
      @section('content')
      
      <div class="container">
          <div class="text-center">
              @if(flashMessage('successmessage'))
                  <span class="alert alert-success p-1">{{ flashMessage('successmessage') }}</span>
              @endif
          </div>
          <div class="row">
              @each(quote in quotes)
                  <div class="col-md-4 mb-4 quote-wrapper">
                      <a href="https://www.digitalocean.com/view-quote/{{quote.id}}" class="w-100">
                          <div class="card shadow-lg bg-dark text-white">
                              <div class="card-body">
                                  <blockquote class="blockquote mb-0">
                                      <p>{{quote.body}}</p>
                                      <footer class="blockquote-footer">
                                          <cite title="Source Title"> {{quote.username}}</cite>
                                      </footer>
                                  </blockquote>
                                  @if(auth.user.id == quote.user_id)
                                    <div>
                                      <a  href="http://www.digitalocean.com/edit-quote/{{quote.id}}" class="btn btn-primary">edit</a>
                                      <a href="http://www.digitalocean.com/delete-quote/{{quote.id}}" class="btn btn-danger">delete</a>
                                    </div>
                                  @endif
                              </div>
                          </div>
                      </a>
                  </div>
              @else
               <div class="col-md-12 empty-quote text-center">
                      <p>No inspirational quote has been created</p>
               </div>
              @endeach
          </div>
      </div>
      @endsection
      

      Hier geben Sie an, dass diese Ansicht das Layout master durch Erweiterung verwenden wird. Diese Seite hat nun Zugriff auf alle Bibliotheken, Stylesheets und die navbar, die im Layout master enthalten sind. Als Nächstes iterieren Sie über ein Array von quotes (Zitaten) unter Verwendung des integrierten Tags @each. Das Array quotes wird von dem QuoteController, den Sie später in diesem Tutorial erstellen werden, an diese Ansicht übergeben. Wenn keine Zitate vorhanden sind, wird eine entsprechende Meldung angezeigt.

      Speichern und schließen Sie diese Datei.

      Um die Anmeldeseite zu erstellen, führen Sie nun den folgenden Befehl aus:

      • adonis make:view auth/login

      Sie werden eine Ausgabe sehen, die der folgenden ähnelt:

      Output

      ✔ create resources/views/auth/login.edge

      Dadurch wird automatisch ein Ordner auth innerhalb von resources/views erstellt und darin ebenfalls eine Datei login.edge angelegt. Öffnen Sie die Datei login.edge:

      • nano resources/views/auth/login.edge

      Fügen Sie den folgenden Inhalt hinzu:

      /resources/views/auth/login.edge

      @layout('layouts/master')
      @section('content')
        <div class="container">
          <div class="row">
            <div class="col-md-4 shadow bg-white mt-5 rounded offset-md-4">
              <form method="POST" action="{{route('login.store')}}">
                {{ csrfField() }}
                  <div>
                    @if(flashMessage('successmessage'))
                      <span class="alert alert-success p-1">{{ flashMessage('successmessage') }}</span>
                    @endif
                  </div>
                  <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="email" class="form-control" id="email" name="email" value="{{old('email','')}}"  placeholder="Enter email">
                    {{ elIf('<span class=text-danger>$self</span>', getErrorFor('email'), hasErrorFor('email')) }}
                  </div>
                  <div class="form-group">
                    <label for="pasword">Password</label>
                    <input type="password" class="form-control" id="password" name="password" value="{{old('password','')}}" placeholder="Password">
                    {{ elIf('<span class=text-danger>$self</span>', getErrorFor('password'), hasErrorFor('password')) }}
                  </div>
      
                  <div class="text-center">
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </div>
              </form>
            </div>
          </div>
        </div>
      @endsection
      

      Diese Datei enthält ein Formular, das Eingabeelemente enthält,mit denen Sie den Benutzernamen und das Passwort eines registrierten Benutzers erfassen, bevor dieser sich erfolgreich authentifizieren und mit der Erstellung von Zitaten beginnen kann. Ein weiteres wichtiges Element, das Sie auf dieser Seite beachten sollten, ist das {{ csrfField() }}​​​. Es handelt sich dabei um eine globale Variable, die AdonisJs verwendet, um das CSRF-Zugriffstoken zu übergeben, wenn eine POST-, PUT– und DELETE-Anfrage aus Ihrer Anwendung gesendet wird.

      Dies wurde eingerichtet, um Ihre Anwendung vor Cross-Site Request Forgery (CSRF)-Angriffen zu schützen. Es funktioniert, indem es für jeden Benutzer, der Ihre Website besucht, ein eindeutiges CSRF-Geheimnis erzeugt. Sobald Ihre Benutzer eine HTTP-Anfrage vom Frontend aus senden, wird ein entsprechendes Token für dieses Geheimnis generiert und mit der Anfrage weitergegeben. Auf diese Weise kann die für diese Anfrage innerhalb von AdonisJs erstellte Middleware überprüfen, ob sowohl das Token als auch das CSRF-Geheimnis gültig sind und dem aktuell authentifizierten Benutzer gehören.

      Speichern und schließen Sie die Datei, sobald Sie fertig sind.

      Als Nächstes erstellen Sie die Registrierungsseite mit diesem Befehl:

      • adonis make:view auth/register

      Sie werden eine ähnliche Ausgabe wie diese sehen:

      Output

      ✔ create resources/views/auth/register.edge

      Suchen und öffnen Sie die neu erstellte Datei in resources/views/auth/register.edge:

      • nano resources/views/auth/register.edge

      Fügen Sie folgenden Code hinzu:

      resources/views/auth/register.edge

      @layout('layouts/master')
      @section('content')
        <div class="container ">
          <div class="row">
              <div class="col-md-4  bg-white p-3 mt-5 shadow no-border rounded offset-md-4">
                <form method="POST" action="{{route('register.store')}}">
                  {{ csrfField() }}
                    <div class="form-group">
                      <label for="name">Fullname</label>
                      <input type="text" class="form-control" id="name" name="name"  value="{{old('name','')}}" placeholder="Enter Fullname">
                      {{ elIf('<span class=text-danger>$self</span>', getErrorFor('name'), hasErrorFor('name')) }}
                    </div>
                    <div class="form-group">
                      <label for="email">Email address</label>
                      <input type="email" class="form-control" id="email"  name="email" value="{{old('email','')}}" placeholder="Enter email">
                      {{ elIf('<span class=text-danger>$self</span>', getErrorFor('email'), hasErrorFor('email')) }}
                    </div>
                    <div class="form-group">
                      <label for="pasword">Password</label>
                      <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                      {{ elIf('<span class=text-danger>$self</span>', getErrorFor('password'), hasErrorFor('password')) }}
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
              </div>
          </div>
        </div>
      @endsection
      

      Ähnlich wie die Anmeldeseite enthält diese Datei ein HTML-Formular mit Eingabefeldern zur Erfassung von Name, E-Mail und Passwort eines Benutzers während des Registrierungsvorgangs. Ebenfalls enthalten ist das {{ csrfField() }}, da es für jede Post-Anfrage für eine AdonisJs-Anwendung erforderlich ist.

      Speichern und schließen Sie die Datei.

      Nun erstellen Sie eine neue Datei, um ein inspirierendes Zitat zu erstellen, indem Sie den folgenden Befehl vom Terminal aus ausführen:

      • adonis make:view quotes/create-quote

      Sie sehen eine Ausgabe wie:

      Output

      ✔ create resources/views/quotes/create-quote.edge

      Öffnen Sie resources/views/quotes/create-quote.edge:

      • nano resources/views/quotes/create-quote.edge

      Und fügen Sie den folgenden Inhalt hinzu:

      /resources/views/quotes/create-quote.edge

      @layout('layouts/master')
      @section('content')
      <div class="container">
          <div class="row">
              <div class="col-md-3"></div>
              <div class="col-md-6 shadow bg-white mt-5 rounded p-3">
                  <div class="float-right">
                      <a href="https://www.digitalocean.com/" class="btn btn-outline-dark ">back</a>
                  </div>
                      <br>
      
                  <div class="clear-fix"></div>
                      <form method="POST" action="{{route('store.quote')}}">
                          {{ csrfField() }}
                          <div class="form-group">
                              <label for="quote">Create Quote</label>
                              <textarea type="text" rows="5"  name='body' id="body" class="form-control" id="quote" placeholder="Write an inspirational quote"></textarea>
                          </div>
      
                          <div class="text-center">
                              <button type="submit" class="btn btn-primary">Submit</button>
                          </div>
                      </form>
                  </div>
              </div>
              <div class="col-md-3"></div>
          </div>
      </div>
      @endsection
      

      Diese Seite erweitert das Master-Layout und enthält ein HTML-Formular mit einem Textbereichselement, das es dem Benutzer ermöglicht, Text über mehrere Zeilen einzugeben, bevor er über die entsprechende Route veröffentlicht und gehandhabt wird.

      Speichern und schließen Sie die Datei, sobald Sie fertig sind.

      Erstellen Sie als Nächstes eine Seite zur Bearbeitung eines bestimmten Zitats. Führen Sie den folgenden Befehl vom Terminal aus:

      • adonis make:view quotes/edit-quote

      Sie sehen den folgenden Output:

      Output

      ✔ create resources/views/quotes/edit-quote.edge

      Öffnen Sie die Datei mit:

      • nano resources/views/quotes/edit-quote.edge

      Fügen Sie den folgenden Inhalt zu resources/views/quotes/edit-quote hinzu:

      /resources/views/quotes/edit-quote.edge

      @layout('layouts/master')
      @section('content')
      <div class="container">
          <div class="row">
              <div class="col-md-6 shadow bg-white rounded p-3 offset-md-3">
                  <div class="float-right">
                      <a href="https://www.digitalocean.com/" class="btn btn-outline-dark ">back</a>
                  </div>
                  <br>
      
                  <div class="clear-fix"></div>
                  <form method="POST" action="/update-quote/{{quote.id}}">
                      {{ csrfField() }}
                      <div class="form-group">
                          <label for="pasword">Edit Quote</label>
                          <textarea type="text" rows="5"  name='body' id="body" class="form-control" id="quote" placeholder="write the inspirational quote">{{quote.body}}</textarea>
                      </div>
                      <div class="text-center">
                          <button type="submit" class="btn btn-primary">Update</button>
                      </div>
      
                  </form>
              </div>
          </div>
      </div>
      @endsection
      

      Diese Seite enthält ähnliche Inhalte wie die Datei create-quote.edge – der Unterschied besteht darin, dass sie die Details eines bestimmten Zitats enthält, die zu bearbeiten sind, <form method="POST" action="/update-quote/{{quote.id}}">.

      Speichern und schließen Sie die Datei.

      Erstellen Sie abschließend eine Seite, um ein einzelnes inspirierendes Zitat anzuzeigen:

      • adonis make:view quotes/quote

      Sie sehen eine Ausgabe, die dieser ähnelt:

      Output

      ✔ create resources/views/quotes/quote.edge

      Öffnen Sie die Datei mit:

      • nano resources/views/quotes/quote.edge

      Fügen Sie folgenden Code hinzu:

      /resources/views/quotes/quote.edge

      @layout('layouts/master')
      @section('content')
      <div class="container">
          <div class="row">
              <div class="col-md-6 offset-md-3">
                  <div class="card shadow-lg bg-dark text-white">
                      <div class="card-body">
                          <div class="float-right">
                              <a href="https://www.digitalocean.com/" class="btn btn-outline-primary ">back</a>
                          </div>
                              <br>
                          <div class="clear-fix"></div>
                          <blockquote class="blockquote mb-0">
                              <p>{{quote.body}}</p>
                              <footer class="blockquote-footer">
                                  <cite title="Source Title">{{quote.username}}</cite>
                              </footer>
                          </blockquote>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      @endsection
      

      Diese Seite gibt die Details eines bestimmten Zitats wieder, einschließlich des Zitatkörpers quote.body, und des Autors, der es erstellt hat, quote.username.

      Wenn Sie mit der Datei fertig sind, speichern und schließen Sie sie.

      Sie haben alle erforderlichen Seiten für Ihre Anwendung mit Hilfe der Edge Templating Engine erstellt. Als Nächstes konfigurieren und stellen Sie eine Verbindung mit der Datenbank Ihrer Anwendung her.

      Schritt 3 – Erstellen eines Datenbankschemas

      Wenn Sie Ihre Anwendung jetzt bereitstellen, wird ein Fehler ausgegeben, da Sie die Anwendung noch mit einer Datenbank verbinden müssen. In diesem Abschnitt richten Sie eine Verbindung mit der Datenbank ein und verwenden dann den Befehl adonis zur Erzeugung einer Migrationsdatei, die zur Erstellung der Tabellen für die Datenbank verwendet wird.

      AdonisJs enthält ein ORM namens Lucid ORM, das eine aktive Datensatz-Implementierung für die Arbeit mit Ihrer Datenbank bereitstellt. Damit entfällt das mühsame Schreiben von SQL-Abfragen, die Daten in Echtzeit aus der Datenbank abrufen. Dies ist besonders hilfreich bei der Arbeit an einer komplexen Anwendung, die viele Abfragen erfordert. So können Sie beispielsweise alle Zitate aus Ihrer Anwendung abrufen, indem Sie eingeben:

      const quotes = await Quote.all()
      

      Um mit der entsprechenden Konfiguration für Ihre Anwendungsdatenbank fortzufahren, stellen Sie sicher, dass Sie sich immer noch im Stammverzeichnis Ihrer Anwendung befinden und erstellen Sie eine .env-Datei:

      Öffnen Sie die neu erstellte Datei und fügen Sie den folgenden Inhalt hinzu:

      .env

      HOST=127.0.0.1
      PORT=3333
      NODE_ENV=development
      APP_URL=http://${HOST}:${PORT}
      CACHE_VIEWS=false
      APP_KEY=bTVOEgUvmTCfkvgrK8gEBC3Qxt1xSYr0
      DB_CONNECTION=mysql
      DB_HOST=127.0.0.1
      DB_PORT=3306
      DB_USER=sammy
      DB_PASSWORD=password
      DB_DATABASE=adonis
      SESSION_DRIVER=cookie
      HASH_DRIVER=bcrypt
      

      Standardmäßig ist die Datenbankverbindung für eine AdonisJs-Anwendung SQLite, die Sie hier auf MySQL aktualisieren werden. Des Weiteren geben Sie den PORT für die Anwendung, die Anwendungsumgebung und Berechtigungsnachweise für die Datenbank an. Stellen Sie sicher, dass Sie die Platzhalter DB_USER, DB_PASSWORD und DB_DATABASE mit Ihren Berechtigungsnachweisen ersetzen.

      Als Nächstes erstellen Sie das Modell und eine Migrationsdatei für Quote unter Verwendung der Adonis CLI. Führen Sie dazu den folgenden Befehl aus:

      • adonis make:model Quote --migration

      Sie sehen eine Ausgabe, die der folgenden ähnelt:

      Output

      ✔ create app/Models/Quote.js ✔ create database/migrations/1568209992854_quote_schema.js

      Dieser Befehl erstellt ein Modell für Quote im Ordner app/Models und eine Schemadatei in dem Ordner database/migrations. Der neu erstellten Schemadatei wird der aktuelle Zeitstempel vorangestellt. Öffnen Sie die Schemadatei mit:

      • nano database/migrations/1568209992854_quote_schema.js

      Aktualisieren Sie den Inhalt mit dem folgenden Code:

      database/migrations/…quote_schema.js

      'use strict'
      /** @type {import('@adonisjs/lucid/src/Schema')} */
      const Schema = use('Schema')
      class QuoteSchema extends Schema {
        up () {
          this.create('quotes', (table) => {
            table.increments()
            table.integer('user_id').notNullable()
            table.string('username', 80).notNullable()
            table.string('body').notNullable()
            table.timestamps()
          })
        }
        down () {
          this.drop('quotes')
        }
      }
      module.exports = QuoteSchema
      

      Eine Schemadatei in AdonisJs erfordert zwei verschiedene Methoden:

      • up: Wird verwendet, um eine neue Tabelle zu erstellen oder eine bestehende Tabelle zu ändern.
      • down: Wird verwendet, um die bei der Methode up vorgenommene Änderung rückgängig zu machen.

      Zusätzlich zu den Feldern timestamps() und increments() aktualisieren Sie den Inhalt der Schemadatei mit den Feldattributen user_id, username und dem body eines zu erstellenden Zitats. Die Felder user_id und username verweisen auf die Details des Benutzers, der ein bestimmtes Zitat erstellt. Dies definiert eine 1:n-Beziehung und bedeutet, dass ein Benutzer eine unendliche Anzahl von Zitaten besitzen kann, während ein einzelnes Zitat nur einem Benutzer gehören kann.

      Speichern und schließen Sie die Datei.

      AdonisJs wird standardmäßig mit Modell User und der zugehörigen Migrationsdatei installiert. Dies erfordert nur eine kleine Änderung, um die Beziehung zwischen dem Modell User und Quote herzustellen.

      Öffnen Sie das Modell User in app/Models/User.js:

      Fügen Sie diese Methode unmittelbar nach der Methode tokens() hinzu:

      app/Models/User.js

      ...
      class User extends Model {
        ...
        tokens () {
          return this.hasMany('App/Models/Token')
        }
      
        quote () {
          return this.hasMany('App/Models/Quote')
        }
      }
      
      module.exports = User
      

      Dadurch wird eine 1:n-Beziehung mit der Tabelle Quote unter Verwendung von user_id als Fremdschlüssel festgelegt.

      Speichern und schließen Sie die Datei.

      Um diesen Abschnitt abzuschließen, verwenden Sie den folgenden Befehl zur Ausführung von Migrationen, wodurch die Methode up() aller Migrationsdateien ausgeführt wird:

      Sie werden eine Ausgabe sehen, die der folgenden ähnelt:

      Output

      migrate: 1503248427885_user.js migrate: 1503248427886_token.js migrate: 1568209992854_quote_schema.js Database migrated successfully in 3.42 s

      Sie haben eine Verbindung mit Ihrer Datenbank konfiguriert und gesichert. Des Weiteren haben Sie ein Modell Quote und die dazugehörige Schemadatei erstellt und eine 1:n-Beziehung zwischen User und Quote hergestellt. Als Nächstes generieren Sie die Routen und Controller zur Bearbeitung von HTTP-Anfragen und die Geschäftslogik zum Erstellen, Bearbeiten und Löschen eines inspirierenden Zitats.

      Schritt 4 – Erstellen von Controllern und Einrichten von Routen

      In diesem Abschnitt beginnen Sie mit der Erstellung von Controllern, die die gesamte Logik für die Anwendung verarbeiten und diese später an eine bestimmte Route anhängen, damit die Benutzer über eine URL darauf zugreifen können.

      Zu Beginn werden Sie mit der Adonis CLI einen neuen HTTP-Request-Controller erstellen, der alle Authentifizierungsprozesse für Ihre Anwendung verarbeiten kann, indem Sie den folgenden Befehl ausführen:

      • adonis make:controller Auth --type http

      Dieser Befehl erstellt eine Datei AuthController.js und speichert sie innerhalb des Ordners app/Controllers/Http. Sie verwenden das Flag --type, um anzugeben, dass dieser Controller ein HTTP-Controller sein soll.

      Sie werden eine Ausgabe sehen, die der folgenden ähnelt:

      Output

      ✔ create app/Controllers/Http/AuthController.js

      Öffnen Sie als Nächstes die neu erstellte Controller-Datei:

      • nano app/Controllers/Http/AuthController.js

      Aktualisieren Sie sie mit dem folgenden Inhalt:

      app/Controllers/Http/AuthController.js

      'use strict'
      const User = use('App/Models/User')
      class AuthController {
      
          loginView({ view }) {
              return view.render('auth.login')
          }
          registrationView({ view }) {
              return view.render('auth.register')
          }
      
          async postLogin({ request, auth, response}) {
              await auth.attempt(request.input('email'), request.input('password'))
              return response.route('index')
          }
      
          async postRegister({ request, session, response }) {
              const user = await User.create({
                  username: request.input('name'),
                  email: request.input('email'),
                  password: request.input('password')
              })
              session.flash({ successmessage: 'User have been created successfully'})
              return response.route('login.create');
          }
      
          async logout ({ auth, response }) {
              await auth.logout()
              return response.route("https://www.digitalocean.com/")
          }
      }
      module.exports = AuthController
      

      In dieser Datei importieren Sie das Modell User und erstellen dann zwei Methoden namens loginView() und registerView(), um die Anmelde- bzw. Registrierungsseite zu rendern. Abschließend erstellen Sie die folgenden asynchronen Methoden:

      • postLogin(): Mit dieser Methode erhalten Sie den Wert von email und password, die mit Hilfe der in AdonisJs eingebauten Methode request gepostet wurden, und validieren dann diesen Benutzer anhand der Details in der Datenbank. Wenn ein solcher Benutzer in der Datenbank existiert und den korrekten Berechtigungsnachweis eingegeben hat, wird er zurück auf die Homepage umgeleitet und authentifiziert, bevor er ein neues Zitat erstellen kann. Andernfalls wird eine Meldung angezeigt, die auf den falschen Berechtigungsnachweis hinweist.
      • postRegister(): Dies erhält den Wert von username, email und password für einen Benutzer, um ein Konto für diesen Benutzer in der Datenbank zu erstellen. Eine Nachricht mit der Angabe, dass dieser Benutzer erfolgreich erstellt wurde, wird an die Sitzung weitergeleitet, und der Benutzer wird auf die Anmeldeseite umgeleitet, um authentifiziert zu werden und mit der Erstellung eines Zitats zu beginnen.
      • logout(): Diese Methode verarbeitet die Logout-Funktionalität und leitet den Benutzer zurück auf die Homepage.

      Speichern und schließen Sie die Datei.

      Nachdem Sie nun den Controller für die Registrierung und Authentifizierung von Benutzern eingerichtet haben, fahren Sie mit der Erstellung eines HTTP-Request-Controllers für die Verwaltung aller Operationen in Bezug auf Zitate fort.

      Führen Sie, zurück im Terminal, den folgenden Befehl aus, um den QuoteController zu erstellen:

      • adonis make:controller Quote --type http --resource

      Die Verwendung des Flags --resource erstellt einen Controller mit vordefinierten kreativen Methoden zur Durchführung von CRUD (Create, Read, Update und Delete)-Operationen.

      Sie sehen:

      Output

      ✔ create app/Controllers/Http/QuoteController.js

      Finden Sie diese Datei innerhalb von app/Controllers/Http/QuoteControllers.js:

      • nano app/Controllers/Http/QuoteController.js

      Aktualisieren Sie sie mit dem folgenden Inhalt:

      app/Controllers/Http/QuoteController.js

      'use strict'
      const Quote = use('App/Models/Quote')
      
      class QuoteController {
      
        async index ({ view }) {
          const quote = await Quote.all()
          return view.render('index', {
            quotes: quote.toJSON()
          })
        }
      
        async create ({ view }) {
          return view.render('quotes.create-quote')
        }
      
        async store ({ request,auth,session, response }) {
          const quote = await Quote.create({
            user_id: auth.user.id,
            username: auth.user.username,
            body: request.input('body')
          })
          session.flash({ 'successmessage': 'Quote has been created'})
          return response.redirect("https://www.digitalocean.com/")
        }
      
        async show ({ params, view }) {
          const quote = await Quote.find(params.id)
          return view.render('quotes.view-quote', {
            quote: quote.toJSON()
          })
        }
      
        async edit ({ params, view }) {
          const quote = await Quote.find(params.id)
          return view.render('quotes.edit-quote', {
            quote: quote.toJSON()
          })
        }
      
        async update ({ params, request, response, session }) {
          const quote = await Quote.find(params.id)
          quote.body = request.input('body')
          await quote.save()
          session.flash({'successmessage': 'Quote has been updated'})
          return response.redirect("https://www.digitalocean.com/")
        }
      
        async destroy ({ params, response, session }) {
          const quote = await Quote.find(params.id)
          await quote.delete()
          session.flash({'successmessage': 'Quote has been deleted'})
          return response.redirect("https://www.digitalocean.com/")
        }
      }
      module.exports = QuoteController
      

      In diesem Controller haben Sie das Modell Quote importiert und die folgenden Methoden aktualisiert, die automatisch mit AdonisJs CLI erstellt wurden:

      • index(): Um alle Zitate aus der Datenbank zu holen und sie auf der Homepage der Anwendung darzustellen.
      • create(): Um eine Seite zum Erstellen von Zitaten darzustellen.
      • store(): Um ein neu erstelltes Zitat dauerhaft in der Datenbank zu speichern und eine entsprechende Antwort zurückzugeben.
      • show(): Um die id eines bestimmten Zitats zu erhalten, es aus der Datenbank abzurufen und auf der Seite zur Bearbeitung von Zitaten anzuzeigen.
      • edit(): Um Details eines bestimmten Zitats aus der Datenbank abzurufen und zur Bearbeitung darzustellen.
      • update(): Um jede Aktualisierung eines Zitats zu verarbeiten und den Benutzer zurück auf die Homepage zu leiten.
      • destroy(): Um ein bestimmtes Zitat zu löschen und vollständig aus der Datenbank zu entfernen.

      Speichern und schließen Sie die Datei.

      Nachdem Sie alle erforderlichen Controller für diese Anwendung erstellt haben, können Sie nun die Routen so einrichten, dass die Benutzer problemlos mit Ihrer Anwendung interagieren können. Navigieren Sie zu Beginn zu der Datei start/routes.js:

      Ersetzen Sie den Inhalt mit dem folgenden:

      start/routes.js

      'use strict'
      const Route = use('Route')
      
      Route.get("https://www.digitalocean.com/",'QuoteController.index').as('index')
      Route.get('/register','AuthController.registrationView').as('register.create')
      Route.post('/register-store','AuthController.postRegister').as('register.store').validator('Register')
      Route.get('/login','AuthController.loginView').as('login.create')
      Route.post('/login-store','AuthController.postLogin').as('login.store')
      Route.get('/view-quote/:id','QuoteController.show').as('view.quote')
      
      Route.group(() => {
          Route.get('/create-quote','QuoteController.create').as('create.quote')
          Route.post('/store-quote','QuoteController.store').as('store.quote')
          Route.get('/edit-quote/:id','QuoteController.edit').as('edit.quote')
          Route.post('/update-quote/:id','QuoteController.update').as('update.quote')
          Route.get('/delete-quote/:id','QuoteController.destroy').as('delete.quote')
          Route.post('/logout','AuthController.logout').as('logout')
      }).middleware(['auth'])
      

      Hier definieren Sie den Pfad für jede Route in Ihrer Anwendung, geben die HTTP-Verben für jede Aktion an und binden die Route an eine bestimmte Methode in jedem Controller. Außerdem benennen Sie jede dieser Routen so, wie sie in den Controllern und Ansichten referenziert wurden.

      Um sicherzustellen, dass nur authentifizierte Benutzer auf alle Zitatrouten zugreifen können, ordnen Sie eine Gruppe namens Middleware zu. Schließlich hängen Sie eine Validierer-Methode an die Route register.store an, um die Benutzereingaben zu validieren.

      Speichern und schließen Sie die Datei.

      Sie haben Ihre Controller erstellt und die Routen für Ihre Anwendung eingerichtet. Als Nächstes erstellen Sie die in diesem Schritt definierte Validierer-Methode.

      Schritt 5 – Validieren der Benutzereingabe

      Standardmäßig verfügt AdonisJs nicht über integrierte Validierer. Daher müssen Sie den Validierer für Ihre Anwendung manuell installieren und registrieren.

      Führen Sie den folgenden Befehl aus, um ihn zu installieren:

      Öffnen Sie die folgende Datei, um den Anbieter des Validieres (Validator Provider) zu registrieren:

      Registrieren Sie dann den Anbieter des Validieres, indem Sie ihn an die Liste der Anbieter anhängen, wie nachfolgend gezeigt:

      start/app.js

      ...
      const providers = [
         ...
         '@adonisjs/cors/providers/CorsProvider',
         '@adonisjs/shield/providers/ShieldProvider',
         '@adonisjs/session/providers/SessionProvider',
         '@adonisjs/auth/providers/AuthProvider',
         '@adonisjs/validator/providers/ValidatorProvider'
      ]
      

      Nachdem Sie den Anbieter des Validieres innerhalb Ihrer Anwendung installiert und registriert haben, erstellen Sie nun mit dem folgenden Befehl einen benutzerdefinierten Validierer, um die Eingabe des Benutzers während der Registrierung zu validieren:

      • adonis make:validator Register

      Dadurch wird eine Datei Register.js im Verzeichnis App/Validators erstellt. Öffnen Sie die Datei mit:

      • nano app/Validators/Register.js

      Fügen Sie den folgenden Code zur Datei hinzu:

      app/Validators/Register.js

      'use strict'
      class Register {
        get rules () {
          return {
            name:'required',
            email:'required|email|unique:users',
            password:'required|min:8'
          }
        }
      
        get messages(){
          return{
            'name.required':'Full name is required',
            'email.required':'email is required',
            'email.unique':'email already exists',
            'password.required':'password is required',
            'password.min':'password should be at least 8 characters'
          }
        }
      }
      module.exports = Register
      

      In Ihrer Anwendung definieren Sie Regeln für bestimmte Felder. Wenn Validierungen zu einem beliebigen Zeitpunkt fehlschlagen, setzt der Validierer den Fehler automatisch als Flash-Meldung und der Benutzer wird zurück zum Formular geleitet.

      Speichern und schließen Sie die Datei, sobald Sie die Bearbeitung abgeschlossen haben.

      Um Ihrer Anwendung ein Design hinzuzufügen, öffnen Sie schließlich die folgende Datei:

      Ersetzen Sie die Inhalte mit dem folgenden:

      /public/style.css

      @import url('https://fonts.googleapis.com/css?family=Montserrat:300');
      
      html, body {
        height: 100%;
        width: 100%;
      }
      
      body {
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
        background-image: url("/splash.png");
        background-color: #220052;
      }
      
      * {
        margin: 0;
        padding: 0;
      }
      
      a {
        color: inherit;
        text-decoration: underline;
      }
      
      p {
        margin: 0.83rem 0;
      }
      
      .quote-wrapper {
        margin-top: 20px;
      }
      
      .quote-wrapper a {
        text-decoration: none;
      }
      
      .quote-wrapper a:hover {
        color: #ffffff;
      }
      
      .empty-quote {
        color: #ffffff;
      }
      
      form {
        padding: 20px;
      }
      

      In dieser Datei aktualisieren Sie das CSS-Design Ihrer Anwendung in der Datei style.css.

      Sie haben einen Anbieter eines Validieres installiert und registriert, um die Eingabe von Benutzern während des Registrierungsvorgangs zu überprüfen. Des Weiteren haben Sie den Inhalt Ihres Stylesheets aktualisiert, um der Anwendung mehr Design hinzuzufügen. Im letzten Schritt testen Sie Ihre Anwendung.

      Schritt 6 – Bereitstellen der Anwendung

      In diesem Schritt stellen Sie Ihre Anwendung bereit und erstellen einen Benutzer und ein Passwort zum Testen der Authentifizierung. Außerdem fügen Sie Ihrer Anwendung ein Zitate hinzu und zeigen es auf der Homepage an.

      Um Ihre Anwendung zu testen, starten Sie den Entwicklungsserver mit dem folgenden Befehl aus dem Stammverzeichnis Ihrer Anwendung:

      Dadurch wird die Anwendung auf dem innerhalb der Stammdatei .env definierten Port, 3333, gestartet. Navigieren Sie in Ihrem Browser zu http://localhost:3333.

      Homepage der Zitat-Anwendung

      Die Homepage ist zur Zeit leer, da Sie keine Zitate erstellt haben. Klicken Sie auf die Schaltfläche Register.

      Anmeldeseite

      Geben Sie Ihre Informationen ein und klicken Sie auf die Schaltfläche Submit, um den Registrierungsvorgang abzuschließen. Sie werden auf die Anmeldeseite umgeleitet. Geben Sie Ihre E-Mail-Adresse und Ihr Passwort für die Authentifizierung ein.

      Anmeldeseite

      Nachdem Sie authentifiziert sind, klicken Sie auf die Schaltfläche Create Quote.

      Seite „Zitat erstellen“

      Geben Sie ein Zitat ein und navigieren Sie zu der Seite View all, um Ihr Zitat anzuzeigen.

      Seite „Alle Zitate anzeigen“

      Sie haben Ihre Anwendung getestet, indem Sie einen Benutzer erstellt und authentifiziert und anschließend ein Zitat verfasst haben.

      Zusammenfassung

      In diesem Tutorial haben Sie eine Webanwendung mit AdonisJs erstellt. Sie haben die Anwendung unter Verwendung der AdonisJs CLI eingerichtet und die CLI zum Erstellen anderer relevanter Dateien wie Controller, Modelle und Ansichten verwendet.

      Sie können Webanwendungen mit diesem Framework unabhängig von Ihrer Größe und Komplexität erstellen. Sie können den Quellcode für dieses Projekt hier auf GitHub herunterladen. Um weitere Funktionen zu erkunden, können Sie auch die offizielle Dokumentation besuchen.

      Wenn Sie einige unserer anderen JavaScript-Framework-Tutorials erkunden möchten, sehen Sie sich Folgendes an:



      Source link