• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Cómo crear un Virtual Host con Apache para WampServer 3

virtual host wamp

Es importante poder tener un Servidor Local para comenzar a crear un proyecto web desde cero para así poder realizar pruebas que eviten cometer errores online.

En este tutorial aprenderemos a crear un Hosting Virtual con la ayuda del servidor web Apache en Windows.

Para ello, lo primero que vamos a realizar, es una copia de nuestra carpeta Wamp antigua (en caso de tenerla) y luego desinstalar WampServer. Tarde o después hay que actualizar el Wamp para poder tener una mayor versión de PHP y MySQL que nos va a requerir ciertos programas o frameworks, como por ejemplo si vamos a utilizar Laravel 5.

Pasos para instalar WampServer 3

  1. Descargamos el archivo WampServer 3 desde su página oficial, en mi caso la de 64 BITS.
  2. Descargamos un editor de texto, recomiendo el editor gratuito Notepad++.
  3. Abrimos el instalador de WampServer64 y le decimos que lo instale en la unidad C: de nuestro PC. Cambié el nombre de wamp64 por wamp, es opcional, luego las rutas las haré con este cambio.
  4. Cuando esté finalizando la instalación nos preguntará si queremos cambiar de navegador para Wamp, le decimos que sí, pues Internet Explorer no lo queremos ver ni de cerca. Yo escogí Chrome siguiendo la ruta C:\Archivos de programa (x86)\Google\Chrome\Application\chrome.exe.
  5. Luego nos preguntará si queremos cambiar nuestro editor de texto, nuevamente decimos que sí. Escogemos Notepad++ siguiendo la ruta C:\Archivos de programa\Notepad++\notepad++.exe.

Una vez instalado WampServer lo abrimos y entramos en localhost a través del navegador. Veremos algo parecido a la siguiente imagen, yo lo tengo en versión modern y con PHP 7.

En diferencia a versiones anteriores, si ahora ponemos un proyecto dentro de wamp->www e intentamos entrar como siempre poniendo localhost/cualquierproyecto, no nos llevará al proyecto o nos mostrará algún error. Una forma de solucionarlo es ir a la barra inferior de tareas y sobre el icono verde del Wamp hacer clic derecho y seguir la ruta Wamp Settings->Add localhost in url. Una vez activada, probamos a entrar y si nos debería dejar. Pero si volvemos a entrar a localhost, en la parte de abajo veremos una advertencia que dice: "Es una mala idea añadir localhost en la url para poner en marcha proyectos. Lo mejor es definir un VirtualHost".

Como no queremos que nos muestre esta advertencia y queremos hacer las cosas bien, no activamos Add localhost in url. Para los que vais a pasar un proyecto del Wamp viejo al nuevo, recordar también copiar y pegar la carpeta de la base de datos del proyecto en C:\wamp\bin\mysql\mysql5.7.14\data.

Pasos para crear un Virtual Host

  1. Dentro de la unidad C: de nuestro PC, creamos una carpeta llamada virtualhost. Quedará junto a nuestra carpeta de wamp.
  2. Luego seguimos la ruta en nuestro PC C:\Windows\System32\drivers\etc\ y abrimos el archivo hosts con el editor de texto Notepad++. Una vez abierto nos aparecerá lo siguiente:
  3. En este archivo, al final, agregamos nuestro Virtual Host. Os paso una imagen para que lo veáis mejor. En mi caso, el Virtual Host que he creado, lo he llamado iborra.local. Es decir, agregaremos nuestro host apuntando a 127.0.0.1 que es la dirección IP de la máquina local, y después el nombre de nuestro host. Podemos agregar los hosts que deseemos pero siempre apuntando a 127.0.0.1

    Os paso el código del archivo completo. Al guardar nos pedirá permisos de administrador.

    # Copyright (c) 1993-2009 Microsoft Corp.
    #
    # This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
    #
    # This file contains the mappings of IP addresses to host names. Each
    # entry should be kept on an individual line. The IP address should
    # be placed in the first column followed by the corresponding host name.
    # The IP address and the host name should be separated by at least one
    # space.
    #
    # Additionally, comments (such as these) may be inserted on individual
    # lines or following the machine name denoted by a '#' symbol.
    #
    # For example:
    #
    #      102.54.94.97     rhino.acme.com          # source server
    #       38.25.63.10     x.acme.com              # x client host
    
    # localhost name resolution is handled within DNS itself.
    #	127.0.0.1       localhost
    #	::1             localhost
    127.0.0.1           iborra.local
    
  4. Ahora debemos modificar el archivo de configuración de Apache, para ello, seguimos la ruta C:\wamp\bin\apache\apache2.4.23\conf\httpd.conf. Abrimos el archivo, buscamos las siguientes dos líneas y eliminamos el # de la segunda línea, de normal, no lo debe llevar pero nos aseguramos:
  5. # Virtual hosts
    #Include conf/extra/httpd-vhosts.conf
    
    lo cambiamos por:
    
    # Virtual hosts
    Include conf/extra/httpd-vhosts.conf
    

    También, dentro del mismo archivo, debemos asegurarnos de que el módulo Rewrite está habilitado, para ello buscamos la siguiente línea, si no está comentada al inicio de la línea con el signo # es que está habilitado el módulo. Guardamos los cambios:

    LoadModule rewrite_module modules/mod_rewrite.so
    
  6. Lo siguiente será modificar el archivo de configuración que nos provee Wamp, seguimos la ruta C:\wamp\bin\apache\apache2.4.23\conf\extra\httpd-vhosts.conf. Abrimos el archivo con el editor de texto y veremos lo siguiente:
  7. Es en este archivo donde alojaremos cada uno de los Host Virtuales que creemos, lo haremos de la siguiente manera. Primero agregamos la directiva Directory, es aquí donde activaremos el uso de URL’s amigables, lo agregamos antes de la configuración de NameVirtualHost, y es aquí donde debemos recordar el nombre que le establecimos a nuestra carpeta.

    <Directory c:/virtualhost>
    AllowOverride All
    Require all granted
    Allow from all
    </Directory>
    

    Si queréis cambiar el directorio para situar vuestros trabajos en la carpeta de proyectos de Wamp, se pondría el siguiente código.

    <Directory c:/wamp/www>
    AllowOverride All
    Require all granted
    Allow from all
    </Directory>
    

    Lo siguiente es agregar nuestro Virtual Host, después de Directory.

    <VirtualHost *:80>
    	DocumentRoot c:/virtualhost/iborra.local
    	ServerName iborra.local
    </VirtualHost>
    

    Como hemos dicho anteriormente, si queréis cambiar el directorio para situar vuestros trabajos en la carpeta de proyectos de Wamp, se pondría el siguiente código.

    <VirtualHost *:80>
    	DocumentRoot c:/wamp/www/iborra.local
    	ServerName iborra.local
    </VirtualHost>
    

    Recordar sustituir iborra.local por el nombre de vuestro proyecto y guardar el archivo. El puerto donde escucha Apache por defecto es 80, si debéis cambiarlo sustituir el número. En definitiva, el archivo debería quedar como os paso en la siguiente imagen, os pongo el ejemplo de los dos directorios:

    Os paso el código del archivo completo con el directorio virtualhost.

    # Virtual Hosts
    #
    
    <VirtualHost *:80>
    	ServerName localhost
    	DocumentRoot c:/wamp/www
    	<Directory  "c:/wamp/www/">
    		Options +Indexes +Includes +FollowSymLinks +MultiViews
    		AllowOverride All
    		Require local
    	</Directory>
    </VirtualHost>
    #
    
    <Directory c:/virtualhost>
    AllowOverride All
    Require all granted
    Allow from all
    </Directory>
    <VirtualHost *:80>
    	DocumentRoot c:/virtualhost/iborra.local
    	ServerName iborra.local
    </VirtualHost>
    

    Y también os paso el código del archivo completo con el directorio en la carpeta de proyectos de Wamp.

    # Virtual Hosts
    #
    
    <VirtualHost *:80>
    	ServerName localhost
    	DocumentRoot c:/wamp/www
    	<Directory  "c:/wamp/www/">
    		Options +Indexes +Includes +FollowSymLinks +MultiViews
    		AllowOverride All
    		Require local
    	</Directory>
    </VirtualHost>
    #
    
    <Directory c:/wamp/www>
    AllowOverride All
    Require all granted
    Allow from all
    </Directory>
    <VirtualHost *:80>
    	DocumentRoot c:/wamp/www/iborra.local
    	ServerName iborra.local
    </VirtualHost>
    

    Podéis agregar tantos cómo queráis siguiendo la misma estructura, colocando uno detrás de otro. El inicio del código que está comentado con el signo # se deja siempre ahí. Recordar que al inicio, cuando instalé WampServer, cambié el nombre wamp64 por wamp, sino lo cambiasteis donde pone wamp en las rutas tenéis que poner wamp64.

Una vez realizados todos los pasos, reiniciamos Apache y probamos acceder a nuestro Virtual Host en un navegador. En mi caso entraría a través de http://iborra.local/ Sustituirlo según el nombre que hayáis puesto.

Algún posible error que os puede ocurrir al pasar un proyecto ya realizado al nuevo Wamp, puede tener algo que ver con el archivo .htaccess y en concreto con AddOutputFilterByType. La solución a este problema sería englobar todos los DEFLATE dentro de <IfModule mod_filter.c>...</IfModule>.

Si tenéis alguna consulta, comentarlo más abajo para solucionar dudas. Espero que os pueda servir esta explicación para instalar Wampserver 3 y configurar un Virtual Host.

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (0)

No hay Comentarios todavía en este post. Podrías ser el primero!

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code