Tema 17 · Virtual Hosts

Creación de Virtual Hosts (Dominios Locales .local)

Aprende a configurar Virtual Hosts en Apache y el archivo hosts de Windows para trabajar con dominios limpios y profesionales como mi-proyecto.local en lugar de localhost/proyecto.

Ajustes Esenciales en php.ini (Memoria, Uploads y Extensiones) Simulación de Envío de Correos Locales con Sendmail

¿Por qué Usar Virtual Hosts Locales?

Por defecto, para ver un proyecto en XAMPP accedes a http://localhost/mi-tienda/. Sin embargo, en aplicaciones reales (Laravel, WordPress, frameworks modernos) esto genera problemas con rutas absolutas como /css/estilos.css (que apuntan a la raíz de localhost y fallan).

Con un Virtual Host puedes asignar un dominio falso local, por ejemplo http://tienda.local o http://blog.test, apuntando exactamente a la carpeta pública del proyecto, simulando al 100% un servidor de producción en la nube.

Paso 1: Habilitar los Virtual Hosts en Apache

Abre C:\xampp\apache\conf\httpd.conf (desde el panel: Config ➔ Apache (httpd.conf)) y busca la línea con httpd-vhosts.conf. Asegúrate de que no tenga almohadilla (#) al principio:

# Asegúrate de que NO tenga # al inicio:
Include conf/extra/httpd-vhosts.conf

Paso 2: Declarar los Sitios en `httpd-vhosts.conf`

Abre el archivo C:\xampp\apache\conf\extra\httpd-vhosts.conf con un editor de texto (Notepad++, VS Code o Bloc de notas). Agrega tus bloques de configuración al final:

💡 Tip Crítico: Siempre define primero el bloque de localhost para que la página principal de XAMPP y phpMyAdmin no dejen de funcionar.

Paso 3: Modificar el Archivo `hosts` de Windows

Tu computadora necesita saber que cuando escribas tienda.local en el navegador, no debe buscarlo en internet, sino en tu propia máquina (127.0.0.1).

Abre el Bloc de notas o tu editor haciendo clic derecho y eligiendo "Ejecutar como Administrador".
Abre el archivo: C:\Windows\System32\drivers\etc\hosts (en el cuadro de diálogo de abrir, cambia el filtro de Documentos de texto (*.txt) a Todos los archivos (*.*)).
Al final del archivo, agrega la línea:
```
127.0.0.1    tienda.local
```
Guarda el archivo.
Reinicia el módulo de Apache en el panel de control de XAMPP.
¡Listo! Abre tu navegador e ingresa a http://tienda.local.

⚡ Configuración Completa de Virtual Hosts en Apache

Ejemplo de httpd-vhosts.conf configurando localhost y un dominio local personalizado con permisos de lectura:

httpd-vhosts.conf

Solo lectura

# 1. Mantener localhost funcionando para phpMyAdmin y dashboard
<VirtualHost *:80>
    ServerAdmin admin@localhost
    DocumentRoot "C:/xampp/htdocs"
    ServerName localhost
</VirtualHost>

# 2. Virtual Host para nuestro proyecto específico
<VirtualHost *:80>
    ServerAdmin [email protected]
    DocumentRoot "C:/xampp/htdocs/mi-tienda/public"
    ServerName tienda.local
    ServerAlias www.tienda.local

    <Directory "C:/xampp/htdocs/mi-tienda/public">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog "logs/tienda.local-error.log"
    CustomLog "logs/tienda.local-access.log" common
</VirtualHost>

🧠

Mini-Quiz de Retención

Comprueba tu comprensión antes de pasar a la siguiente lección

1 Pregunta

Pregunta 1

¿Por qué es necesario modificar el archivo "hosts" de Windows al crear un Virtual Host en Apache?

🦉

¿Tienes dudas con este tema?

Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual de XAMPP: Instalación & Pruebas y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.