Depuração local sem dor: alcançando HTTPS e hostname personalizado com Cloudflare Tunnel

No nosso desenvolvimento diário, frequentemente usamos http://localhost para acessar e depurar nossas aplicações, o que é suficiente na maioria dos casos. No entanto, em situações como as seguintes, podemos precisar usar HTTPS e um hostname personalizado para depurar nossas aplicações:

• Quando sua aplicação usa uma API que requer HTTPS (como o Web Crypto API ou outras bibliotecas de terceiros que requerem HTTPS)
• Quando um serviço de terceiros que você deseja integrar exige que você forneça uma interface de API baseada em HTTPS acessível globalmente e você precisa depurar essa interface

Há muitas soluções para esses problemas no mercado, mas a maioria é complexa e propensa a erros. Aqui, eu gostaria de apresentar como usar o Cloudflare Tunnel para utilizar rapidamente HTTPS e hostname personalizado para o desenvolvimento local.

O que é Cloudflare Tunnel#

Cloudflare Tunnel é um serviço fornecido pela Cloudflare que permite conectar sua infraestrutura de forma segura à rede da Cloudflare. Ele basicamente cria uma conexão segura e eficiente entre seus servidores e a rede global da Cloudflare, garantindo que seu tráfego web esteja protegido e otimizado.

Usando o Cloudflare Tunnel, você pode facilmente conectar sua máquina de desenvolvimento local à rede global da Cloudflare. Após isso, você pode hospedar seu domínio na Cloudflare e encaminhar pedidos para o domínio à sua máquina local através do Cloudflare Tunnel.

Pré-requisitos#

Antes de começar, certifique-se de que você:

• Já possui um nome de domínio e desativou o DNSSEC no seu registrador (onde você comprou seu nome de domínio).
• Já criou uma conta Cloudflare.

Nota: Neste tutorial, para fins de demonstração, assumimos que estamos usando demo.com como nosso domínio.

Adicionar um site ao Cloudflare#

Primeiramente, você precisa fazer login no painel do Cloudflare usando sua conta Cloudflare e selecionar a opção "Website" no menu à esquerda. Em seguida, clique no botão "Get started" na página (se já houver um registro, clique em "Add website"). Siga as instruções para completar a adição do site usando o domínio que você possui. Depois de adicionar o site com sucesso, você verá o seguinte conteúdo:

Como mostrado na figura, o site adicionado ainda não foi ativado. Você precisa seguir o guia na página para fazer login no seu registrador de domínio e atualizar os servidores de nomes do domínio para ativar seu site.

Tomando o domínio na Godaddy como exemplo:

Entre na página de configurações de Domínio, acesse a opção “Nameservers” sob a guia DNS, e mude os Nameservers para os valores exibidos no guia:

Após a alteração, aguarde um curto período de tempo, e o site correspondente no Cloudflare será ativado:

Depois de configurar esses conteúdos, seu domínio será hospedado no Cloudflare, e o Cloudflare ativará automaticamente o HTTPS para o domínio.

Criar tunel#

Volte para a página inicial do Painel Cloudflare, clique em "Zero Trust" no menu à esquerda, e selecione "Tunnels" no diretório 'Access'. Em seguida, clique em "Add a tunnel" na página e insira qualquer nome de tunel (por exemplo, my-dev-tunnel). De acordo com os prompts na página, conecte sua máquina de desenvolvimento local ao tunel do Cloudflare.

Tomando o MacOS como exemplo, abra um terminal e execute o comando exibido na página:

Se sua máquina já tiver instalado o "cloudflared" anteriormente, você não precisa executar brew install cloudflare/cloudflare/cloudflared.

Após isso, execute cloudflared tunnel list no seu terminal, e você verá que sua máquina já está conectada ao tunel:

Redirecionar tráfego para o tunel criado#

Após criar o Tunel, vamos configurar as regras de roteamento para o Tunel.

Assumimos que nossa aplicação local está sendo executada na porta http://localhost:3000, e queremos encaminhar todos os pedidos para https://dev.demo.com à porta onde a aplicação local está em execução.

Primeiramente, voltamos para nossa página de tunel, encontramos o tunel que acabamos de criar, clicamos no botão de três pontos à direita e selecionamos "Config".

Preencha a configuração relevante de acordo com nossas necessidades:

Essa configuração roteia o endereço dev.demo.com para http://localhost:3000 em nossa máquina. Então, clique em "Save hostname".

Após uma breve espera, acesse https://dev.demo.com, e você verá o aplicativo rodando em nossa máquina local:

Resumo#

Através deste tutorial, agora você deve ser capaz de implementar facilmente HTTPS e hostname personalizado no seu ambiente de desenvolvimento local sem precisar se preocupar com configurações complexas e erros. Espero que você possa se beneficiar deste tutorial！