Redirecionamentos e reescritas do Apache 2 com base no dispositivo usado

Desde o surgimento massivo de smartphones e tablets como iPhone, iPad, telefones e tablets Android, BlackBerries, etc., você pode ter considerado a criação de uma versão móvel do seu site. Este tutorial explica como configurar o Apache para servir a versão móvel do seu site se o visitante usar um dispositivo móvel e a versão normal se o visitante usar um PC desktop padrão. Isso pode ser conseguido com o módulo de reescrita do Apache.

1 Nota Preliminar

Neste tutorial, meu site "normal" pode ser acessado em http://www.example.com e http://example.com, enquanto meu site para celular se chama http://m.example.com. Esses vhosts já existem no meu sistema, então não vou abordar como configurá-los.

2 Habilitando mod_rewrite

Primeiro, você deve garantir que o módulo mod_rewrite do Apache esteja habilitado. Este módulo permite que você faça um redirecionamento httpd, um redirecionamento apache e uma URL de reescrita do apache por meio de um servidor web apache. No Debian/Ubuntu, você pode habilitá-lo assim:

a2enmod rewrite

Reinicie o Apache depois - para Debian/Ubuntu, o comando é:

/etc/init.d/apache2 restart

3 Configurando o Apache para permitir regras de reescrita em arquivos .htaccess

Meu site "normal" www.example.com/example.com tem o arquivo de configuração vhost /etc/apache2/sites-available/www.example.com.vhost e a raiz do documento /var/www/www.example.com /rede.

Meu site móvel m.example.com possui o arquivo de configuração vhost /etc/apache2/sites-available/m.example.com.vhost e a raiz do documento /var/www/www.example.com/mobile.

Quero colocar as regras de reescrita para cada site em um arquivo .htaccess (embora também seja possível colocá-las diretamente no arquivo de configuração vhost) com leitura pelo servidor http apache. Portanto, devo primeiro modificar nossas configurações de vhost para que ambos os arquivos .htaccess possam conter diretivas de reescrita. Podemos fazer isso com a linha AllowOverride All (que permite que o .htaccess substitua todas as configurações da configuração do vhost, a configuração do servidor):

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

[...]
        <Directory /var/www/www.example.com/web/>
                AllowOverride All
	</Directory>
[...]

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

[...]
        <Directory /var/www/www.example.com/mobile/>
                AllowOverride All
        </Directory>
[...]

Reinicie o Apache depois:

/etc/init.d/apache2 restart

4 Criando regras de reescrita

Agora vamos criar as regras de reescrita para o site "normal" www.example.com/example.com que redirecionará todos os usuários de dispositivos móveis para a versão móvel m.example.com - concentro-me nos dispositivos/agentes de usuário relevantes aqui, que são Android, Blackberry, Googlebot-mobile (bot de pesquisa móvel do Google), IE Mobile, iPad, iPhone, iPod, Opera Mobile, PalmOS e WebOS.

O arquivo /var/www/www.example.com/web/.htaccess tem a seguinte aparência:

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

<IfModule mod_rewrite.c>
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]
</IfModule>

Para nosso site móvel m.example.com, as regras de reescrita que redirecionam todos os usuários que não usam um dispositivo móvel para nosso site "normal" www.example.com/example.com são as seguintes - eu neguei a condição RewriteCond do arquivo .htaccess anterior:

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

<IfModule mod_rewrite.c>
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]
</IfModule>

É isso, configuramos nossa diretiva de redirecionamento! Agora você pode fazer alguns testes, por ex. visite m.example.com com um navegador de desktop padrão:

Se tudo correr bem, você deverá ser redirecionado para www.example.com:

Agora teste com um dispositivo móvel (eu uso um telefone Android aqui) e acesse www.example.com:

Você deve ser redirecionado para m.example.com:

5 links