Apache2: Cómo redirigir a los usuarios a un sitio web móvil o normal según el dispositivo utilizando mod_rewrite

Desde el masivo aumento de smartphones y tabletas como el iPhone, iPad, teléfonos y tabletas Android, BlackBerries, etc., es posible que hayas considerado crear una versión móvil de tu sitio web. Este tutorial explica cómo configurar Apache para servir la versión móvil de tu sitio web si el visitante utiliza un dispositivo móvil y la versión regular si el visitante utiliza una PC de escritorio estándar. Esto se puede lograr con el módulo de reescritura de Apache.

1 Nota Preliminar

En este tutorial, mi sitio web “normal” es accesible en http://www.example.com y http://example.com, mientras que mi sitio móvil se llama http://m.example.com. Estos vhosts ya existen en mi sistema, así que no voy a cubrir cómo configurarlos.

2 Habilitando mod_rewrite

Primero, debes asegurarte de que el módulo de Apache mod_rewrite esté habilitado. Este módulo te permite hacer una redirección httpd, redirección de apache y reescritura de URL de apache a través de un servidor web apache. En Debian/Ubuntu, puedes habilitarlo así:

a2enmod rewrite

Reinicia Apache después - para Debian/Ubuntu, el comando es:

/etc/init.d/apache2 restart

3 Configurando Apache para permitir reglas de reescritura en archivos .htaccess

Mi sitio web “normal” www.example.com / example.com tiene el archivo de configuración de vhost /etc/apache2/sites-available/www.example.com.vhost y la raíz del documento /var/www/www.example.com/web.

Mi sitio móvil m.example.com tiene el archivo de configuración de vhost /etc/apache2/sites-available/m.example.com.vhost y la raíz del documento /var/www/www.example.com/mobile.

Quiero colocar las reglas de reescritura para cada sitio en un archivo .htaccess (aunque también es posible colocarlas directamente en el archivo de configuración del vhost) que sea leído por el servidor http de apache. Por lo tanto, primero debo modificar nuestras configuraciones de vhost para que ambos archivos .htaccess puedan contener directivas de reescritura. Podemos hacer esto con la línea AllowOverride All (que permite que .htaccess sobrescriba todas las configuraciones en la configuración del vhost, la configuración del servidor):

vi /etc/apache2/sites-available/www.example.com.vhost

[...]
        
                AllowOverride All
    
[...]

vi /etc/apache2/sites-available/m.example.com.vhost

[...]
        
                AllowOverride All
        
[...]

Reinicia Apache después:

/etc/init.d/apache2 restart

4 Creando reglas de reescritura

Ahora vamos a crear las reglas de reescritura para el sitio web “normal” www.example.com / example.com que redirigirán a todos los usuarios de dispositivos móviles a la versión móvil m.example.com - me enfoco en los dispositivos/agentes de usuario relevantes aquí, que son Android, Blackberry, Googlebot-mobile (el bot de búsqueda móvil de Google), IE Mobile, iPad, iPhone, iPod, Opera Mobile, PalmOS y WebOS.

El archivo /var/www/www.example.com/web/.htaccess se ve de la siguiente manera:

vi /var/www/www.example.com/web/.htaccess

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos" [NC]
RewriteRule ^$ http://m.example.com/ [L,R=302]

Para nuestro sitio web móvil m.example.com, las reglas de reescritura que redirigen a todos los usuarios que no utilizan un dispositivo móvil a nuestro sitio web “normal” www.example.com / example.com se ven de la siguiente manera - he negado la condición RewriteCond del archivo .htaccess anterior:

vi /var/www/www.example.com/mobile/.htaccess

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "!(android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos)" [NC]
RewriteRule ^$ http://www.example.com/ [L,R=302]

¡Eso es todo, hemos configurado nuestra directiva de redirección! Ahora puedes hacer algunas pruebas, por ejemplo, visita m.example.com con un navegador de escritorio estándar:

Si todo va bien, deberías ser redirigido a www.example.com:

Ahora prueba con un dispositivo móvil (aquí uso un teléfono Android) e ingresa a www.example.com:

Deberías ser redirigido a m.example.com:

5 Enlaces

• Apache: http://httpd.apache.org/
• Módulo de Apache mod_rewrite: http://httpd.apache.org/docs/current/mod/mod_rewrite.html