Configure seu servidor web local para acesso via Wi-Fi

Quando eu desenvolvo sites responsivos, uma das ferramentas que eu mais costumo utilizar é o modo de design responsivo das Firefox Developer Tools. Através do atalho Ctrl+Shift+M, a tela do Firefox redimensiona-se automaticamente para assumir o tamanho de uma tela de smartphone, facilitando a tarefa de testar a responsividade de um layout.

O navegador Chrome traz uma ferramenta semelhante (inclusive com mais recursos do que o oferecido pelo navegador do Panda Vermelho), acessível através das Chrome Dev Tools. Basta pressionar o atalho Ctrl+Shift+I e em seguida Ctrl+Shift+M, ou clicar naquele ícone de celular ao inspecionar um elemento do site.

responsiveness-fx-chrome
À esquerda, Firefox. À direita, Chrome.

Tais ferramentas são extremamente úteis e bastante versáteis para testar layouts responsivos e simular smartphones de verdade. Só que há um problema bem chato nessas ferramentas: elas não são smartphones de verdade.

Por essa razão o modo responsivo dos navegadores desktop não consegue ser 100% preciso ao renderizar uma página web. Percebi isso ao redimensionar a janela do navegador para ficar com o mesmo tamanho da tela do meu celular Moto G 2ª Geração (a saber: 720 x 1280 pixels de acordo com o GSM Arena). Quando ajustei o tamanho do navegador a renderização, que deveria aparecer assim…

chrome-mobile firefox-mobile

…foi exibida assim:

chrome-simulador firefox-simulador

Rapidamente percebi o quão imprecisas essas ferramentas podem ser dependendo de como são usadas. Sei que não há como ajustar e corrigir a renderização do site em modo responsivo no Firefox e confesso que não sei se o Chrome permite tal correção. Mas como eu não gosto de usar o Chrome (sinceramente acho o navegador do Google bem ruim) e abrir mão do Firefox está fora de questão, tive que dar meus pulos.

Foi aí que tive a seguinte ideia: será que eu consigo acessar através do meu smartphone um site rodando em um servidor web no meu computador através da rede local? E descobri que sim, é possível fazer isso inclusive via Wi-Fi, dispensando um cabo USB.

No Windows eu uso o XAMPP para montar facilmente meu servidor web rodando Apache, MySQL e PHP. Caso você use Linux e Mac OS X e monte um servidor LAMP manualmente, certamente tais configurações poderão ser feitas de forma semelhante. Estes sistemas operacionais não serão o foco deste tutorial, mas quem os usa certamente vai saber se virar. 😉

PROTEGENDO o XAMPP

Pra começar, vamos fortalecer a segurança do seu servidor web local, pois liberar o acesso via Wi-Fi por padrão faz com que seu servidor seja acessado por todo mundo na rede, o que é uma péssima ideia do ponto de vista da segurança. Assim sendo, abra seu navegador e acesse http://localhost. No menu lateral, clique no link Segurança.

xampp-localhostNa tela seguinte, clique neste link:

xampp-localhost-2Nesta tela, crie usuários e senhas de acesso tanto para o MySQL quanto para o seu diretório do XAMPP e salve tais configurações.

xampp-localhost-3Pronto, seu servidor local agora está mais seguro. Da próxima vez que você acessar http://localhost, será exigido o nome de usuário e senha que você acabou de criar. A senha do MySQL também será exigida para a conexão de seu site ou aplicação ao banco de dados.

Ajustando o XAMPP

Agora acesse um dos arquivos de configuração do Apache do seu XAMPP clicando no botão Config do Apache e selecionando httpd-xampp.conf:

xamppNo arquivo que se abre, vá até o final e comente as últimas quatro linhas de código para desbloquear o acesso remoto ao localhost:

configurando-o-xamppReinicie o Apache e o MySQL do seu XAMPP e pronto! O acesso via rede local Wi-Fi estará liberado. Agora verifique qual é o endereço IP atual do seu computador, digitando o comando ipconfig. É esse IP que será necessário para acessar seu servidor através do navegador do seu smartphone:

cmdNo navegador do celular, digite o endereço de IP obtido seguido de /diretório-do-site, conforme o exemplo abaixo:

exemplo-celularE é isso! Agora é possível acessar e testar qualquer site rodando no servidor XAMPP através do navegador do smartphone sem complicação. Caso o IP do seu computador mude por qualquer motivo, basta verificar novamente o IP atual via prompt de comando.

Carrinho de compras