Configurar Apache y Windows para crear un host virtual

Como todo webmaster, cuando creas tu primer sitio Web tendrás que instalar un programa como WAMP o EasyPhp. Luego tienes pones tu sitio en la carpeta /www/ y de este modo puede ser accesible a través de la url http://localhost/

El problema

¿Pero qué sucede cuando desarrollamos varios sitios Web simultáneamente?

Presentación

Te encontrarás con una multitud de subcarpetas, y urls extensas como por ejemplo:
http://localhost/mi_carpeta1/.../mi_carpetaX/miproyecto/index.html

que sirve de url raíz del sitio web que se está desarrollando.

Si al igual que a mí esto te incomoda (problemas de urls relativas y absolutas que no funcionan cuando alojas tu sitio en producción, tener que escribir urls demasiado largas para acceder al sitio web, etc.), entonces este tutorial te puede ser útil.

El objetivo del tutorial

Vamos a dejar de lado las urls extensas y vamos a preferir direcciones cortas como por ejemplo: http://miproyecto.dev/

Pre-requisitos

Este tutorial ha sido escrito para personas que trabajan en entornos Windows, además aquí yo utilizo un servidor Wamp. Sin embargo, no tendrás problemas en pasarlo a otro programa.

• Se presume que tienes instalado WAMP en C:\wamp\
• Se presume además que has colocado tu proyecto en curso en C:\wamp\www\miproyecto\.
• Necesitarás un editor de texto como el bloc de notas de Windows.

Configurar el host para Windows

Abre el archivo:
C:\Windows\System32\drivers\etc\hosts

Alrededor de la línea 20 debes encontrar algo como esto:

127.0.0.1       localhost 
::1             localhost

Agrega la siguiente línea:

127.0.0.1       miproyecto.dev

Luego guarda el archivo.

Nota:
Si no puedes editar el archivo, puede que esté en modo de solo lectura.
En Vista, probablemente encuentres más problemas con la UAC. Haz una copia del archivo en tu escritorio, configúralo para poder escribir encima, haz las modificaciones, ponlo nuevamente en modo solo lectura, y reemplaza el archivo original.

Configuración de Apache

En Wamp, después de haber sido ejecutado, haz clic en el icono en la barra de tareas, haz clic en "Apache" y en el menú desplegable debe aparecer un archivo httpd.conf. Abre este archivo para hacer las modificaciones necesarias.
El fichero lo puedes encontrar en C:\wamp\bin\apache\apacheX.X.X\conf\httpd.conf.

Al final del archivo, agrega lo siguiente:
1)

##### 
## localhost 
## DOMAINE principal 
##### 
NameVirtualHost localhost  

<VirtualHost localhost>  
    DocumentRoot C:/wamp/www/ 
    ServerName localhost 
</VirtualHost>

2) y además

##### 
## miproyecto.dev 
## DOMAINE de miproyecto 
##### 
NameVirtualHost miproyecto.dev  

<VirtualHost miproyecto.dev>  
    DocumentRoot C:/wamp/www/miproyecto/ 
    ServerName miproyecto.dev 
</VirtualHost>

Nota:
Es necesario poner las 2 definiciones de host. Si solo pones la parte 2), la url http://localhost/ te conducirá también a la carpeta conteniendo tu proyecto, que no es lo que se busca, ya que necesitas acceder a la carpeta /www/.

Guarda el archivo. Luego reinicia el servidor Apache.

Resultado

Si todo salió como planeado:

• accediendo a http://localhost/ verás la visualización "normal" de la carpeta /www/
• accediendo a http://miproyecto.dev/ deberías acceder directamente a tu proyecto, antes accesible desde la dirección http://localhost/monprojet/ (que sigue siendo accesible)

Ahora ya sabes cómo hacer para agregar tantos host virtuales como proyectos en curso tengas!

Saber más

Para saber más acerca de los host virtuales bajo Apache:
http://httpd.apache.org/docs/1.3/vhosts/