Configurar un Virtual Host en Mac

Desarrollo, Frontend, Mac

Los virtual host nos permiten tener varios sitios web en una misma máquina. De cara a trabajar con proyectos web en local, siempre es una buena opción utilizarlos para poder acceder de manera más cómoda al sitio web en cuestión cuando se están probando en los navegadores (misitio.com o misitio.local en lugar de localhost/misitio). También ayuda a simplificar la subida del sitio a producción: si trabajamos con el dominio de producción, cuando se suba el sitio web a real, no hará falta modificar las URLs en la base de datos. El proceso para configurar un Virtual Host en Mac es similar al de Windows. En este caso voy a explicar como activar los virtual host con MAMP, el servidor local con el que trabajo y con el que estoy encantada 🙂

La configuración de los virtual host cuenta de los siguientes pasos:

Activar los virtual host

Para ello hay que editar el archivo /Aplicaciones/MAMP/conf/apache/httpd.conf (con cualquier edito de texto). Buscamos las siguientes líneas:

# Virtual hosts
#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Y quitamos la almohadilla de la segunda línea (o la descomentamos, ya que el caracter ‘#’ al principio de una línea indica que esa línea es un comentario).

Asociar la URL del virtual host a la máquina local

Para ello tenemos que editar el archivo /private/etc/hosts que se encuentra en una carpeta oculta (si no se ha cambiado la configuración del Finder). Para ver los archivos ocultos en Mac puedes consultar este artículo.
Si no queremos activar la visibilidad de los archivos ocultos, podemos editar el archivo desde el Terminal ejecutando la siguiente orden:

sudo pico /etc/hosts

Como hemos usado el comando sudo, nos pedirá la contraseña de administrador, la metemos y se abrirá un editor con el contenido del archivo hosts.

Edición archivo hosts desde el Terminal

Edición archivo hosts desde el Terminal

Añadimos una última línea como la siguiente:

127.0.0.1 misitio.com

Con esto haremos que las peticiones a misition.com (el virtual host que queremos utilizar) se redireccionen a la máquina local (127.0.0.1). Una vez añadida la línea, guardamos los cambios con ctrl + O, confirmamos con Enter y cerramos el editor con ctrl + X.

Configurar el virtual host

Abrimos con un editor de textos el archivo /Aplicaciones/MAMP/conf/apache/extra/httpd-vhost.conf y añadimos lo siguiente:

<VirtualHost *:80>
ServerName localhost
DocumentRoot "/Applications/MAMP/htdocs"
</VirtualHost>

<VirtualHost *:80>
ServerName misitio.com
DocumentRoot «/Applications/MAMP/htdocs/misitio/»
</VirtualHost>

El primer bloque nos permite seguir trabajando con localhost como hasta ahora.

El segundo establece la ruta para el proyecto al que queremos añadir el virtual host. La ruta de DocumentRoot puede variar en función de la configuración que se haya puesto al instalar MAMP. Yo pongo la que viene por defecto.

Tras hacer todos estos cambios, reiniciamos los servidores desde el panel de administración de MAMP y probamos el navegador el virtual host que acabamos de crear (misitio.com).

Comprobar la configuración de los puertos en MAMP

Este paso no siempre es necesario, depende de la configuración de los puertos que tengamos en MAMP. Comprobaremos en el panel de MAMP que en Preferences > Ports tenemos establecido el puerto 80 para Apache y Nginx y el 3306 para MySQL. Si no fuera así, lo ponemos manualmente o hacemos click en el botón Set Web & MySQL ports to 80 & 3306.
Reiniciamos los servidores en el panel de MAMP y ya estaría listo el virtual host 🙂