Wie richtet man einen lokalen Testserver ein?

Im Großteil des Lernbereichs sagen wir Ihnen, dass Sie Ihre Beispiele direkt in einem Browser öffnen sollen – dies kann durch Doppelklicken auf die HTML-Datei, Ziehen und Ablegen in das Browserfenster oder durch Auswählen von Datei > Öffnen… und Navigieren zur HTML-Datei geschehen. Es gibt viele Möglichkeiten, dies zu erreichen.

Wenn der Webadressepfad mit file:// beginnt, gefolgt vom Pfad zur Datei auf Ihrer lokalen Festplatte, wird eine lokale Datei verwendet. Im Gegensatz dazu, wenn Sie eines unserer Beispiele auf GitHub (oder ein Beispiel auf einem anderen Remote-Server) betrachten, beginnt die Webadresse mit http:// oder https://, um zu zeigen, dass die Datei über HTTP empfangen wurde.

Einige Beispiele werden nicht funktionieren, wenn Sie sie als lokale Dateien öffnen. Dies kann verschiedene Gründe haben, wobei die wahrscheinlichsten sind:

• Sie enthalten asynchrone Anfragen. Einige Browser (einschließlich Chrome) werden asynchrone Anfragen nicht ausführen (siehe Datenabruf vom Server), wenn Sie das Beispiel einfach von einer lokalen Datei ausführen. Dies liegt an Sicherheitsbeschränkungen (weitere Informationen zur Websicherheit finden Sie unter Website-Sicherheit).
• Sie verwenden eine serverseitige Sprache. Serverseitige Sprachen (wie PHP oder Python) erfordern einen speziellen Server, um den Code zu interpretieren und die Ergebnisse zu liefern.
• Sie beinhalten andere Dateien. Browser behandeln Anfragen zum Laden von Ressourcen mit dem file://-Schema häufig als Cross-Origin-Anfragen. Wenn Sie also eine lokale Datei laden, die andere lokale Dateien einschließt, kann dies einen CORS-Fehler auslösen.

Um das Problem mit asynchronen Anfragen zu umgehen, müssen wir solche Beispiele testen, indem wir sie über einen lokalen Webserver ausführen.

Wenn Sie nur HTML, CSS und JavaScript benötigen und keine serverseitigen Sprachen, ist die einfachste Möglichkeit, Erweiterungen in Ihrem Code-Editor zu überprüfen. Neben der Automatisierung der Installation und Einrichtung für Ihren lokalen HTTP-Server integrieren sie sich auch gut mit Ihren Code-Editoren. Das Testen lokaler Dateien in einem HTTP-Server kann nur einen Klick entfernt sein.

Für VSCode können Sie die folgende kostenlose Erweiterung überprüfen:

• vscode-preview-server. Sie können es auf seiner Homepage überprüfen.

Das Node.js-Modul http-server ist ein einfachster Weg, HTML-Dateien in jedem Verzeichnis zu hosten.

Um das Modul zu verwenden:

1. Führen Sie die folgenden Befehle aus, um zu prüfen, ob Node.js bereits installiert ist:

   bash

   node -v
   npm -v
   npx -v
   

2. Wenn Node.js nicht installiert ist, müssen Sie es installieren. Folgen Sie den Download-Anweisungen in der Node.js-Dokumentation und führen Sie anschließend die obigen Befehle erneut aus, um zu überprüfen, ob die Installation erfolgreich war.

3. Nehmen wir an, das Verzeichnis ist /path/to/project. Führen Sie den folgenden Befehl aus, um den Server zu starten:

   bash

   npx http-server /path/to/project -o -p 9999
   

   Dies hostet alle Dateien im Verzeichnis /path/to/project auf localhost:9999. Die Option -o öffnet die index.html-Seite in einem Webbrowser. Wenn index.html nicht existiert, wird stattdessen das Verzeichnis angezeigt.

Eine weitere Möglichkeit dies zu erreichen, besteht darin, das Python-Modul http.server zu verwenden.

Um dies zu tun:

1. Führen Sie den folgenden Befehl aus, um zu überprüfen, ob Python bereits installiert ist:

   bash

   python -V
   # If the above fails, try:
   python3 -V
   # Or, if the "py" command is available, try:
   py -3 -V
   

2. Wenn Python nicht installiert ist, müssen Sie es installieren. Folgen Sie den Download-Anweisungen in der Python-Dokumentation (wir haben auch detailliertere Erklärungen in unserem Django-Tutorial), und führen Sie anschließend die obigen Befehle erneut aus, um zu überprüfen, ob die Installation erfolgreich war.

3. Wenn Python eingerichtet ist, navigieren Sie mit dem Befehl cd zu dem Verzeichnis, das den Website-Code enthält, den Sie testen möchten.

   bash

   # include the directory name to enter it, for example
   cd Desktop
   # use two dots to jump up one directory level if you need to
   cd ..
   

4. Geben Sie den Befehl ein, um den Server in diesem Verzeichnis zu starten:

   bash

   # On Windows, try "python -m http.server" or "py -3 -m http.server"
   python3 -m http.server
   

5. Standardmäßig werden hierdurch die Inhalte des Verzeichnisses auf einem lokalen Webserver auf Port 8000 ausgeführt. Sie können auf diesen Server zugreifen, indem Sie die URL localhost:8000 in Ihrem Webbrowser aufrufen. Hier sehen Sie die Inhalte des Verzeichnisses aufgelistet - klicken Sie auf die HTML-Datei, die Sie ausführen möchten.

Der beste Ansatz für die Arbeit mit serverseitigen Sprachen wie Python, PHP oder JavaScript hängt von der verwendeten serverseitigen Sprache ab und davon, ob Sie mit einem Webframework oder "stand-alone" Code arbeiten.

Wenn Sie mit einem Webframework arbeiten, bietet das Framework in der Regel seinen eigenen Entwicklungsserver. Zum Beispiel kommen die folgenden Sprachen/Frameworks mit einem Entwicklungsserver:

• Python-Webframeworks, wie Django, Flask und Pyramid.

• Node/JavaScript-Frameworks wie Express Web Framework (Node.js/JavaScript)

• PHP hat seinen eigenen eingebauten Entwicklungsserver:

  bash

  cd path/to/your/php/code
  php -S localhost:8000
  

Wenn Sie nicht direkt mit einem serverseitigen Framework oder einer Programmiersprache arbeiten, die einen Entwicklungsserver bietet, kann das http.server-Modul von Python auch verwendet werden, um serverseitigen Code in Sprachen wie Python, PHP, JavaScript usw. zu testen, indem serverseitige Common Gateway Interface (CGI)-Skripte aufgerufen werden. Für Beispiele zur Nutzung dieser Funktion siehe Execute a Script Remotely Through the Common Gateway Interface (CGI) in How to Launch an HTTP Server in One Line of Python Code auf realpython.com.