Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix images of setup-nodejs-server-EiWoMiSau #163

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading