Depuração local sem dor: alcançar HTTPS e nome de host personalizado com Cloudflare Tunnel

No nosso desenvolvimento diário, costumamos usar 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 nome de host personalizado para depurar nossas aplicações:

• Quando a tua aplicação usa uma API que requer HTTPS (como a Web Crypto API ou outras bibliotecas de terceiros que requerem HTTPS)
• Quando um serviço de terceiros que queres integrar exige que forneças uma interface de API acessível globalmente baseada em HTTPS, e precisas depurar essa interface

Existem muitas soluções para esses problemas no mercado, mas a maioria delas é complexa e propensa a erros. Aqui, gostaria de apresentar como usar o Cloudflare Tunnel para rapidamente usar HTTPS e nome de host personalizado para desenvolvimento local.

O que é Cloudflare Tunnel#

Cloudflare Tunnel é um serviço fornecido pela Cloudflare que te permite conectar de forma segura a tua infraestrutura à rede Cloudflare. Essencialmente, cria uma conexão segura e eficiente entre os teus servidores e a rede global da Cloudflare, garantindo que o teu tráfego na web seja protegido e otimizado.

Usando o Cloudflare Tunnel, podes facilmente conectar a tua máquina de desenvolvimento local à rede global da Cloudflared. Depois disso, podes hospedar o teu domínio na Cloudflare e encaminhar pedidos para o domínio para a tua máquina local através do Cloudflare Tunnel.

Pré-requisitos#

Antes de começares, certifica-te de que:

• Já possuis um nome de domínio e desativaste DNSSEC no teu registrador (onde compraste o teu nome de domínio).
• Já criaste uma conta Cloudflare.

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

Adicionar um site à Cloudflare#

Primeiramente, precisas de entrar no painel de controlo da Cloudflare usando a tua conta Cloudflare e selecionar a opção "Website" no menu à esquerda. Então, clica no botão "Get started" na página (se já houver um registo, clica em "Add website"). Segue as instruções para completar a adição do site usando o domínio que possuis. Após adicionar o site com sucesso, verás o seguinte conteúdo:

Como mostrado na figura, o site adicionado ainda não foi ativado. Precisas de seguir o guia na página para fazer login no teu registrador de domínio e atualizar os nameservers do domínio para ativar o teu site.

Tomando o domínio no Godaddy como exemplo:

Entra na página de configurações do domínio, acede à opção "Nameservers" na guia DNS, e altera os Nameservers para os valores exibidos no guia:

Após alterar, espera por um curto período de tempo, e o site correspondente na Cloudflare será ativado:

Depois de configurares esses conteúdos, o teu domínio será hospedado na Cloudflare, e a Cloudflare ativará automaticamente o HTTPS para o domínio.

Criar túnel#

Volta para a homepage do Painel de Controlo da Cloudflare, clica "Zero Trust" no menu à esquerda e seleciona "Tunnels" no diretório 'Access'. Depois, clica em "Add a tunnel" na página, e insere qualquer nome de túnel (ex.: my-dev-tunnel). De acordo com as instruções na página, conecta a tua máquina de desenvolvimento local ao túnel Cloudflare.

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

Se a tua máquina já tiver "cloudflared" instalado previamente, não precisas executar brew install cloudflare/cloudflare/cloudflared.

Depois disso, executa cloudflared tunnel list no teu terminal, e verás que a tua máquina já está conectada ao túnel:

Roteamento de tráfego para o túnel criado#

Após criares o Túnel, vamos configurar as regras de roteamento para o Túnel.

Assumir que nossa aplicação local está a funcionar na porta http://localhost:3000, e queremos encaminhar todos os pedidos para https://dev.demo.com para a porta onde a aplicação local está a funcionar.

Primeiro, voltamos à nossa página de túnel, encontramos o túnel que acabamos de criar, clicamos no botão de três pontos à direita, e selecionamos "Config".

Preencha a configuração relevante de acordo com nossos requisitos:

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

Após uma breve espera, acesse https://dev.demo.com, e verás a app a funcionar na nossa máquina local:

Resumo#

Através deste tutorial, deves agora conseguir implementar facilmente HTTPS e nome de host personalizado no teu ambiente de desenvolvimento local sem ter que te preocupar com configurações complexas e erros. Espero que possas beneficiar deste tutorial!