Aprendiendo a configurar Virtual Host en servidor local

Aprendiendo a configurar Virtual Host en servidor local

¡Hola a todos! Bienvenidos a una nueva entrada del blog de la escuela Espai. Hoy veremos cómo configurar Apache mediante Xampp para que permita utilizar Virtual Host en vuestro servidor local.

Antes de nada os preguntaréis para qué puede servir esto. Imaginaos los siguiente:

Se acabaron los dolores de cabeza al migrar WordPress

Comenzamos un proyecto en WordPress para un nuevo cliente, y lo habitual es que no podamos trabajar en el servidor real donde irá alojada la página (ya sea porque aún no se dispone de servicio de hosting o el dominio esté apuntando a una página antigua que se querrá sustituir). Por ello solemos trabajar en localhost, para luego hacer el traslado al servidor final y que el cliente no tenga la web fuera de servicio mientras llevamos a cabo la maquetación.

El problema de este método de trabajo es que, una vez finalizada, trasladar nuestra web hecha con WordPress suele ser un quebradero de cabeza. Para que funcione nuestra web en el nuevo servidor tendremos que modificar todas las urls que apunten al antiguo en la base de datos, de lo contrario los enlaces estarán rotos y nuestro WordPress no podrá visualizarse. Es cierto que, gracias a plugins como Duplicator, podemos automatizar este proceso. Pero Duplicator no modificará las urls internas, es decir: todas las urls que hayamos utilizado en widgets, plugins (como Visual Composer) o en nuestro css.  Por lo que tendremos que modificar las urls a mano y esta tarea puede ser bastante tediosa.

La solución está en crear un Virtual Host y trabajar desde ahí. Lo que nos permite esto es trabajar con el dominio final en nuestra propia máquina. Así al hacer la migración no tendremos que modificar ningún enlace. Pongamos por ejemplo que el dominio de nuestro cliente es «midominio.com». Lo que hacemos es que la ip de nuestro servidor local apunte a «midominio.com». La idea es engañar a WordPress. Le haremos pensar que nuestra web está alojada en ese dominio, de modo que cuando nosotros escribamos «midominio.com» en el navegador, nos redireccione a la web que estamos creando en localhost.

Así tendremos todo listo para hacer nuestro traslado. Lo único que nos deberá preocupar es que WordPress se comunique correctamente con la nueva base de datos. Es fantástico, ¿no? Se acabó sufrir al migrar WordPress.

Cómo configurar Apache para usar Virtual Host

En este caso explicaremos cómo configurar Apache para usar Virtual Host, trabajando en XAMPP para Windows.

Lo primero que haremos será abrir con el bloc de notas el archivo hosts, que se encuentra en la ruta: C:\WINDOWS\system32\drivers\etc\hosts.

Importante: ejecutar bloc de notas como administrador.

Veremos algo como esto:

hosts

Añadimos una línea con la ip de nuestro servidor (en este caso 127.0.0.1)  y a continuación el nombre de nuestro dominio. Tal y como se indica en el ejemplo.

Lo siguiente es habilitar el uso de Virtual Host en XAMPP.

Para ello abrimos el siguiente archivo C:\xampp\apache\conf\httpd.conf y descomentamos (eliminamos el símbolo #) la línea que aparece seleccionada en la siguiente imagen.

apache

Y también hay que asegurarse que la siguiente línea esté descomentada:

rewrite

Una vez hecho esto guardamos los cambios y cerramos.

Por último queda crear el servidor virtual en una de las subcarpetas que hayamos creado en el htdocs. Para ello abrimos el archivo: C:\xampp\apache\conf\extra\httpd-vhosts.conf

Y añadimos este código al final del documento.

NameVirtualHost *:80

<VirtualHost *:80>
	DocumentRoot "C:/xampp/htdocs"
	ServerName localhost
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/Miweb"
    ServerName miweb.com
    ServerAlias www.miweb.com
    <Directory "C:/xampp/htdocs/Miweb">
        AllowOverride All
        Require all Granted
        # En versiones anteriores de Apache 2.4 poner estas directivas en lugar de las 2 anteriores.
        # Order allow,deny
        # Allow from all
    </Directory>
</VirtualHost>

Tendremos que modificar el nombre de la carpeta donde esté alojada nuestra web y el dominio que queramos usar.

Con esto cuando escribamos el dominio que hemos indicado en un nevegador, éste nos llevará a nuestro propio servidor local, donde tengamos alojada la web.

Ahora podremos trabajar en nuestra máquina como si la web ya estuviera alojada en el dominio que necesite el cliente. Así cuando hagamos el traslado no tendremos que modificar ninguna url, ahorrándonos tiempo y preocupaciones.

 

3Comentarios

  • Daniel
    01/01/2019

    Hola Paco, muy bueno
    El problema que tengo es que al escribir la url en el navegador, me ejecuta el dashbord del Xampp y no encuentro error de tipeo y el hosts del Xampp tambien lo edite, tienes idea a que se puede deber ?
    Gracias y muy buen año !

  • Adrian
    13/01/2018

    Muy bueno, ahora mi pregunta es si yo tuviera un sitio en un equipo y el apache en otro que obviamente tendria otra ip como seria la configuracion?

Escribe un comentario