Como colocar seu Wamp online com WordPress usando ngrok

Guia: Configurar WordPress Local com ngrok (Login Funcional)

Este guia ensina como expor seu site WordPress local na internet usando ngrok, garantindo que todas as funcionalidades funcionem corretamente, incluindo login, administração e redirecionamentos — sem erros de domínio ou redirecionamentos para URLs locais inacessíveis.

Problema comum

Você inicia o túnel com:

ngrok http 80

Acessa:

https://seu-subdominio.ngrok-free.dev

→ O site carrega, mas o login falha: após inserir usuário e senha, você é redirecionado para uma URL como http://localhost/wp-admin/ ou outro domínio local que não existe publicamente.

Isso acontece porque:

O WordPress foi configurado para um domínio local (ex: localhost, meusite.test, etc.)
Ao processar o login, ele gera redirecionamentos usando esse domínio interno
O visitante externo não consegue acessar esse domínio

Solução em 4 passos

Passo 1: Configure um Virtual Host no Apache

Seu servidor local deve responder por um nome de domínio consistente (ex: meusite.local).

Exemplo para Apache (httpd-vhosts.conf):

<VirtualHost *:80>
    ServerName meusite.local
    DocumentRoot "C:/caminho/do/seu/wordpress"
    <Directory "C:/caminho/do/seu/wordpress/">
        Options +Indexes +Includes +FollowSymLinks +MultiViews
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

Substitua C:/caminho/do/seu/wordpress pelo caminho real do seu projeto.

Adicione ao arquivo hosts do sistema:

127.0.0.1 meusite.local

(Localização: C:\Windows\System32\drivers\etc\hosts)

Reinicie o Apache após as alterações.

Passo 2: Inicie o ngrok com `--host-header`

Use o nome do seu Virtual Host no cabeçalho Host:

ngrok http 80 --host-header="meusite.local"

Isso garante que as requisições cheguem ao seu servidor com o Host: meusite.local, e o Apache sirva o site correto.

Passo 3: Ensine o WordPress a usar o domínio do ngrok

O ngrok envia cabeçalhos como:

X-Forwarded-Host: seu-subdominio.ngrok-free.dev
X-Forwarded-Proto: https

Mas o WordPress não os usa por padrão.

Adicione este código ao wp-config.php, logo após <?php:

// Respeitar cabeçalhos de proxy (ngrok, Cloudflare, etc.)
if (isset($_SERVER['HTTP_X_FORWARDED_HOST'])) {
    $_SERVER['HTTP_HOST'] = $_SERVER['HTTP_X_FORWARDED_HOST'];
    $_SERVER['SERVER_NAME'] = $_SERVER['HTTP_X_FORWARDED_HOST'];
    if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
        $_SERVER['HTTPS'] = 'on';
    }
}

✅ Isso faz o WordPress "enxergar" o domínio público do ngrok em vez do domínio local.

Passo 4: Atualize as URLs no banco de dados

No phpMyAdmin, execute:

UPDATE wp_options 
SET option_value = 'https://seu-subdominio.ngrok-free.dev' 
WHERE option_name IN ('siteurl', 'home');

Substitua seu-subdominio.ngrok-free.dev pelo domínio exibido no seu terminal ao iniciar o ngrok.

Isso garante que todos os links internos (incluindo formulários de login) usem o domínio público.

Teste final

Abra o navegador em modo anônimo
Acesse:
https://seu-subdominio.ngrok-free.dev/wp-login.php
Faça login

➡️ Você será redirecionado para:

https://seu-subdominio.ngrok-free.dev/wp-admin/ ✅

Observações importantes

A página de aviso do ngrok ("You are about to visit...") só aparece uma vez por navegador — é uma medida de segurança.
Para remover essa página em testes automatizados, envie o header:
ngrok-skip-browser-warning: any
Nunca use essa configuração em produção real sem HTTPS válido e medidas de segurança adequadas.
Após os testes, reverta as URLs no banco de dados para o domínio local (ex: http://meusite.local).

Voltando ao ambiente local

Quando terminar de usar o ngrok, execute no phpMyAdmin:

UPDATE wp_options 
SET option_value = 'http://meusite.local' 
WHERE option_name IN ('siteurl', 'home');

Assim, seu ambiente local volta ao normal.

Conclusão

Com essas configurações:

Seu WordPress funciona perfeitamente via ngrok
Login, admin e links internos usam o domínio público do ngrok
Seu servidor local permanece simples e seguro

Pronto para compartilhar seu site de desenvolvimento com colegas, clientes ou testar webhooks externos!

Dica profissional: Para evitar URLs aleatórias, considere usar uma conta paga do ngrok com subdomínio personalizado (ex: meusite.ngrok.dev).