Voeg uw eerste website toe

Het toevoegen van een nieuwe website in ServBay om uw lokale ontwikkelproject te starten is eenvoudig en intuïtief. Dit document geeft u een gedetailleerde uitleg over hoe u uw eerste website toevoegt in ServBay, met uitleg van de stappen, belangrijke configuratie-opties en handige tips.

Of u nu een PHP-, Node.js-, statische website ontwikkelt, of een reverse proxy of redirect moet configureren, ServBay biedt u flexibele ondersteuning.

Overzicht

ServBay is ontworpen om webontwikkelaars een krachtig en gemakkelijk te beheren lokaal ontwikkelplatform te bieden. De gebruiksvriendelijke grafische interface (GUI) stelt u in staat om eenvoudig websites toe te voegen, te configureren en te beheren. Volg de onderstaande stappen om snel uw eerste lokale website in ServBay aan te maken en relevante instellingen naar behoefte te configureren.

Vereisten

Voordat u een website toevoegt, controleer het volgende:

• U heeft de ServBay-applicatie succesvol geïnstalleerd en gestart op uw macOS-systeem.

Stappen voor het toevoegen van een website

Hier vindt u de gedetailleerde stappen om via de ServBay GUI een nieuwe website toe te voegen:

Stap 1: Start de ServBay-applicatie

Zoek eerst het ServBay-pictogram in uw macOS-programmamap en dubbelklik om de applicatie te openen.

Stap 2: Navigeer naar het websitebeheer

Na het starten van de ServBay-app ziet u het hoofdscherm. Klik in het navigatiemenu aan de linkerkant op de optie gemarkeerd als Websites. Hiermee gaat u naar de pagina voor websitebeheer.

Stap 3: Begin met het toevoegen van een nieuwe website

Zoek rechtsonder op de pagina voor websitebeheer de +-knop en klik daarop. Aan de rechterkant verschijnt dan een nieuw formulier waar u de gedetailleerde configuratie voor de nieuwe website kunt invullen.

Stap 4: Configureer de website-instellingen

In het nieuwe websiteconfiguratieformulier vult u of selecteert u de volgende essentiële informatie in:

1. Naam: Geef uw lokale website een herkenbare naam. Dit is enkel bedoeld voor intern beheer binnen ServBay en om verschillende websites van elkaar te onderscheiden.
2. Domein: Voer de domeinnaam in waarmee u de site lokaal wilt bereiken. Om conflicten met echte domeinen te voorkomen, wordt sterk aanbevolen om .demo of een ander lokaal top-level domein (TLD) te gebruiken dat door ServBay is ingesteld, zoals servbay.demo of myproject.servbay.demo. ServBay regelt automatisch de lokale DNS-resolutie zodat u deze domeinnaam in de browser kunt gebruiken.
3. Protocol: Selecteer het (de) protocol(len) ondersteund door uw website. Standaard is dit HTTP/HTTPS, waarbij ServBay automatisch de lokale HTTPS-configuratie voor u verzorgt.
4. SSL-certificaat aanvraagmethode: Configureer de SSL/TLS-encryptie van de lokale website.
   • ServBay CA: Aanbevolen voor lokale ontwikkeling. Met de ingebouwde ServBay PKI genereert en beheert ServBay automatisch een SSL-certificaat ondertekend door het ServBay rootcertificaat. U hoeft alleen het rootcertificaat van ServBay (ServBay User CA of ServBay Public CA) te vertrouwen op uw systeem om zonder waarschuwingen via HTTPS te kunnen browsen.
   • ACME: Wilt u de productieomgeving nabootsen, dan kunt u met het ACME-protocol (zoals Let's Encrypt, ZeroSSL, Google Trust Services) een publiek vertrouwd certificaat aanvragen voor uw lokale domein (mits dit publiek toegankelijk is en naar uw lokale ServBay-installatie verwijst). ServBay ondersteunt automatische aanvraag en verlenging van certificaten via ACME.
5. Websitetype: Kies het type website gebaseerd op uw technische stack:
   • PHP: Voor PHP-gebaseerde projecten zoals WordPress, Laravel, Symfony, enz. ServBay configureert een webserver (zoals Nginx of Apache) in combinatie met PHP-FPM voor de verwerking van PHP-verzoeken.
   • Node.js: Voor Node.js-toepassingen. ServBay stelt meestal een reverse proxy in die het webverkeer doorstuurt naar de poort waarop uw Node.js-app draait.
   • Statisch: Voor websites die enkel uit statische bestanden bestaan (HTML, CSS, JavaScript enz.). De webserver bedient de bestanden direct.
   • Reverse Proxy: Hiermee kunt u verzoeken naar een bepaald domein of pad doorsturen naar een ander lokaal of extern adres en poort. Handig voor het proxy’en van andere services of applicaties.
   • Redirect: Stuur alle verzoeken naar dit domein door naar een andere URL.
6. PHP-versie: Indien u PHP als websitetype kiest, selecteert u hier de geïnstalleerde en actieve PHP-versie waarmee de scripts van deze website uitgevoerd worden. Zorg ervoor dat de gewenste PHP-versie via het softwarebeheer van ServBay is geïnstalleerd.
7. URL rewriting (rewrite rules): Veel moderne frameworks en CMS’en gebruiken URL rewriting om nette URLs te ondersteunen (bijvoorbeeld /about i.p.v. /index.php?page=about). ServBay biedt voorgedefinieerde rewrite rules voor populaire applicaties als Laravel, WordPress, Discuz!, enz. die u direct kunt selecteren. Staat uw framework/applicatie er niet bij, of heeft u eigen regels, dan kan het nodig zijn om handmatig het configuratiebestand van de webserver (Nginx of Apache) aan te passen.
8. Rootdirectory: Bepaal het fysieke pad waar de bestanden van uw website staan. Dit is de hoofdmap waar de webserver bestanden zoekt en serveert. Het is aanbevolen uw projectbestanden te plaatsen in ServBay's standaard www-folder, bijvoorbeeld /Applications/ServBay/www/servbay-demo. Controleer dat deze map bestaat en toegankelijk is voor het ServBay-proces.

WARNING

Voor ontwikkelaars die met een framework werken (zoals Laravel), let erop dat u de rootdirectory instelt op de public-map met index.php, en niet de projecthoofdmap.

Stap 5: Website opslaan en activeren

Na het invullen en checken van alle configuratie-informatie klikt u op de knop Toevoegen onderaan het formulier. ServBay genereert en laadt dan automatisch de websiteconfiguratie in de webserver (zoals Nginx of Apache) en werkt de lokale DNS-instellingen bij.

Na succesvol opslaan verschijnt de nieuwe website in de lijst. U kunt deze direct openen door op het browserpictogram te klikken.

Stap 6: Gebruik snelle acties voor beheer

ServBay biedt voor elke website in de lijst een reeks handige sneltoetsen voor efficiënt beheer van uw ontwikkelomgeving:

1. Openen met IDE: Opent de rootdirectory van de website direct in uw standaardcode-editor of IDE.
2. Open in browser: Opent de website direct in de standaard webbrowser.
3. Bekijk websitelogboeken: Bekijk eenvoudig access- en foutlogboeken van de website, handig voor debuggen.
4. Pauzeer/herstart website: Schakel tijdelijk de toegang tot de site uit of weer in.
5. Verwijder website: Verwijdert de website uit de ServBay-configuratie. Let op: dit verwijdert de fysieke bestanden van de website niet.

Eenvoudig voorbeeld: maak een statische HTML-website

Om te controleren of uw eerste website werkt, kunt u deze eenvoudige test volgen:

1. Voeg een website toe volgens bovenstaande stappen, geef het domein bijvoorbeeld servbay.demo, kies als type Statisch en als rootdirectory /Applications/ServBay/www/servbay-demo-static.

2. Maak op uw systeem deze rootdirectory aan: /Applications/ServBay/www/servbay-demo-static.

3. Maak in die map een bestand index.html.

4. Open het bestand index.html in uw teksteditor en plaats de volgende HTML-code erin:

   <!DOCTYPE html>
   <html>
   <head>
       <title>ServBay Static Test</title>
   </head>
   <body>
       <h1>Gefeliciteerd! Uw eerste ServBay-website werkt!</h1>
       <p>Als u deze pagina ziet, is ServBay juist geconfigureerd en serveert uw statische site.</p>
   </body>
   </html>

5. Sla het bestand index.html op.

6. Ga terug naar de websitebeheerinterface van ServBay, zoek de zojuist toegevoegde servbay.demo-website, en klik in de snelle acties op het browserpictogram.

7. Uw browser zou nu http://servbay.demo (of https://servbay.demo, afhankelijk van uw SSL-instelling) moeten openen, en de inhoud van uw gemaakte index.html tonen.

Aandachtspunten

• Domeinconflict: Gebruik geen domeinnamen die kunnen conflicteren met uw lokale netwerk of VPN. .demo is een veilige keuze.
• Rootdirectory-rechten: Zorg dat de gebruiker waaronder ServBay draait (meestal uw eigen gebruiker) leesrechten heeft op de opgegeven rootdirectory en submappen.
• Poortgebruik: ServBay gebruikt standaard poorten 80 (HTTP) en 443 (HTTPS). Zijn deze poorten reeds in gebruik door andere applicaties, dan kan ServBay mogelijk niet starten of is uw site niet bereikbaar. Sluit eventueel programma’s die deze poorten gebruiken.
• ServBay CA vertrouwen: Wilt u waarschuwingloos via HTTPS verbinden met het door ServBay uitgegeven certificaat, dan moet u het ServBay User CA of Public CA rootcertificaat in macOS vertrouwen. Zie de ServBay-documentatie voor instructies.

Veelgestelde vragen (FAQ)

• Q: Waarom krijg ik een HTTP Error 403 - Forbidden of HTTP Error 404 - File not found als ik mijn site bezoek?
  • A: Dit is een van de meest voorkomende fouten bij ontwikkelaars.
  • Controleer of de rootdirectory juist is ingesteld. Bij de meeste moderne frameworks (Laravel, Symfony, CakePHP enz.) is de projectroot (waar bestanden als vendor, composer.json, package.json staan) niet hetzelfde als de website root/ingang.
  • Stel de rootdirectory van de site dus goed in op de map die de echte instapbestanden bevat (index.php, index.htm, index.html).
  • Veelvoorkomende ingangs-directories zijn: public, web, www, htdocs, wwwroot, webroot, enz.
• Q: Na het toevoegen van de website krijg ik in de browser “Deze website is niet bereikbaar” of “Verbinding geweigerd”?
  • A: Controleer eerst of ServBay draait en of de webserver (Caddy/Nginx/Apache) actief is (zie hoofdscherm ServBay).
  • Controleer dat de domeinnaam precies overeenkomt met de configuratie in ServBay.
  • Kijk in de ServBay-lijst of de website op “Actief”/“Aan” staat en niet gepauzeerd is.
  • Controleer of de rootdirectory juist is en het instapbestand (bijv. index.html, index.php) aanwezig is.
  • Kijk na of poort 80 of 443 door andere programma’s wordt gebruikt.
• Q: Mijn PHP-website werkt niet correct, ik krijg een blanco pagina of bestand wordt gedownload?
  • A: Controleer of u bij de websiteconfiguratie de juiste PHP-versie geselecteerd heeft, én deze geïnstalleerd en actief is in ServBay.
  • Controleer de rechten van de bestanden in de rootdirectory.
  • Bekijk de websiteserverlogs (via de sneltoets) op PHP-fouten.
  • Zorg dat er een index.php of een ander standaard instapbestand aanwezig is.
• Q: Ik heb HTTPS ingesteld, maar de browser geeft een certificaatwaarschuwing?
  • A: Bij gebruik van ServBay CA moet u het ServBay rootcertificaat op OS-niveau of in de browser vertrouwen. Zie de handleiding in de ServBay-documentatie.
  • Bij gebruik van ACME: verifieer dat het domein naar ServBay verwijst en certficaten correct zijn geïnstalleerd. Controleer de ServBay-logboeken voor meer informatie.
• Q: De URL-rewrite-regels werken niet en pagina’s zijn niet bereikbaar?
  • A: Controleer of u de juiste rewrite-regels voor uw CMS of framework geselecteerd heeft bij de websiteconfiguratie.
  • Gebruikt u Apache, zorg dan dat er een .htaccess-bestand staat in uw rootdirectory of submap, én dat de Apache-configuratie in ServBay .htaccess toestaat.
  • Bij Nginx of Caddy staan rewrite-regels meestal in het configuratiebestand dat ServBay aanmaakt; controleer of ze correct geladen zijn.

Samenvatting

Door deze stappen te volgen, heeft u succesvol uw eerste website toegevoegd en gestart in de lokale ServBay-ontwikkelomgeving. Dankzij de krachtige websitemanagement, flexibele opties (zoals SSL-certificaten, website type, PHP-versies, URL rewriting) en handige sneltoetsen van ServBay, wordt uw lokale ontwikkelproces aanzienlijk efficiënter. Blijf vooral verder verkennen: ontdek ook ServBay’s functies voor software- en databasebeheer om een volledige lokale ontwikkelworkflow op te bouwen.