Cómo instalar XAMPP como servidor web local.

Autor: Luis López Sánchez

 

Resumen: En un intento de traer mayor entendimiento sobre el uso de este servidor web (XAMPP) para los que por primera vez desean empezar a utilizarlo estaremos mostrando en pasos simples como desplegarlo y algunas configuraciones extras que pueden ser útiles.

 

Link de descarga XAMPP: Download XAMPP (apachefriends.org)

Introducción

XAMPP es un paquete de software libre, que consiste principalmente en el sistema de gestión de bases de datos MySQL, el servidor web Apache y los intérpretes para lenguajes de script PHP y Perl. El nombre es en realidad un acrónimo: X (para cualquiera de los diferentes sistemas operativos), Apache, MariaDB/MySQL, PHP, Perl. A partir de la versión 5.6.15, XAMPP cambió la base de datos MySQL por MariaDB, un fork de MySQL con licencia GPL.

 

El programa se distribuye con la licencia GNU y actúa como un servidor web libre, fácil de usar y capaz de interpretar páginas dinámicas. A esta fecha, XAMPP está disponible para Microsoft Windows, GNU/Linux, Solaris y Mac OS X.

Descarga e instalación

Como ventaja frente a descargar e instalar cada componente por separado y a crear o editar sus ficheros de configuración manualmente, XAMPP sólo requiere una pequeña fracción del tiempo necesario para descargar y ejecutar un archivo ZIP, tar, exe o fkl. Puede encontrarse en versión completa o en una versión más ligera, que es portable, y permite configurar los componentes necesarios del servidor web mediante una misma y sencilla interfaz web. XAMPP se actualiza regularmente para incorporar las últimas versiones de Apache/MySQL/PHP y Perl. También incluye otros módulos como OpenSSL y phpMyAdmin.

El link ofrecido al inicio del este artículo te lleva al sitio web oficial de este producto y ahí podrá elegir de las versiones publicadas cual deseas descargar e iniciar el proceso de instalación.

 

Luego de descargar el archivo que normalmente es un archivo .exe solo queda hacer doble clic sobre él y hacer un «siguiente-siguiente» hasta el final del asistente de instalación. En el proceso los valores por defectos son excelentes para una instalación totalmente funcional con todas las opciones por lo cual no nos detendremos a explicar el proceso cambiando ningún valor.


Al final de la instalación usted podrá ejecutar el panel de control de XAMP que se encuentra por defecto en la ruta C:/xampp/xampp-control.exe , al ejecutar este ejecutable podrá ver un panel en el cual usted porá iniciar o detener los servicios que incluye XAMPP, para este caso iniciaremos solo el servicio web de Apache.


Como puede observar en la imagen al lado de cada servicio hay un botón que dice «Start» para iniciar el servicio, al hacerlo el botón cambia de nombre a «Stop» y se muestran los puertos por donde el servicio está funcionando.

Como ventaja frente a descargar e instalar cada componente por separado y a crear o editar sus ficheros de configuración manualmente, XAMPP sólo requiere una pequeña fracción del tiempo necesario para descargar y ejecutar un archivo ZIP, tar, exe o fkl. Puede encontrarse en versión completa o en una versión más ligera, que es portable, y permite configurar los componentes necesarios del servidor web mediante una misma y sencilla interfaz web. XAMPP se actualiza regularmente para incorporar las últimas versiones de Apache/MySQL/PHP y Perl. También incluye otros módulos como OpenSSL y phpMyAdmin.

El link ofrecido al inicio del este artículo te lleva al sitio web oficial de este producto y ahí podrá elegir de las versiones publicadas cual deseas descargar e iniciar el proceso de instalación.

 

Ya en este punto puedes probar que el servidor está realmente funcionando, abriendo un navegador web en tu equipo y llamando la siguiente ruta http://localhost

 

Esta palabra “localhost” simplemente el está indicando a tu navegador que lo que queremos hacer es ver si hay algún servicio web publicado en nuestra propia PC, localhost significa básicamente “equipo local”, como hemos instalado XAMPP en nuestro equipo local pues el navegador podrá mostrarte una página web de ejemplo que trae XAMPP y que se puede ver cuando el servicio esta iniciado, como se muestra en la imagen.

 

 

Note que cuando la página carga la url inicial que habíamos puesto ha cambiado ahora es http://localhost/dashboard, no se preocupe eso es una acción que ha realizado la propia página de ejemplo. Ahora bien, esta página de donde sale, donde está, este es un aspecto muy importante porque usted debe saber que el lugar donde están estos archivos es donde usted en el futuro tendrá que poner los archivos de su página web, esa para la cual usted está necesitando un servidor web como xampp.

 

Pues bien, la carpeta con nombre  “htdocs” que se encuentra en la ruta C:/xampp/ es la carpeta raíz del servidor web, todo lo que coloques ahí el servidor intentará leerlo y mostrarlo en el navegador, es este el lugar donde debes por ejemplo colocar todos los archivos de wordpress si deseas instalarlo en tu pc local.

 

Como se observa en la imagen, en esta carpeta “htdocs” por defecto vienen unos archivos y carpetas que conforman la página web de ejemplo, estos archivos puedes eliminarlos todos con seguridad para que tengas espacio limpio para tu nuevo sitio web.

 

Recuerda, solo los archivos dentro de la carpeta “htdocs” pueden ser borrados, no borres ningún otro archivo de otra carpeta.

Consejos útiles extras

Cambio de localhost por nombre de dominio

 

En ocasiones cuando estamos usando XAMPP de manera local es para ir trabajando un sitio web desde cero para luego subirlo a un servidor oficial y llamar a este sitio con una URL o nombre. Cuando este es el caso y el sitio que estamos trabajando es en WordPress no conviene llamar o invocar nuestro sitio web como “localhost” porque este valor o URL queda guardado en la base de datos como el origen desde donde se llamarán los artículos, las imágenes, etc.… por eso es una buena idea crear un registro DNS local con el nombre futuro que tendrá nuestro sitio y apuntarlo a nuestra PC local.

Pongamos un ejemplo.

Supongamos que nuestro sitio web en el futuro va a estar disponible con el nombre de URL http://mipagina.com así que en vez de que yo ponga http://localhost para ver mi sitio ahora que esta en desarrollo quiero que salga cuando yo ponga en el navegador http://mipagina.com, para eso siga los siguientes pasos.

 

Acceda a la ruta C:\Windows\System32\drivers\etc y en esta carpeta edite con permisos administrativos el archivo llamado “hosts” y dentro encontrará un contenido similar al siguiente.

# 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

Note que el archivo contiene unas explicaciones y  un ejemplo pero cada línea inicia con un símbolo #, eso significa que es solo un comentario, pero trae un ejemplo de cómo podemos hacer que un registro pueda apuntar a nuestra propia PC. Así que agreguemos al final la siguiente línea.

127.0.0.1 mipagina.com

Asegúrese de añadir esta línea al final del archivo sin que tenga un signo # delante, porque este símbolo invalida la línea y la convierte en un comentario.

Guarde los cambios y verifique que fueron permanentes.

Luego de este cambio que hemos realizado podemos hacer la misma prueba que se hizo antes con el navegador y en vez de poner http://localhost ahora podemos llamar a nuestro sitio usando la nueva url http://mipagina.com

 

En la imagen de la derecha podemos ver como usando la nueva URL http://mi pagina.com obtenemos el mismo resultado, nos abre el sitio web que trae de ejemplo XAMPP.

 

Ya de esta manera ahora puede instalar wordpress y asegurarse de estar administrando y configurando su sitio web con la url con la que siempre estará disponible no solo en su entorno de desarrollo sino en su puesta en producción.

Virtual Host con XAMPP

Ya este es un tema más avanzado pero que algunos les puede servir. En ocasiones usando XAMPP necesitamos darle servicio a más de un sitio web cada uno distinto al otro y con nombres URL distintos, en ese caso debemos hacer usa del VirtualHost, a continuación, te muestro.

# Virtual Hosts
#
# Required modules: mod_log_config

# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
##NameVirtualHost *:80
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ##ServerName or ##ServerAlias in any <VirtualHost> block.
#
##<VirtualHost *:80>
    ##ServerAdmin webmaster@dummy-host.example.com
    ##DocumentRoot "C:/xampp/htdocs/dummy-host.example.com"
    ##ServerName dummy-host.example.com
    ##ServerAlias www.dummy-host.example.com
    ##ErrorLog "logs/dummy-host.example.com-error.log"
    ##CustomLog "logs/dummy-host.example.com-access.log" common
##</VirtualHost>

##<VirtualHost *:80>
    ##ServerAdmin webmaster@dummy-host2.example.com
    ##DocumentRoot "C:/xampp/htdocs/dummy-host2.example.com"
    ##ServerName dummy-host2.example.com
    ##ErrorLog "logs/dummy-host2.example.com-error.log"
    ##CustomLog "logs/dummy-host2.example.com-access.log" common
##</VirtualHost>

Ya este es un tema más avanzado pero que algunos les puede servir. En ocasiones usando XAMPP necesitamos darle servicio a más de un sitio web cada uno distinto al otro y con nombres URL distintos, en ese caso debemos hacer usa del VirtualHost, a continuación, te muestro.

<VirtualHost *:80>
    ServerAdmin microrreo4@email.com
    DocumentRoot "C:/mipagina1"
    ServerName mipagina1.com
    ErrorLog "logs/mipagina1-error.log"
    CustomLog "logs/mipagina1-access.log"
	
	<Directory "C:/mipagina1">
		Options All
		AllowOverride All
		Require all granted
		#Require all denied
		DirectoryIndex index.html index.php
	</Directory>
	
</VirtualHost>

Ahora te explico, solo usa esta plantilla y debes cambiar o modificar solo las siguientes líneas:
Línea 2 ServerAdmin: Cambia el valor por tu dirección de correo.
Línea 3 DocumentRoot: Establezca la ruta de la carpeta donde esta alojado el sitio1 que desea visualizar, entre comillas como se muestra en el ejemplo.
Línea 4 ServerName: Pon el nombre de dominio o URL de tu página.
Línea 5 ErrorLog: Solo edita o cambia el nombre del archivo .log para identificar los logs de tu página para los errores.
Línea 6 CustomLog: Haz lo mismo que en caso anterior
Línea 8 Directory: Edita y pon la ruta de la carpeta donde esta tu sitio tal como en la linea 3.

Luego de establecer estos valores guarde el archivo y REINICIE el servicio web desde el panel de control de XAMPP.


Repita el proceso para cuantos sitios web desee alojar en su servidor XAMPP, cada uno podría estar guardado en carpetas distintas al htdocs y con nombres de dominio distintos.