Cuando desarrollas proyectos web sobre Windows utilizas, para acceder en el navegador a la página index de tu proyecto, algo cómo lo siguiente:
http://localhost/proyecto
En su lugar podemos emplear direcciones URL más cortas, y con mejor aspecto. Algo así como esto:
http://proyecto.APP
Esto no sólo mejora el aspecto de la barra de direcciones, sino que nos da una mejor perspectiva de los proyectos en los que estamos trabajando.
Para esto necesitamos crear lo que se conoce como un Virtual Host, o servidor virtual. Este concepto emula, en nuestro servidor local, el efecto de un servidor remoto, incluyendo el uso de una URL personalizada, que podemos elegir a nuestra conveniencia, para cada proyecto, ya que podemos crear en nuestro equipo tantos servidores virtuales cómo necesitemos. En este artículo vamos a aprender a crear un Virtual Host sobre una plataforma Windows.
REQUISITOS PREVIOS
Antes de entrar en la creación del Virtual Host propiamente dicho necesitaremos tener instalado un entorno de desarrollo que incluya, como mínimo, las últimas versiones disponibles de:
- PHP
- Apache
- MySQL
Dado que estamos trabajando sobre Windows, podemos recurrir a alguno de los programas que hay que integran estas y otras herramientas con una sola instalación. Yo te recomiendo que uses Xampp Elige siempre la última versión, ya que incluye, entre otros, PHP 7, que presenta interesantes novedades respecto a versiones anteriores.
Una alternativa a esto es WAMP, Ambas herramientas sirven, básicamente, para lo mismo, por lo que elegir una u otra es más que nada una cuestión de criterio personal. Quizá la razón por la que más usuarios de Windows se han decantado por XAMPP es porque implementó PHP 7 antes que WAMP pero, actualmente, ambos lo montan, por lo que tú eliges. En este artículo emplearemos XAMPP, que es el que yo tengo instalado.
Para seguir con este tutorial presuponemos que ya tienes instalado XAMPP, correctamente configurado y funcionando, y que tenemos un proyecto de ejemplo al que hemos llamado proyecto. Dentro de la ruta que corresponde a localhost (C:/xampp/htdocs/) tenemos un directorio llamado proyecto, y estamos accediendo, de momento, a la página principal con
http://localhost/proyecto.
MODIFICACIONES EN WINDOWS
Para crear un Virtual Host para nuestro proyecto de ejemplo debemos empezar efectuando una sencilla modificación en el sistema operativo. Debemos acceder al archivo
C:/Windows/System32/drivers/etc/hosts
y abrirlo con un editor de texto plano (Notepad ++, Sublime Text, o el que tú prefieras). Al final del archivo debes agregar lo siguiente:
127.0.0.1 proyecto.app
Si vas a crear más servidores virtuales, deberás agregar una línea similar a la anterior para cada uno, con el nombre con el que luego quieras acceder a través del navegador. Por ejemplo, si, además del que hemos agregado tienes otro proyecto llamado pruebas y quieres acceder a él con
http://pruebas.app
deberás agregar la siguiente línea:
127.0.0.1 pruebas.app
Graba los cambios y cierra este archivo.
ATENCIÓN. Dependiendo de la configuración de usuarios establecida en Windows, así como de las propias medidas restrictivas de seguridad del sistema, es posible que estés como usuario no administrador. Esto dará como resultado que no puedas grabar los cambios en un archivo del sistema desde tu editor de texto plano. Si es el caso, graba la nueva versión en otra ubicación (en el escritorio, por ejemplo) y luego, ya cerrado el editor, lo cortas y lo pegas en su ubicación definitiva, sustituyendo al que hay. Es posible que Windows te pida la contraseña de Administrador para esta operación.
Con esto ya no necesitamos tocar más el sistema operativo.
CONFIGURANDO EL SERVIDOR Apache
Cómo ya tenemos (supongo) XAMPP instalado y funcionando, vamos a abrir el panel de control.
Pulsamos el botón Config de Apache y, en el menú contextual que se abre, seleccionamos la opción Apache (httpd.conf) (la primera de la lista). Eso abrirá el fichero de configuración de Apache en el editor de texto plano que tengamos predefinido para XAMPP. Al final del archivo de configuración añadimos lo siguiente:
NameVirtualHost proyecto.app
<VirtualHost proyecto.app>
DocumentRoot C:/xampp/htdocs/proyecto/
ServerName proyecto.app
</VirtualHost>
Si quisiéramos añadir más Virtual Hosts, y siguiendo con el ejemplo que mencionábamos en el apartado anterior, lo agregaríamos después del último, así:
NameVirtualHost pruebas.app
<VirtualHost pruebas.app>
DocumentRoot C:/xampp/htdocs/pruebas/
ServerName pruebas.app
</VirtualHost>
Ahora grabamos los cambios (en este caso Windows no nos pondrá problemas para grabar) y salimos. Debemos reiniciar el servidor Apache, y ya está.
CONCLUYENDO
Suponte que, dentro del directorio C:/xampp/htdocs/proyecto tienes la página principal de tu proyecto, llamada index.php. Desde el navegador accederás a ella si tecleas:
http://localhost/proyecto
pero ahora también accedes si tecleas
http://proyecto.app
Esto tiene una ventaja. Suponte que la página principal de tu proyecto está, digamos, más «enterrada». Por ejemplo, podría estar en C:/xampp/htrdocs/proyecto/paginas_de_usuarios/vistas_generales/index.php. Por el sistema tradicional, debería teclear, en el navegador, lo siguiente:
http://localhost/proyecto/paginas_de_usuarios/vistas_generales
Sin embargo, cuando hemos modificado la configuración de Apache, habríamos puesto lo siguiente:
NameVirtualHost proyecto.app
<VirtualHost proyecto.app>
DocumentRoot C:/xampp/htdocs/proyecto/paginas_de_usuarios/vistas_generales/
ServerName proyecto.app
</VirtualHost>
Así, podemos acceder a la página principal tecleando, simplemente, lo que ya conocemos:
http://proyecto.app
De este modo, ves las líneas que hay que añadir en el fichero de configuración, y cómo definir el nombre del Virtual Host, y la raíz a la que dicho Virtual Host accederá desde el principio.
Recuerda que, si haces modificaciones en la configuración de Apache, debes detener el servidor y volver a iniciarlo.
Nota final:
Para desarrolladores que usan Laravel.
El virtual host debería quedar de esta forma.
NameVirtualHost proyecto.app
<VirtualHost proyecto.app>
DocumentRoot C:/xampp/htdocs/proyecto/public/
ServerName proyecto.app
</VirtualHost>
Con respecto al .app
Puede ser lo que gustes. Siempre y cuando no se corresponda con un tipo de dominio registrado
Por ejemplo
.com, .org, .es, .cl, .arg.
O similar.
Puesto que si lo hicieras te quedarías sin entrar en el dominio a través de la internet.