Agrega tu primer sitio web

En ServBay, agregar un nuevo sitio web para iniciar tu proyecto de desarrollo local es sencillo e intuitivo. Este documento te explica en detalle cómo agregar tu primer sitio web en ServBay, incluyendo los pasos operativos, opciones de configuración importantes y algunos consejos prácticos.

Ya sea que desarrolles en PHP, Node.js, sitios estáticos, o necesites configurar proxy inverso o redirecciones, ServBay ofrece soporte flexible para todas estas necesidades.

Visión general

ServBay está diseñado para proporcionar a los desarrolladores web un entorno de desarrollo local potente y fácil de gestionar. Su interfaz gráfica de usuario (GUI), amigable e intuitiva, te permite agregar, configurar y administrar múltiples sitios locales fácilmente. Sigue los pasos a continuación para crear rápidamente tu primer sitio web local en ServBay y configura los ajustes relevantes según las necesidades de tu proyecto.

Requisitos previos

Antes de comenzar a agregar un sitio web, asegúrate de lo siguiente:

• Has instalado y ejecutado con éxito la aplicación ServBay en tu sistema macOS.

Pasos para agregar un sitio web

A continuación se describen los pasos detallados para agregar un nuevo sitio usando la GUI de ServBay:

Paso 1: Abre la aplicación ServBay

Primero, localiza el icono de ServBay en la carpeta de aplicaciones de tu macOS y haz doble clic para abrir la aplicación.

Paso 2: Navega a la interfaz de gestión de sitios web

Una vez que la aplicación de ServBay haya iniciado, verás la interfaz principal. En el menú de navegación a la izquierda, haz clic en la opción marcada como Sitios web. Esto te llevará a la página de gestión de sitios de ServBay.

Paso 3: Comienza a agregar un nuevo sitio

En la página de gestión de sitios, encuentra y haz clic en el botón + ubicado en la esquina inferior izquierda de la pantalla. Tras hacer clic, aparecerá un nuevo formulario en la parte derecha de la interfaz, donde podrás ingresar la información de configuración del nuevo sitio web.

Paso 4: Configura los ajustes del sitio web

En el formulario de configuración que aparece, deberás completar o seleccionar la siguiente información clave:

1. Nombre: Elige un nombre identificativo y fácil de reconocer para tu sitio local. Este campo se utiliza solo para la gestión interna en ServBay y para distinguir distintas configuraciones de sitios.
2. Dominio: Introduce el dominio a través del cual deseas acceder localmente a este sitio. Para evitar conflictos con dominios reales, se recomienda usar .demo u otros TLDs locales configurados por ServBay, como servbay.demo o myproject.servbay.demo. ServBay gestiona automáticamente la resolución DNS local, por lo que podrás acceder a tu sitio a través de este dominio en el navegador.
3. Protocolo: Selecciona el protocolo que admitirá el sitio. Normalmente, la opción por defecto es HTTP/HTTPS y ServBay configura automáticamente el HTTPS local.
4. Método de solicitud de certificado SSL: Configura el cifrado SSL/TLS para tu sitio local.
   • ServBay CA: Recomendado para desarrollo local. ServBay genera y gestiona automáticamente un certificado SSL emitido por su propia raíz a través de una PKI interna. Solo necesitas confiar en la raíz de ServBay (ServBay User CA o ServBay Public CA) en tu sistema para acceder al sitio vía HTTPS sin advertencias en el navegador.
   • ACME: Si necesitas simular un entorno de producción, puedes usar el protocolo ACME (como Let's Encrypt, ZeroSSL, Google Trust Services, etc.) para emitir un certificado público y real para tu dominio local (si el dominio es accesible públicamente y apunta a tu instancia local de ServBay). ServBay soporta la solicitud y renovación automática de certificados a través de ACME.
5. Tipo de sitio web: Elige el tipo según el stack tecnológico de tu proyecto:
   • PHP: Para proyectos PHP como WordPress, Laravel, Symfony, etc. ServBay configurará un servidor web (Nginx o Apache) junto a PHP-FPM para procesar peticiones PHP.
   • Node.js: Para aplicaciones Node.js. ServBay suele configurar un proxy inverso que reenvía las solicitudes web al puerto donde escucha tu app Node.js.
   • Estático: Para sitios compuestos sólo por archivos HTML, CSS, JavaScript, etc. El servidor web simplemente servirá los archivos.
   • Proxy inverso: Permite reenviar solicitudes de un dominio o ruta a otra dirección IP y puerto local o remoto. Muy útil para proxies a otros servicios o aplicaciones.
   • Redirección: Redirecciona todas las peticiones de este dominio a otra URL.
6. Versión de PHP: Si seleccionaste PHP como tipo de sitio, elige de la lista desplegable una versión de PHP que esté instalada y en ejecución. Asegúrate de haber instalado la versión de PHP que necesitas a través del gestor de paquetes de ServBay.
7. Reglas de reescritura de URL (URL amigables): La mayoría de frameworks y CMS modernos requieren reglas de reescritura para URLs amigables (por ejemplo, /about en lugar de /index.php?page=about). ServBay incluye reglas predefinidas para apps populares (Laravel, WordPress, Discuz!, etc.) que puedes aplicar directamente. Si tu framework o app no está en la lista, o necesitas reglas personalizadas, deberás editarlas manualmente en la configuración del servidor web (Nginx o Apache).
8. Directorio raíz: Indica la ruta física donde se alojarán los archivos de tu web. Es el punto de inicio desde el cual el servidor localizará y servirá los archivos. Se recomienda almacenar los archivos del proyecto en la carpeta www por defecto de ServBay, por ejemplo, /Applications/ServBay/www/servbay-demo. Asegúrate de que la carpeta exista y que el proceso de ServBay tenga permisos de lectura.

WARNING

Si utilizas un framework (como Laravel), asegúrate de asignar el directorio raíz al subdirectorio public donde está index.php, en lugar del directorio raíz del proyecto.

Paso 5: Guarda y activa el sitio web

Una vez que completes y revises toda la información de configuración, haz clic en el botón Añadir debajo del formulario. ServBay generará y cargará automáticamente la configuración del nuevo sitio en el servidor web (Nginx o Apache, según corresponda) y actualizará la configuración DNS local.

Si se guarda correctamente, la configuración de tu nuevo sitio aparecerá en el listado de sitios. Puedes hacer clic en el icono del navegador, ubicado en la parte superior derecha, para acceder rápidamente a la web.

Paso 6: Usa las acciones rápidas para administrar el sitio

ServBay ofrece para cada sitio de la lista una serie de prácticos botones de acción rápida que facilitarán la gestión del flujo de trabajo de desarrollo local:

1. Abrir con el IDE: Abre rápidamente el directorio raíz del sitio en tu editor de código o IDE predeterminado.
2. Abrir en el navegador: Accede directamente a la URL del sitio desde tu navegador web predeterminado.
3. Ver logs del sitio: Consulta fácilmente los logs de acceso y de errores asociados a este sitio web, útil para depuración.
4. Pausar/iniciar el sitio: Desactiva temporalmente el acceso al sitio o reactívalo cuando lo necesites.
5. Eliminar sitio: Elimina la configuración del sitio de ServBay. Ten en cuenta que esto no elimina los archivos físicos del sitio.

Ejemplo rápido: crear un sitio estático HTML

Para verificar si has configurado correctamente tu primer sitio web, prueba este sencillo test:

1. Agrega un sitio siguiendo los pasos anteriores; por ejemplo, utiliza el dominio servbay.demo, selecciona el tipo Estático y asigna como directorio raíz /Applications/ServBay/www/servbay-demo-static.

2. Crea la carpeta /Applications/ServBay/www/servbay-demo-static en tu sistema de archivos.

3. Dentro de esa carpeta, crea un archivo llamado index.html.

4. Abre index.html en tu editor de texto favorito y añade el siguiente código HTML:

   <!DOCTYPE html>
   <html>
   <head>
       <title>ServBay Static Test</title>
   </head>
   <body>
       <h1>¡Felicidades! ¡Tu primer sitio en ServBay está funcionando!</h1>
       <p>Si ves esta página, significa que ServBay ha sido configurado correctamente y está sirviendo tu sitio web estático.</p>
   </body>
   </html>

5. Guarda el archivo index.html.

6. Vuelve a la interfaz de gestión de sitios de ServBay, localiza el sitio servbay.demo y haz clic en el icono de navegador entre las acciones rápidas.

7. El navegador debería abrir http://servbay.demo (o https://servbay.demo, dependiendo de tu configuración de SSL) y mostrar el contenido de la página index.html que acabas de crear.

Consideraciones

• Conflictos de dominio: Evita utilizar dominios que puedan entrar en conflicto con tu red local o VPN. Usar la extensión .demo es una opción segura.
• Permisos del directorio raíz: Asegúrate de que el usuario que ejecuta ServBay (normalmente tu usuario actual) tenga permisos de lectura sobre el directorio raíz asignado al sitio y sus subarchivos.
• Puertos en uso: ServBay utiliza por defecto los puertos estándar (HTTP 80, HTTPS 443). Si otros programas ya los están usando, ServBay podría no arrancar correctamente el servidor web o tu sitio podría no estar accesible. Cierra cualquier otro programa que use dichos puertos.
• Confiar en la CA de ServBay: Si empleas la CA de ServBay y quieres evitar advertencias al usar HTTPS, tendrás que confiar (añadir como CA de confianza) la ServBay User CA o ServBay Public CA en tu macOS. La documentación de ServBay suele incluir instrucciones detalladas para realizar este proceso.

Preguntas frecuentes (FAQ)

• P: ¿Por qué al abrir mi sitio aparece HTTP Error 403 - Forbidden o HTTP Error 404 - File not found?
  • R: Es el error más común entre desarrolladores.
  • Primero, verifica que el directorio raíz esté correctamente asignado. En la mayoría de frameworks modernos (Laravel, Symfony, CakePHP, etc.), por cuestiones de seguridad y arquitectura, el directorio raíz del proyecto (donde se guardan archivos como vendor, composer.json, package.json, etc.) NO es el directorio raíz real del sitio web ni el punto de entrada.
  • Por lo tanto, asegúrate de apuntar correctamente el directorio raíz del sitio al subdirectorio que contiene el archivo de entrada real (index.php, index.htm, index.html).
  • Carpetas típicas de entrada: public, web, www, htdocs, wwwroot, webroot, etc.
• P: Añadí un sitio pero al acceder al dominio desde el navegador dice “No se puede acceder a este sitio” o “La conexión fue rechazada” ¿qué ocurre?
  • R: Verifica primero que ServBay esté en ejecución y que el estado del servidor web (Caddy/Nginx/Apache) sea correcto (visible en la interfaz principal de ServBay).
  • Asegúrate de que el dominio introducido en el navegador coincida exactamente con el configurado en ServBay.
  • Comprueba que en la lista de sitios el sitio no esté en modo “Pausado”.
  • Verifica que la ruta del directorio raíz es correcta y que contiene el archivo de entrada (como index.html, index.php).
  • Revisa si algún otro programa está utilizando los puertos 80 o 443.
• P: Mi sitio PHP no funciona correctamente, muestra una página en blanco o descarga archivos ¿qué hacer?
  • R: Asegúrate de haber seleccionado la versión de PHP correcta en la configuración del sitio, y que dicha versión está instalada y en ejecución (gestor de paquetes de ServBay).
  • Comprueba los permisos de los archivos dentro del directorio raíz.
  • Revisa los logs del sitio (accesibles desde los botones rápidos) para identificar posibles errores PHP.
  • Verifica que el proyecto tenga un index.php o el archivo configurado como índice por defecto en ServBay.
• P: Configuré HTTPS pero el navegador muestra advertencias de certificado ¿cómo lo resuelvo?
  • R: Si usas la autoridad de ServBay, debes confiar su certificado raíz en tu sistema o navegador. Consulta la documentación oficial de ServBay sobre cómo añadir la CA como confiable.
  • Si usas ACME, asegúrate de que el dominio apunte correctamente a tu instancia de ServBay y que el certificado se haya solicitado e instalado exitosamente. Consulta los logs de ServBay para detalles sobre el proceso ACME.
• P: Las reglas de reescritura de URL no funcionan y la página no es accesible ¿qué revisar?
  • R: Comprueba que hayas elegido correctamente las reglas de reescritura de URL compatibles con tu framework o app.
  • Si usas Apache, verifica que el archivo .htaccess existe en el directorio raíz (o subcarpetas) y que la configuración de Apache en ServBay permite su lectura.
  • Si usas Nginx o Caddy, normalmente las reglas se configuran en ficheros generados por ServBay; revisa que estén cargadas correctamente.

Resumen

Siguiendo los pasos de esta guía, deberías ahora poder agregar y ejecutar exitosamente tu primer sitio web en el entorno local de desarrollo de ServBay. Las potentes capacidades de administración de sitios de ServBay, sus opciones flexibles de configuración (certificados SSL, tipo de sitio, versión de PHP, reescritura de URL) y las acciones rápidas integradas, te ayudarán a incrementar la eficiencia en tu desarrollo local. Te invitamos a seguir explorando otras funciones de ServBay, como la gestión de paquetes o de bases de datos, y así construir un flujo de trabajo local más completo y productivo.