Apache2 : Comment rediriger les utilisateurs vers un site Web mobile ou normal en fonction de l'appareil à l'aide de mod_rewrite

Depuis l’essor massif des smartphones et des tablettes comme l’iPhone, l’iPad, les téléphones et tablettes Android, les BlackBerries, etc., vous avez peut-être envisagé de créer une version mobile de votre site Web. Ce tutoriel explique comment configurer Apache pour servir la version mobile de votre site Web si le visiteur utilise un appareil mobile et la version normale si le visiteur utilise un PC de bureau standard. Cela peut être réalisé avec le module de réécriture d’Apache.

1 Remarque préliminaire

Dans ce tutoriel, mon site Web “normal” est accessible sous http://www.example.com et http://example.com, tandis que mon site mobile s’appelle http://m.example.com. Ces vhosts existent déjà sur mon système, donc je ne vais pas couvrir comment les configurer.

2 Activation de mod_rewrite

Tout d’abord, vous devez vous assurer que le module Apache mod_rewrite est activé. Ce module vous permet de faire une redirection httpd, une redirection apache et une réécriture d’URL apache via un serveur Web apache. Sur Debian/Ubuntu, vous pouvez l’activer comme ceci :

a2enmod rewrite

Redémarrez Apache ensuite - pour Debian/Ubuntu, la commande est :

/etc/init.d/apache2 restart

3 Configuration d’Apache pour autoriser les règles de réécriture dans les fichiers .htaccess

Mon site Web “normal” www.example.com / example.com a le fichier de configuration vhost /etc/apache2/sites-available/www.example.com.vhost et le document root /var/www/www.example.com/web.

Mon site mobile m.example.com a le fichier de configuration vhost /etc/apache2/sites-available/m.example.com.vhost et le document root /var/www/www.example.com/mobile.

Je veux placer les règles de réécriture pour chaque site dans un fichier .htaccess (bien qu’il soit également possible de les placer directement dans le fichier de configuration vhost) que le serveur http apache peut lire. Par conséquent, je dois d’abord modifier nos configurations vhost afin que les deux fichiers .htaccess puissent contenir des directives de réécriture. Nous pouvons le faire avec la ligne AllowOverride All (qui permet à .htaccess de remplacer tous les paramètres dans la configuration vhost, la configuration du serveur) :

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

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

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

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

Redémarrez Apache ensuite :

/etc/init.d/apache2 restart

4 Création de règles de réécriture

Maintenant, créons les règles de réécriture pour le site Web “normal” www.example.com / example.com qui redirigeront tous les utilisateurs d’appareils mobiles vers la version mobile m.example.com - je me concentre ici sur les appareils/agents utilisateurs pertinents, qui sont Android, Blackberry, Googlebot-mobile (le bot de recherche mobile de Google), IE Mobile, iPad, iPhone, iPod, Opera Mobile, PalmOS et WebOS.

Le fichier /var/www/www.example.com/web/.htaccess ressemble à ceci :

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]

Pour notre site Web mobile m.example.com, les règles de réécriture qui redirigent tous les utilisateurs qui n’utilisent pas un appareil mobile vers notre site Web “normal” www.example.com / example.com ressemblent à ceci - j’ai nié la condition RewriteCond du fichier .htaccess précédent :

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]

C’est tout, nous avons configuré notre directive de redirection ! Maintenant, vous pouvez faire quelques tests, par exemple, visitez m.example.com avec un navigateur de bureau standard :

Si tout se passe bien, vous devriez être redirigé vers www.example.com :

Testez maintenant avec un appareil mobile (j’utilise ici un téléphone Android) et allez sur www.example.com :

Vous devriez être redirigé vers m.example.com :

5 Liens

• Apache : http://httpd.apache.org/
• Module Apache mod_rewrite : http://httpd.apache.org/docs/current/mod/mod_rewrite.html