En este artículo aprenderemos qué son los Virtual Hosts, cuáles son las ventajas de usarlos y cómo podemos crearlos en un entorno Windows.
¿Qué es un Virtual Host?
Un Virtual Host es, en pocas palabras, un servidor virtual. Cuando usamos un Virtual Host, podemos crear una representación de un sitio en nuestro servidor Apache, pero seguiremos probando códigos locales. Para entenderlo mejor, pensemos en lo siguiente: cuando iniciamos nuestro servidor Apache, siempre accedemos en el navegador a localhost o 127.0.0.1 (nuestro hogar dulce hogar). Con este servidor local podemos probar y trabajar en varios proyectos. Pero, imagina que necesitamos probar dos proyectos al mismo tiempo: un sitio de un restaurante y un sitio de noticias. Para hacer las pruebas necesitaríamos acceder a localhost/restaurante y localhost/noticias, por ejemplo. ¿No sería mejor si pudiéramos simular cómo quedarían esos proyectos en el servidor remoto? Por ejemplo: acceder a projeto-restaurante.com.br y projeto-noticias.com.br y probar esos dos proyectos de manera independiente? Es en esta situación que un Virtual Host podría ayudarnos, ya que crea dominios diferentes para el mismo servidor.
Ventajas de usar un Virtual Host
Como hemos visto, una de las ventajas de usar Virtual Hosts es que nos dan la posibilidad de probar más de un proyecto al mismo tiempo en nuestro servidor local. Pero, no es solo eso. Pensemos ahora en el Servidor Remoto. Generalmente imaginamos que un servidor puede contener solo un sitio. Sin embargo, si aplicamos el concepto de Virtual Hosts también en nuestro alojamiento, podremos tener más de un proyecto hospedado en el mismo servidor. Eso es increíble, ya que podremos incluso ahorrar en costos de servidores.
También podremos probar nuestros proyectos de manera más organizada, en un entorno más cercano al día a día.
Cómo crear un Virtual Host
En este artículo hablaremos sobre crear Virtual Hosts en Windows, con la ayuda de XAMPP. Lo primero que necesitamos hacer es identificar la ubicación del archivo httpd-vhosts.conf en nuestro Apache. En XAMPP, este archivo se encuentra en la carpeta
C:/xampp/apache/conf/extra/httpd-vhosts.conf.
Al acceder a este archivo, podremos crear nuestro primer host virtual. La estructura básica de un Virtual Host es la siguiente:
<VirtualHost *:80>
ServerName www.meuprojeto.com.br
ServerAlias meuprojeto.com.br
DocumentRoot "ruta_al_proyecto"
</VirtualHost>
Explicando: para crear un Virtual Host usamos una estructura parecida a la de una etiqueta HTML. Indicamos qué puerto se usará para acceder a este host. Definimos el puerto 80 porque es el estándar para acceder a sitios en la Web, representa el protocolo HTTP. Dentro de la “etiqueta” del Virtual Host definimos tres configuraciones.
1 - ServerName. Representa el nombre del servidor, es decir, el dominio que usaremos para acceder al proyecto.
2 - ServerAlias. Crea un apodo para el servidor, es decir, un nombre alternativo que redirigirá la solicitud al dominio principal, asegurando que el usuario no tenga un error de camino no encontrado si proporciona un host diferente.
3 - DocumentRoot. Define el camino dentro de nuestro ordenador para encontrar el proyecto en sí.
Esta estructura funciona en la mayoría de las ocasiones. Sin embargo, puede haber alguna situación en la que no se pueda ejecutar. Para asegurar su funcionamiento, es interesante añadir el siguiente fragmento de código a la “etiqueta” del Virtual Host:
<Directory "ruta_al_proyecto">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Require all granted
</Directory>
Después de cualquier modificación en este archivo, necesitamos reiniciar el servidor Apache para ver los cambios reflejados.
Por último, necesitamos hacer una pequeña modificación en un archivo de configuración de nuestro Sistema Operativo, el archivo hosts. Esto es necesario porque, cuando accedamos al dominio que creamos, nuestro ordenador buscará su dirección en Internet y no la encontrará o nos redirigirá a un sitio que no deseamos. Por eso, vamos a dejar claro para Windows que queremos que busque el dominio en nuestro propio servidor. El archivo hosts tiene ese objetivo. Interesante, ¿no crees?
El archivo hosts se almacena en C:/Windows/System32/drivers/etc/hosts. Este archivo tiene el siguiente patrón: el nombre del servidor a redirigir y el dominio que estamos deseando redirigir. Así que, solo hace falta añadir esta línea:
127.0.0.1 www.meuprojeto.com.br
Al editar este archivo y intentar guardarlo, puede que Windows no lo permita, debido a la falta de permisos. En ese caso, recomendamos que uses Visual Studio Code para realizar la edición. Si no es posible utilizarlo, puedes seguir el siguiente paso a paso: copia el archivo hosts y pégalo en tu Escritorio; edítalo normalmente y guárdalo. Por último, cópialo nuevamente y pégalo en la carpeta de origen, con el objetivo de reemplazarlo. Windows te pedirá permiso de Administrador. Simplemente consédelo y entonces el archivo estará guardado con los cambios.
Con esto, nuestro host virtual estará funcionando. ¿Qué opinas de poner estos conceptos en práctica con un ejemplo práctico? ¡Vamos allá!
Ejemplo Práctico
Crearemos un proyecto simple de un restaurante en una carpeta y un proyecto de un sitio de noticias en otra. Ambos tendrán un archivo index.php. El archivo del proyecto del restaurante será así:
<?php
echo "<h2>¡Hola Mundo! Bienvenido a mi Proyecto de Restaurante</h2>";
Y el archivo del proyecto de noticias será así:
<?php
echo "<h2>¡Hola Mundo! Bienvenido a mi Proyecto de Noticias</h2>";
Ahora vamos a crear un Virtual Host para cada uno de estos proyectos. Nuestro archivo httpd-vhosts.conf será de esta forma:
<VirtualHost *:80>
ServerName www.proyecto.restaurante.com.br
ServerAlias proyecto.restaurante.com.br
DocumentRoot "C:\Users\Anthony Rafael\Desktop\restaurante"
<Directory "C:\Users\Anthony Rafael\Desktop\restaurante">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
<VirtualHost *:80>
ServerName www.proyecto.noticias.com.br
ServerAlias proyecto.noticias.com.br
DocumentRoot "C:\Users\Anthony Rafael\Desktop\noticias"
<Directory "C:\Users\Anthony Rafael\Desktop\noticias">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
Observa que lo que realmente varía entre uno y otro son las rutas hacia los proyectos y el nombre del dominio que estamos creando. Solo falta añadir estos nuevos dominios al archivo hosts, que será así:
127.0.0.1 www.proyecto.restaurante.com.br
127.0.0.1 www.proyecto.noticias.com.br
Un detalle importante: observa que hemos añadido en este archivo el dominio que está en ServerName, al ser el identificador principal de nuestro host. Después de realizar estos cambios, solo hay que reiniciar el Apache.
Ahora, si escribimos en nuestro navegador la dirección www.proyecto.restaurante.com.br, se devolverá lo siguiente:
Y al acceder a www.projeto.noticias.com.br veremos lo siguiente en la pantalla:
¡Excelente! Los dos Virtual Hosts están siendo identificados. Lo mejor es que los dos servidores están siendo ejecutados al mismo tiempo. Así, podemos realizar cambios en un proyecto y se reflejarán de inmediato, sin interferir en la estructura o funcionalidad del otro. ¡Increíble, no crees?
Utilizar Virtual Hosts ayuda mucho en nuestro desarrollo. Realiza pruebas en tu servidor Apache y utiliza este recurso siempre que lo necesites.
En este artículo mostramos cómo configurar Virtual Hosts en Windows. Pero, ¿y si quisiéramos configurarlos en Linux? Hablaremos sobre eso en nuestro próximo artículo, ¡hasta entonces!