Ihre erste Website hinzufügen

In ServBay ist das Hinzufügen einer neuen Website zum Start Ihres lokalen Entwicklungsprojekts einfach und intuitiv. Diese Dokumentation führt Sie Schritt für Schritt durch das Hinzufügen Ihrer ersten Website in ServBay – inklusive Bedienungsanleitung, wichtiger Konfigurationen und hilfreicher Tipps.

Egal ob Sie PHP-, Node.js- oder statische Seiten entwickeln oder einen Reverse Proxy bzw. eine Weiterleitung einrichten möchten, ServBay bietet Ihnen hierfür flexible Unterstützung.

Überblick

ServBay bietet Webentwicklern eine leistungsstarke und einfach zu verwaltende lokale Entwicklungsumgebung. Die benutzerfreundliche grafische Oberfläche (GUI) ermöglicht es, mehrere lokale Websites unkompliziert hinzuzufügen, zu konfigurieren und zu verwalten. Befolgen Sie die folgenden Schritte, um schnell Ihre erste lokale Website in ServBay anzulegen und projektspezifische Einstellungen vorzunehmen.

Voraussetzungen

Bevor Sie beginnen, stellen Sie bitte sicher:

• Sie haben die ServBay-Anwendung erfolgreich unter macOS installiert und gestartet.

Schritte zum Hinzufügen einer Website

Folgen Sie diesen detaillierten Schritten, um mit der ServBay-GUI eine neue Website einzurichten:

Schritt 1: ServBay-Anwendung öffnen

Suchen Sie das ServBay-Icon in Ihrem macOS-Programme-Ordner und doppelklicken Sie darauf, um die Anwendung zu öffnen.

Schritt 2: Zum Webseiten-Verwaltungsbereich navigieren

Nach dem Start erscheint das Hauptfenster der ServBay-Anwendung. Klicken Sie im Navigationsmenü auf der linken Seite auf den Punkt Websites. Das führt Sie direkt in die Website-Verwaltung von ServBay.

Schritt 3: Neue Website anlegen

Suchen Sie auf der Verwaltungsseite der Websites unten links nach der +-Schaltfläche und klicken Sie darauf. Auf der rechten Seite erscheint daraufhin ein neues Formularfeld, in dem Sie die Konfigurationsdetails der neuen Website eintragen können.

Schritt 4: Website-Einstellungen konfigurieren

Im neuen Website-Konfigurationsformular geben Sie folgende Schlüsselinformationen ein oder wählen Sie sie aus:

1. Name: Vergeben Sie einen leicht erkennbaren Namen für Ihre lokale Website. Dieser dient ausschließlich zur internen Verwaltung und Unterscheidung in ServBay.
2. Domain: Tragen Sie die Domain ein, unter der Ihre Seite lokal erreichbar sein soll. Um Kollisionen mit echten Domains zu vermeiden, wird empfohlen, eine .demo- oder von ServBay vorbelegte lokale TLD wie servbay.demo oder myproject.servbay.demo zu wählen. ServBay übernimmt die lokale DNS-Auflösung, sodass Ihr Projekt über diese Domain im Browser erreichbar ist.
3. Protokoll: Wählen Sie, welche Protokolle Ihre Website unterstützt. Standardmäßig ist HTTP/HTTPS voreingestellt; ServBay richtet automatisch HTTPS lokal ein.
4. Anforderungsart SSL-Zertifikat: Lokales SSL/TLS für Ihre Website konfigurieren.
   • ServBay CA: Empfohlen für lokale Entwicklung. ServBay generiert und verwaltet automatisch ein SSL-Zertifikat, das von der eigenen ServBay Root CA signiert wird. Sie müssen lediglich das ServBay Root-Zertifikat (ServBay User CA oder ServBay Public CA) auf Ihrem System als vertrauenswürdig einstufen, um warnungsfreie HTTPS-Verbindungen zu ermöglichen.
   • ACME: Möchten Sie eine produktionsnahe Umgebung simulieren, können Sie via ACME (z.B. Let's Encrypt, ZeroSSL, Google Trust Services) ein echtes, öffentlich vertrauenswürdiges Zertifikat für Ihre lokale Domain erstellen (sofern Ihre Domain öffentlich erreichbar und auf Ihre ServBay-Instanz zeigt). ServBay unterstützt automatisiertes Beantragen und Verlängern solcher Zertifikate via ACME.
5. Seitentyp: Wählen Sie entsprechend Ihres Technologie-Stacks den passenden Typ:
   • PHP: Für PHP-basierte Projekte (z.B. WordPress, Laravel, Symfony). ServBay konfiguriert für Sie einen Webserver (Nginx oder Apache) mit PHP-FPM zur Verarbeitung der PHP-Anfragen.
   • Node.js: Für Node.js-Anwendungen. ServBay setzt in der Regel einen Reverse Proxy ein, der Anfragen an den von Ihrer Node.js-App genutzten Port weiterleitet.
   • Statisch: Für Websites aus statischen Dateien (HTML, CSS, JavaScript). Der Webserver liefert dabei direkt die Dateien aus.
   • Reverse Proxy: Leiten Sie Anfragen für eine Domain oder einen Pfad an einen anderen lokalen oder entfernten Server/Port weiter. Praktisch für die Integration externer Dienste.
   • Weiterleitung: Leitet sämtliche Anfragen dieser Domain an eine andere URL um.
6. PHP-Version: Beim Seitentyp PHP wählen Sie aus einer Dropdown-Liste die gewünschte (bereits via ServBay installierte und laufende) PHP-Version. Prüfen Sie, ob Ihre Wunschversion im ServBay-Paketmanager installiert und aktiviert ist.
7. URL-Rewrite (Pseudostatische Regel): Viele moderne Web-Frameworks und Content Management Systeme (CMS) bauen auf schöne URLs (z.B. /about statt /index.php?page=about) und benötigen Rewrite-Regeln. ServBay bietet Presets für gängige Anwendungen wie Laravel, WordPress, Discuz! etc., die Sie direkt auswählen können. Ist Ihr System nicht dabei oder benötigen Sie eigene Regeln, passen Sie diese manuell in den Webserver-Konfigurationsdateien (Nginx/Apache) an.
8. Root-Verzeichnis: Legen Sie das Verzeichnis fest, in dem sich die Dateien Ihrer Website befinden. Das ist das Startverzeichnis, aus dem der Webserver Dateien ausliefert. Wir empfehlen, Ihre Projektdateien im Standardordner www von ServBay zu speichern, z.B. /Applications/ServBay/www/servbay-demo. Stellen Sie sicher, dass der Pfad existiert und ServBay-Lesezugriff hat.

WARNING

Für Entwickler, die Frameworks wie Laravel verwenden: Stellen Sie sicher, dass das Root-Verzeichnis auf den public-Ordner zeigt, das die Datei index.php enthält – nicht auf das Projekt-Stammverzeichnis.

Schritt 5: Website speichern und aktivieren

Haben Sie alle Daten geprüft und korrekt eingetragen, klicken Sie auf Hinzufügen am Ende des Formulars. ServBay erstellt und läd die Webseitenkonfiguration automatisch in den Webserver (z.B. Nginx oder Apache) und aktualisiert die lokale DNS-Einstellung.

Nach dem Speichern erscheint Ihre neue Website im Webseiten-Listenbereich. Über das Browser-Symbol oben rechts können Sie Ihre Website direkt aufrufen.

Schritt 6: Websites mit Schnellaktionen verwalten

Jede Website in der Liste erhält praktische Schnellaktions-Buttons, um lokale Entwicklungsabläufe effizient zu gestalten:

1. Mit IDE öffnen: Öffnet direkt das Root-Verzeichnis der Website im voreingestellten Code-Editor oder IDE.
2. Im Browser öffnen: Öffnet sofort die Website-URL im Standard-Webbrowser.
3. Webserver-Logs anzeigen: Zeigt Zugriff- und Fehlerprotokolle der Website an – ideal zum Debuggen.
4. Website pausieren/starten: Temporär deaktivieren oder wieder aktivieren.
5. Website löschen: Entfernt die Website-Konfiguration aus ServBay (die eigentlichen Dateien bleiben erhalten).

Beispiel: Eine statische HTML-Website anlegen

Zum Testen Ihrer neuen Website können Sie folgenden simplen Schnellstart durchführen:

1. Fügen Sie eine Website wie beschrieben hinzu – z.B. mit Domain servbay.demo, Typ statisch und Root-Verzeichnis /Applications/ServBay/www/servbay-demo-static.

2. Legen Sie auf Ihrem Dateisystem diesen Ordner /Applications/ServBay/www/servbay-demo-static an.

3. Erstellen Sie darin eine Datei mit dem Namen index.html.

4. Öffnen Sie index.html in einem Texteditor und fügen Sie folgenden einfachen HTML-Code ein:

   <!DOCTYPE html>
   <html>
   <head>
       <title>ServBay Static Test</title>
   </head>
   <body>
       <h1>Herzlichen Glückwunsch! Ihre erste ServBay-Webseite läuft erfolgreich!</h1>
       <p>Wenn Sie diese Seite sehen, wurde Ihre statische Website durch ServBay korrekt eingerichtet und bereitgestellt.</p>
   </body>
   </html>

5. Speichern Sie die index.html.

6. Wechseln Sie zurück zum Website-Verwaltungsbereich in ServBay, suchen Sie servbay.demo und klicken Sie auf das Browser-Symbol bei den Schnellaktionen.

7. Ihr Browser sollte nun http://servbay.demo (oder https://servbay.demo – je nach SSL-Einstellung) öffnen und den Inhalt der von Ihnen erstellten index.html anzeigen.

Hinweise

• Domain-Kollisionen: Vermeiden Sie Domains, die mit Ihrem lokalen Netzwerk oder VPN kollidieren könnten. Die Endung .demo ist eine sichere Wahl.
• Root-Verzeichnis-Berechtigungen: Stellen Sie sicher, dass der ServBay-User (in der Regel Ihr aktueller Benutzer) über Leserechte im Website-Root sowie allen Unterdateien verfügt.
• Portbelegung: ServBay verwendet standardmäßig Ports 80 (HTTP) und 443 (HTTPS). Sind diese Ports durch andere Programme belegt, kann der Webserver eventuell nicht starten oder die Website ist nicht erreichbar. Schließen Sie gegebenenfalls andere Programme, die diese Ports nutzen.
• ServBay CA-Vertrauen: Möchten Sie HTTPS ohne Browserwarnung nutzen und setzen auf ServBay CA, müssen Sie das ServBay CA-Zertifikat unter macOS als vertrauenswürdig einstufen. Eine Anleitung dazu finden Sie in der offiziellen ServBay-Dokumentation.

FAQ – Häufig gestellte Fragen

• F: Warum erhalte ich beim Aufruf meiner Website eine Meldung wie HTTP Error 403 - Forbidden oder HTTP Error 404 - File not found?
  • A: Dies ist ein häufiger Fehler von Entwicklern.
  • Prüfen Sie zunächst, ob das Root-Verzeichnis korrekt zugeordnet ist. Bei fast allen modernen Frameworks (z.B. Laravel, Symfony, CakePHP) gilt aus Sicherheits- und Strukturgründen: Das Projekt-Stammverzeichnis, das Dateien wie vendor, composer.json oder package.json enthält, ist nicht automatisch das Web-Root/der faktische Einstiegspunkt der Website.
  • Weisen Sie daher das Root-Verzeichnis gezielt auf den Ordner zu, der die eigentliche Startdatei enthält (index.php, index.htm oder index.html).
  • Typische Einstiegspunkte sind: public, web, www, htdocs, wwwroot, webroot u.a.
• F: Ich habe eine Website hinzugefügt, aber der Browser meldet „Diese Website ist nicht erreichbar“ oder „Verbindung wurde abgelehnt“?
  • A: Prüfen Sie, ob ServBay läuft und der Webserver (Caddy/Nginx/Apache) aktiv ist (im ServBay-Hauptfenster sichtbar).
  • Achten Sie darauf, die exakt gleiche Domain im Browser zu öffnen, wie in ServBay konfiguriert.
  • Kontrollieren Sie, ob die betreffende Website in der Liste als „aktiv“ (und nicht pausiert) angezeigt wird.
  • Prüfen Sie, ob der Pfad zum Website-Root korrekt gesetzt und dort eine Index-Datei (z.B. index.html, index.php) vorhanden ist.
  • Schauen Sie, ob die Ports 80 oder 443 von anderen Programmen belegt sind.
• F: Meine PHP-Website funktioniert nicht wie erwartet, die Seite bleibt leer oder Dateien werden zum Download angeboten?
  • A: Prüfen Sie, ob im Website-Setup die richtige PHP-Version gewählt ist und diese über den ServBay-Paketmanager installiert sowie aktiviert ist.
  • Überprüfen Sie die Dateirechte im Root-Verzeichnis.
  • Schauen Sie in die Webserver-Logs (über Schnellaktion), ob PHP-Fehler auftauchen.
  • Stellen Sie sicher, dass Ihr Projekt z.B. über eine index.php oder eine von ServBay als Startdatei erkannte Datei verfügt.
• F: Ich habe HTTPS eingerichtet, aber der Browser zeigt eine Zertifikatswarnung an?
  • A: Wenn Sie ServBay CA nutzen, müssen Sie das ServBay-Root-Zertifikat im Betriebssystem oder Browser als vertrauenswürdig einstufen. Die nötigen Schritte dafür finden Sie in der offiziellen ServBay-Dokumentation.
  • Bei der Nutzung von ACME stellen Sie sicher, dass Ihre Domain korrekt auf die ServBay-Instanz zeigt und das Zertifikat erfolgreich beantragt und installiert wurde. Details hierzu finden Sie in den ServBay-Logs für den ACME-Prozess.
• F: Meine URL-Rewrite-Regeln funktionieren nicht, sodass Seiten nicht erreichbar sind?
  • A: Prüfen Sie, ob Sie beim Setup die passenden Rewrite-Regeln für Ihr Framework/Ihre Anwendung gewählt haben.
  • Bei Apache stellen Sie sicher, dass eine .htaccess-Datei vorhanden und deren Nutzung in der ServBay-Apache-Konfiguration erlaubt ist.
  • Unter Nginx/Caddy sind die Regeln Teil der von ServBay generierten Webserver-Konfiguration – prüfen Sie, ob diese korrekt angewendet wurden.

Zusammenfassung

Wenn Sie die oben beschriebenen Schritte befolgt haben, sollten Sie jetzt erfolgreich Ihre erste Website in der lokalen ServBay-Entwicklungsumgebung angelegt und gestartet haben. Die leistungsfähige Website-Verwaltung, flexiblen Konfigurationsmöglichkeiten (z.B. SSL-Zertifikate, Websitetyp, PHP-Version, URL-Rewrite) und praktischen Schnellaktionen von ServBay steigern Ihre Effizienz bei der lokalen Entwicklung erheblich. Entdecken Sie gerne weitere Funktionen von ServBay, wie das Paket- oder Datenbankmanagement, um Ihren lokalen Entwicklungsworkflow weiter auszubauen.