Debugging locale senza problemi: ottenere HTTPS e hostname personalizzato con Cloudflare Tunnel

Nel nostro sviluppo quotidiano, utilizziamo spesso http://localhost per accedere e fare il debug delle nostre applicazioni, il che è sufficiente nella maggior parte dei casi. Tuttavia, in situazioni come le seguenti, potremmo aver bisogno di utilizzare HTTPS e un hostname personalizzato per fare il debug delle nostre applicazioni:

• Quando la tua applicazione utilizza un'API che richiede HTTPS (come la Web Crypto API o altre librerie di terze parti che richiedono HTTPS)
• Quando un servizio di terze parti che vuoi integrare richiede di fornire un'interfaccia API basata su HTTPS accessibile globalmente, e hai bisogno di fare il debug di questa interfaccia

Esistono molte soluzioni a questi problemi sul mercato, ma la maggior parte di esse è complessa e soggetta a errori. Qui, vorrei introdurre come utilizzare Cloudflare Tunnel per utilizzare rapidamente HTTPS e hostname personalizzato per lo sviluppo locale.

Cos'è Cloudflare Tunnel#

Cloudflare Tunnel è un servizio fornito da Cloudflare che ti permette di connettere in sicurezza la tua infrastruttura alla rete Cloudflare. Essenzialmente crea una connessione sicura ed efficiente tra i tuoi server e la rete globale di Cloudflare, assicurando che il tuo traffico web sia protetto e ottimizzato.

Utilizzando Cloudflare Tunnel, puoi facilmente connettere la tua macchina di sviluppo locale alla rete globale di Cloudflared. Dopodiché, puoi ospitare il tuo dominio su Cloudflare e inoltrare le richieste per il dominio alla tua macchina locale tramite il Cloudflare Tunnel.

Prerequisito#

Prima di iniziare, assicurati di:

• Possedere già un nome di dominio e aver disabilitato DNSSEC presso il tuo registrar (dove hai acquistato il tuo nome di dominio).
• Aver precedentemente creato un account Cloudflare.

Nota: In questo tutorial, per scopi dimostrativi, assumiamo di usare demo.com come nostro dominio.

Aggiungi un sito web a Cloudflare#

Innanzitutto, devi accedere al dashboard di Cloudflare utilizzando il tuo account Cloudflare e selezionare l'opzione "Sito web" dal menu a sinistra. Quindi, fai clic sul pulsante "Inizia" sulla pagina (se esiste già un record, fai clic su "Aggiungi sito web"). Segui le istruzioni per completare l'aggiunta del sito web utilizzando il dominio che possiedi. Dopo aver aggiunto con successo il sito, vedrai il seguente contenuto:

Come mostrato nella figura, il sito web aggiunto non è ancora stato attivato. È necessario seguire la guida sulla pagina per accedere al registrar del tuo dominio e aggiornare i nameserver del dominio per attivare il tuo sito web.

Prendendo il dominio su Godaddy come esempio:

Entra nella pagina delle impostazioni del dominio, accedi all'opzione “Nameservers” sotto la scheda DNS, e cambia i Nameserver con i valori visualizzati nella guida:

Dopo la modifica, attendi per un breve periodo, e il sito web corrispondente su Cloudflare sarà attivato:

Dopo aver configurato questi contenuti, il tuo dominio verrà ospitato su Cloudflare, e Cloudflare abiliterà automaticamente HTTPS per il dominio.

Crea tunnel#

Torna alla home page del Dashboard Cloudflare, clicca su "Zero Trust" nel menu a sinistra, e seleziona "Tunnels" sotto la directory 'Access'. Poi, clicca su "Aggiungi un tunnel" sulla pagina e inserisci un nome qualsiasi per il tunnel (es. my-dev-tunnel). Secondo le indicazioni sulla pagina, collega la tua macchina di sviluppo locale al tunnel Cloudflare.

Prendendo MacOS come esempio, apri un terminale ed esegui il comando visualizzato sulla pagina:

Se la tua macchina ha già installato "cloudflared" in precedenza, non è necessario eseguire brew install cloudflare/cloudflare/cloudflared.

Dopo di ciò, esegui cloudflared tunnel list nel tuo terminale e vedrai che la tua macchina è già connessa al tunnel:

Instrada il traffico al tunnel creato#

Dopo aver creato il Tunnel, configureremo le regole di routing per il Tunnel.

Supponiamo che la nostra applicazione locale stia girando sulla porta http://localhost:3000, e vogliamo inoltrare tutte le richieste per https://dev.demo.com alla porta dove l'applicazione locale sta girando.

Innanzitutto, torniamo alla pagina del tunnel, troviamo il tunnel che abbiamo appena creato, clicchiamo sul pulsante con i tre puntini sulla destra e selezioniamo "Config".

Compila la configurazione pertinente secondo i nostri requisiti:

Questa configurazione indirizza l'indirizzo dev.demo.com a http://localhost:3000 sulla nostra macchina. Quindi clicca su "Salva hostname".

Dopo un breve periodo di attesa, accedi a https://dev.demo.com, e vedrai l'app in esecuzione sulla nostra macchina locale:

Riepilogo#

Attraverso questo tutorial, dovresti ora essere in grado di implementare facilmente HTTPS e hostname personalizzato nel tuo ambiente di sviluppo locale senza doverti preoccupare di configurazioni complesse ed errori. Spero che tu possa trarre vantaggio da questo tutorial！