Skip to content

Commit

Permalink
Merge pull request #163 from raphi-0901/bugfix/AMS-8516/fix-images-of…
Browse files Browse the repository at this point in the history
…-nodejs-webserver-tutorial

Fix images of setup-nodejs-server-EiWoMiSau
  • Loading branch information
ltakacs95 authored Apr 8, 2024
2 parents 73a7126 + 40212e0 commit 8671353
Show file tree
Hide file tree
Showing 55 changed files with 27 additions and 27 deletions.
54 changes: 27 additions & 27 deletions community-tutorials/setup-nodejs-server-EiWoMiSau/02-de.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,53 +31,53 @@ Um die Domain `pentagame-online.de` für verschiedene Zwecke nutzen zu können,

Hierfür öffnen wir die Plesk Übersicht unseres Hosting Paketes und drücken im Dialog für [Websites & Domains] den Button [Subdomain hinzufügen].

![Add Subdomain Button](./images_de/01-website-domains-add-subdomain-button.png)
![Add Subdomain Button](./images/01-de-website-domains-add-subdomain-button.png)

Nachdem wir für den Namen der Subdomain `nodejs-tutorial` und `pentagame-online.de` festgelegt haben, stellen wir unter Dokumentstamm sicher, dass dieser mit `/nodejs-tutorial.pentagame-online.de/drop.me` genau zur Subdomain passt.

**Achtung:**
- Darüber hinaus verweist das Unterverzeichnis `drop.me` auf den Ort, an dem netcup die Standard Begrüßungsseite ablegen wird, welche wir **später aber löschen müssen**.
- Diese Einstellung ist **nur einmal hier** festlegbar.

![Add Subdomain](./images_de/02-website-domains-add-subdomain-name.png)
![Add Subdomain](./images/02-de-website-domains-add-subdomain-name.png)

Nachfolgend werden wir zur Plesk Übersicht unserer neuen Subdomain weitergeleitet.

# Schritt 2 - Vorbereitung: SSL-Zertifikat
Dann fahren wir mit Klick auf [SSL/TLS-Zertifikate] fort.

![SSL Certificate Button](./images_de/03-nodejs-tutorial-subdomain-ssl-cert-button.png)
![SSL Certificate Button](./images/03-de-nodejs-tutorial-subdomain-ssl-cert-button.png)

Nachfolgend gehe ich davon aus, dass für die Domain `pentagame-online.de` bereits ein [Let's Encrypt Zertifikat wie hier nach Anleitung eingerichtet worden ist.](https://helpcenter.netcup.com/de/wiki/webhosting/ssl-verschluesselung-webhosting)

Daher geht es sofort weiter mit [verwalten].

![Manage SSL Certificate Button](./images_de/04-nodejs-tutorial-subdomain-ssl-cert-manage-button.png)
![Manage SSL Certificate Button](./images/04-de-nodejs-tutorial-subdomain-ssl-cert-manage-button.png)

Hier können wir mit dem Download Button am rechten Rand unser Zertifikat **temporär** im *.pem Format lokal abspeichern.

![Download SSL Certificate Button](./images_de/05-nodejs-tutorial-subdomain-ssl-cert-download-button.png)
![Download SSL Certificate Button](./images/05-de-nodejs-tutorial-subdomain-ssl-cert-download-button.png)

Und machen es dann mit [PEM-Datei hochladen] für die Subdomain verfügbar.

![Upload SSL Certificate Button](./images_de/06-nodejs-tutorial-subdomain-ssl-cert-upload-button.png)
![Upload SSL Certificate Button](./images/06-de-nodejs-tutorial-subdomain-ssl-cert-upload-button.png)

Mit dem eingestellten Zertifikat, lassen sich jetzt auch erfolgreich eingehende Anfragen [Von HTTP auf HTTPS umleiten]. Und mit Klick auf den Domainnamen kommen wir auch schnell wieder zurück zur Übersicht.

![Redirect HTTPS](./images_de/07-nodejs-tutorial-subdomain-ssl-cert-redirect-https.png)
![Redirect HTTPS](./images/07-de-nodejs-tutorial-subdomain-ssl-cert-redirect-https.png)

# Schritt 3 - Einrichtung: Node.js
Hier fügen wir mit [Website erstellen] ...

![Create Website Button](./images_de/08-nodejs-tutorial-subdomain-create-website-button.png)
![Create Website Button](./images/08-de-nodejs-tutorial-subdomain-create-website-button.png)

... [Node.js] unserer Webseite hinzu.

![Add Node.js](./images_de/09-nodejs-tutorial-subdomain-create-website-nodejs-button.png)
![Add Node.js](./images/09-de-nodejs-tutorial-subdomain-create-website-nodejs-button.png)

Um später bei Laufzeitfehlern hilfreichere Debugger Meldungen zu erhalten, stellen wir den Anwendungsmodus schon mal auf [development] und klicken dann auf [Node.js aktivieren].

![Activate Node.js](./images_de/10-nodejs-tutorial-subdomain-nodejs-activate-button.png)
![Activate Node.js](./images/10-de-nodejs-tutorial-subdomain-nodejs-activate-button.png)

# Schritt 4 - Fehlerbehebung
### Fehler: app.js nicht gefunden
Expand All @@ -86,20 +86,20 @@ Die nun kommende Fehlermeldung lautete tatsächlich auch im [production] Modus s

Und hierfür öffnen wir den [Dateimanager].

![No App.js File Browser Button](./images_de/11-nodejs-tutorial-subdomain-nodejs-no-appjs-file-browser-button.png)
![No App.js File Browser Button](./images/11-de-nodejs-tutorial-subdomain-nodejs-no-appjs-file-browser-button.png)

Dann navigieren wir zum Elternverzeichnis von `drop.me`.

![File Browser goto Document Root](./images_de/12-nodejs-tutorial-subdomain-nodejs-file-browser-goto-document-root.png)
![File Browser goto Document Root](./images/12-de-nodejs-tutorial-subdomain-nodejs-file-browser-goto-document-root.png)

Und erstellen dort die neue Datei `app.js`.

![Create New File](./images_de/13-nodejs-tutorial-subdomain-nodejs-no-appjs-create-file.png)
![Create App.js](./images_de/14-nodejs-tutorial-subdomain-nodejs-create-file-appjs.png)
![Create New File](./images/13-de-nodejs-tutorial-subdomain-nodejs-no-appjs-create-file.png)
![Create App.js](./images/14-de-nodejs-tutorial-subdomain-nodejs-create-file-appjs.png)

Wir öffnen den Code Editor für die neu erstellte Datei `app.js`.

![Edit App.js](./images_de/15-nodejs-tutorial-subdomain-nodejs-edit-file-appjs.png)
![Edit App.js](./images/15-de-nodejs-tutorial-subdomain-nodejs-edit-file-appjs.png)

Und geben folgenden Beispiel Quellcode ein.
```js
Expand All @@ -117,55 +117,55 @@ console.log(`App is running... (port: ${port})`);

Inhaltlich erzeugen wir damit einen HTTP Web Server, der auf dem Port `3000` alle Browser Anfragen mit Status Code `200` (OK) und der Nachricht: `Hello, World!` vom Mime Typ: `text/plain` beantwortet. Der Port kann dabei aber frei gewählt werden, denn er wird später von NGINX automatisch für die Weiterleitung der HTTP/HTTPS Anfragen genutzt.

![Paste App.js Code](./images_de/16-nodejs-tutorial-subdomain-nodejs-paste-sample-code-appjs.png)
![Paste App.js Code](./images/16-de-nodejs-tutorial-subdomain-nodejs-paste-sample-code-appjs.png)

Zurück in den Node.js Einstellungen für unsere Subdomain probieren wir die "URL der Anwendung" mit einem Klick aus.

![Open URL](./images_de/17-nodejs-tutorial-subdomain-nodejs-open-url.png)
![Open URL](./images/17-de-nodejs-tutorial-subdomain-nodejs-open-url.png)

### Fehler: "Hier entsteht (immernoch) eine neue Webseite"

Aber es erscheint die Standard Willkommen Seite unseres Hosting Paketes.

![Default Site](./images_de/18-nodejs-tutorial-subdomain-nodejs-apache-default-site.png)
![Default Site](./images/18-de-nodejs-tutorial-subdomain-nodejs-apache-default-site.png)

Was daran liegt, dass der primäre NGINX Server noch **alle** Anfragen an den Apache Webserver (der auch PHP interpretieren kann) weiterreicht. Also trennen wir als nächstes die Verbindung zwischen beiden.

Hierfür wechseln wir zurück zu [Websites & Domains] und auf unsere Subdomain `nodejs-tutorial.pentagame-online.de`, wo wir in den Tab [Hosting und DNS] klicken.

![Hosting and DNS Tab](./images_de/19-nodejs-tutorial-subdomain-hosting-dns-tab.png)
![Hosting and DNS Tab](./images/19-de-nodejs-tutorial-subdomain-hosting-dns-tab.png)

Dann rufen wir das Setup für [Apache und nginx] auf,

![Apache and nginx Button](./images_de/20-nodejs-tutorial-subdomain-hosting-dns-apache-nginx-button.png)
![Apache and nginx Button](./images/20-de-nodejs-tutorial-subdomain-hosting-dns-apache-nginx-button.png)

... scrollen bis zu nginx-Einstellungen,

![Apache and nginx Part 1](./images_de/21-nodejs-tutorial-subdomain-apache-nginx-part-1.png)
![Apache and nginx Part 1](./images/21-de-nodejs-tutorial-subdomain-apache-nginx-part-1.png)

und deaktivieren den [Proxymodus].

![Apache and nginx Part 2](./images_de/22-nodejs-tutorial-subdomain-apache-nginx-no-proxy-part-2.png)
![Apache and nginx Part 2](./images/22-de-nodejs-tutorial-subdomain-apache-nginx-no-proxy-part-2.png)

Zurück im Tab [Dashboard] öffnen wir mit [Dateien] den Dateimanager.

![Dashboard open Files](./images_de/23-nodejs-tutorial-subdomain-file-browser-button.png)
![Dashboard open Files](./images/23-de-nodejs-tutorial-subdomain-file-browser-button.png)

Dann navigieren wir erneut in das Dokument Root Verzeichnis unserer Subdomain. Und entfernen daraus, wie eingangs erwähnt, den Ordner `drop.me`.

![Delete drop.me](./images_de/24-nodejs-tutorial-subdomain-file-browser-delete-drop-me.png)
![Delete drop.me](./images/24-de-nodejs-tutorial-subdomain-file-browser-delete-drop-me.png)

Zurück in der Plesk Übersicht unserer Subdomain können wir abermals das Ergebnis der Node.js App [Im Browser öffnen].

![Reopen URL in Browser](./images_de/25-nodejs-tutorial-subdomain-test-website.png)
![Reopen URL in Browser](./images/25-de-nodejs-tutorial-subdomain-test-website.png)

Vermutlich wird bei Dir genau wie bei mir immer noch die Standard Willkommen Seite angezeigt. Aber ein Neuladen im Browser...

![Refresh Default Site](./images_de/26-nodejs-tutorial-subdomain-nodejs-apache-default-site-refresh.png)
![Refresh Default Site](./images/26-de-nodejs-tutorial-subdomain-nodejs-apache-default-site-refresh.png)

... liefert dann wie erwartet:

![Hello World](./images_de/27-nodejs-tutorial-subdomain-nodejs-hello-world.png)
![Hello World](./images/27-de-nodejs-tutorial-subdomain-nodejs-hello-world.png)

# Fazit

Expand Down

0 comments on commit 8671353

Please sign in to comment.