Ajouter votre premier site web

Avec ServBay, créer un nouveau site web pour débuter votre projet de développement local est rapide et intuitif. Ce guide détaillé vous explique comment ajouter votre premier site web dans ServBay, y compris les étapes à suivre, les options de configuration importantes et quelques astuces pratiques.

Que vous développiez en PHP, Node.js, pour un site statique ou que vous ayez besoin d’un proxy inverse ou d’une redirection, ServBay propose un support flexible adapté à votre flux de travail.

Aperçu

ServBay a été conçu pour offrir aux développeurs web un environnement de développement local puissant et facile à gérer. Son interface graphique conviviale (GUI) vous permet d’ajouter, de configurer et de gérer facilement plusieurs sites locaux. En suivant les étapes ci-dessous, vous pourrez créer rapidement votre premier site local dans ServBay et configurer les paramètres adaptés à votre projet.

Prérequis

Avant de commencer, assurez-vous que :

• Vous avez installé et lancé avec succès l’application ServBay sur votre macOS.

Étapes pour ajouter un site web

Voici les étapes à suivre via la GUI de ServBay pour ajouter un nouveau site web :

Étape 1 : Ouvrir l’application ServBay

Tout d’abord, localisez l’icône ServBay dans le dossier Applications de votre macOS et double-cliquez pour ouvrir l’application.

Étape 2 : Accéder à la gestion des sites

Après le lancement de ServBay, vous verrez l’écran principal. Dans le menu de navigation à gauche, cliquez sur l’option Sites. Cette action vous dirigera vers la page de gestion des sites de ServBay.

Étape 3 : Commencer l’ajout d’un nouveau site

Sur la page de gestion des sites, localisez et cliquez sur le bouton + en bas à gauche. Un nouveau formulaire de configuration apparaîtra alors à droite pour saisir les paramètres détaillés de votre nouveau site web.

Étape 4 : Configurer les paramètres du site

Dans le formulaire de configuration, vous devrez renseigner ou sélectionner les informations suivantes :

1. Nom : Donnez à votre site local un nom reconnaissable. Il sert uniquement à l’organisation interne des sites dans ServBay.
2. Nom de domaine : Saisissez le nom de domaine souhaité pour l’accès local. Pour éviter tout conflit avec des domaines existants, il est fortement recommandé d’utiliser .demo ou d’autres TLD locaux configurés par ServBay, comme servbay.demo ou myproject.servbay.demo. ServBay gère automatiquement la résolution DNS locale, vous permettant d’accéder à votre site via ce domaine dans le navigateur.
3. Protocole : Choisissez le protocole que le site doit prendre en charge. Par défaut, HTTP/HTTPS est sélectionné ; ServBay configure automatiquement le HTTPS local.
4. Méthode de demande de certificat SSL : Configurez le chiffrement SSL/TLS pour votre site local.
   • ServBay CA : Recommandé pour le développement local. ServBay générera et gérera automatiquement un certificat SSL signé par l’autorité de certification intégrée. Il suffit de faire confiance au certificat racine de ServBay (ServBay User CA ou ServBay Public CA) sur votre système pour profiter du HTTPS sans avertissement dans votre navigateur.
   • ACME : Pour simuler un environnement de production, vous pouvez utiliser ACME (Let’s Encrypt, ZeroSSL, Google Trust Services, etc.) afin d’obtenir des certificats publics réels pour votre nom de domaine local (à condition qu’il soit accessible publiquement et pointe vers votre instance ServBay). ServBay supporte la demande et le renouvellement automatique des certificats via ACME.
5. Type de site : Sélectionnez le type correspondant à votre stack technique :
   • PHP : Pour les projets basés sur PHP : WordPress, Laravel, Symfony, etc. ServBay configure automatiquement un serveur web (Nginx ou Apache) avec PHP-FPM pour traiter les requêtes PHP.
   • Node.js : Pour les applications Node.js. ServBay configure généralement un proxy inverse qui transfère le trafic web vers le port écouté par votre application Node.js.
   • Statique : Pour les sites constitués uniquement de fichiers HTML, CSS, JavaScript, etc. Le serveur web servira directement ces fichiers.
   • Proxy inverse : Permet de rediriger un domaine ou un chemin donné vers une autre adresse/port (local ou distant). Pratique pour mettre en place des proxys vers d’autres services ou applications.
   • Redirection : Redirige toutes les requêtes de ce domaine vers une autre URL.
6. Version PHP : Si vous avez choisi PHP, sélectionnez la version PHP installée et en cours d’exécution via ServBay. Assurez-vous que la version désirée est déjà installée via la gestion des paquets de ServBay.
7. Règles de réécriture d’URL (URL rewriting) : La plupart des frameworks modernes et CMS requièrent des règles de réécriture d’URL pour des liens plus propres (ex : /about au lieu de /index.php?page=about). ServBay propose des règles prédéfinies pour les applications courantes (Laravel, WordPress, Discuz!, etc.) que vous pouvez appliquer directement. Sinon, vous pouvez définir vos propres règles dans la configuration du serveur web (Nginx ou Apache).
8. Répertoire racine : Indiquez le chemin physique où se trouvent les fichiers de votre site. Il s’agit du dossier de base d’où le serveur web servira les fichiers. Nous recommandons d’utiliser le dossier www par défaut de ServBay, par exemple /Applications/ServBay/www/servbay-demo. Vérifiez que ServBay a bien les droits de lecture sur ce dossier.

WARNING

Si vous développez avec un framework (par exemple Laravel), veillez à cibler le dossier public contenant le fichier index.php comme répertoire racine, plutôt que la racine du projet.

Étape 5 : Sauvegarder et activer le site

Après avoir complété et vérifié toutes les informations, cliquez sur le bouton Ajouter en bas du formulaire. ServBay générera et activera automatiquement la configuration de votre site dans son serveur web (Nginx ou Apache) et actualisera le DNS local.

Suite à une sauvegarde réussie, la configuration du site apparaîtra dans la liste des sites. Vous pourrez accéder rapidement à votre site en cliquant sur l’icône de navigateur en haut à droite.

Étape 6 : Gérer efficacement vos sites via les actions rapides

ServBay propose pour chaque site une série de boutons d’actions rapides pour un workflow de développement local efficace :

1. Ouvrir avec IDE : Ouvre rapidement le répertoire racine dans l’éditeur ou IDE par défaut.
2. Ouvrir dans le navigateur : Lance le site dans le navigateur web par défaut.
3. Afficher les logs du site : Affiche facilement les logs d’accès et d’erreur du serveur web, pratique pour le debug.
4. Suspendre/Activer le site : Désactive ou réactive temporairement l’accès au site.
5. Supprimer le site : Retire le site de la configuration ServBay (les fichiers physiques ne sont pas supprimés).

Exemple simple : créer un site HTML statique

Pour vérifier que votre premier site est bien opérationnel, vous pouvez réaliser ce test rapide :

1. Suivez les étapes précédentes pour ajouter un site, par exemple avec le domaine servbay.demo, le type Statique et le répertoire racine /Applications/ServBay/www/servbay-demo-static.

2. Dans votre système de fichiers, créez ce répertoire racine /Applications/ServBay/www/servbay-demo-static.

3. Créez un fichier nommé index.html dans ce dossier.

4. Ouvrez index.html dans un éditeur de texte et ajoutez le code HTML suivant :

   <!DOCTYPE html>
   <html>
   <head>
       <title>ServBay Static Test</title>
   </head>
   <body>
       <h1>Félicitations ! Votre premier site ServBay est opérationnel !</h1>
       <p>Si vous voyez cette page, cela signifie que ServBay a été correctement configuré et sert votre site statique.</p>
   </body>
   </html>

5. Enregistrez le fichier.

6. Retournez dans l’interface de gestion de ServBay, trouvez le site servbay.demo et cliquez sur l’icône navigateur des actions rapides.

7. Votre navigateur devrait ouvrir http://servbay.demo (ou https://servbay.demo, selon la configuration SSL) et afficher le contenu de index.html.

Points d'attention

• Conflits de domaine : Évitez d’utiliser un domaine susceptible de causer conflit avec votre réseau local ou un VPN. .demo est un choix sûr.
• Permissions sur le répertoire racine : Assurez-vous que l’utilisateur exécutant ServBay (généralement votre utilisateur actuel) a l'accès en lecture au répertoire racine du site et à ses sous-fichiers.
• Ports occupés : ServBay utilise par défaut les ports standard (HTTP 80, HTTPS 443). Si ces ports sont déjà utilisés, ServBay risque de ne pas démarrer le serveur web ou d’empêcher l'accès à vos sites. Vérifiez et libérez les ports si nécessaire.
• Confiance dans l’autorité ServBay CA : Pour un accès HTTPS sans avertissement via ServBay CA, installez/trustez le certificat racine ServBay User CA ou ServBay Public CA sur macOS. Voir la documentation ServBay pour plus d’instructions.

FAQ (Foire Aux Questions)

• Q : Pourquoi mon site affiche une erreur HTTP Error 403 - Forbidden ou HTTP Error 404 - File not found ?
  • R : C’est l’erreur la plus fréquente pour les développeurs.
  • Vérifiez d’abord que le répertoire racine pointe correctement. Dans la plupart des frameworks modernes (Laravel, Symfony, CakePHP, etc.), le dossier du projet (contenant vendor, composer.json, package.json…) n'est PAS le répertoire racine/point d’entrée du site.
  • Vous devez donc configurer le répertoire racine vers le dossier contenant réellement le fichier d’entrée (index.php, index.htm, index.html).
  • Exemples classiques de répertoires d’entrée : public, web, www, htdocs, wwwroot, webroot, etc.
• Q : J’ai ajouté un site, mais le navigateur indique “Ce site est inaccessible” ou “Connexion refusée” ?
  • R : Vérifiez que ServBay est en cours d’exécution et que le serveur web (Caddy/Nginx/Apache) fonctionne normalement (voir le statut dans ServBay).
  • Assurez-vous d'avoir saisi le même nom de domaine dans le navigateur et dans la configuration ServBay.
  • Vérifiez que le site dans la liste ne soit pas en statut “suspendu/pause”.
  • Vérifiez le chemin du répertoire racine et la présence de fichiers d’entrée (index.html, index.php, etc.).
  • Vérifiez qu’aucun autre programme n’occupe les ports 80 ou 443.
• Q : Mon site PHP ne fonctionne pas comme prévu, il affiche une page blanche ou télécharge des fichiers ?
  • R : Assurez-vous d’avoir sélectionné la bonne version PHP dans la configuration et qu’elle est bien installée et lancée via le gestionnaire de paquets ServBay.
  • Vérifiez les permissions sur les fichiers dans le répertoire racine.
  • Consultez les logs via le bouton d’action rapide pour d’éventuelles erreurs PHP.
  • Assurez-vous que votre projet comporte un index.php ou autre fichier d’index par défaut.
• Q : J’ai activé le HTTPS, mais mon navigateur affiche un avertissement sur le certificat ?
  • R : Si vous utilisez ServBay CA, ajoutez le certificat racine ServBay à votre OS ou navigateur (voir la doc ServBay pour les instructions).
  • Si vous utilisez ACME, vérifiez que le domaine pointe bien vers ServBay et que le certificat a bien été délivré. Consultez les logs ServBay pour plus de détails.
• Q : La réécriture d’URL ne fonctionne pas, mes pages sont inaccessibles ?
  • R : Vérifiez d’avoir sélectionné une règle de réécriture compatible avec votre framework/app dans la configuration du site.
  • Avec Apache, assurez-vous que le fichier .htaccess est bien présent à la racine (ou sous-dossier) et que ServBay autorise la lecture des .htaccess.
  • Avec Nginx ou Caddy, les règles sont définies dans les fichiers générés par ServBay : vérifiez que celles-ci soient bien chargées.

Conclusion

En suivant ce guide, vous avez appris à ajouter et lancer efficacement votre premier site dans l’environnement local ServBay. La gestion puissante des sites, la flexibilité de configuration (certificats SSL, types de site, version PHP, règles de réécriture…) ainsi que les actions rapides proposées par ServBay vont considérablement accélérer votre développement local. N’hésitez pas à explorer les autres fonctionnalités, comme la gestion des paquets ou des bases de données, pour perfectionner encore davantage votre workflow de développement local.