Crea un accorciatore URL di dominio personalizzato gratuito (con Cloudflare Worker)

In questo post condividerò con voi come puoi creare il tuo accorciatore URL di dominio personalizzato utilizzando Cloudflare Workers. Che tu sia uno sviluppatore web che cerca di aggiungere un altro strumento alla tua cintura, un imprenditore che vuole marchiare i tuoi link senza un prezzo elevato o semplicemente qualcuno che ama armeggiare con le tecnologie web, questa guida passo passo è per Voi.

Come sviluppatore web e appassionato di tecnologia, sono sempre stato affascinato dalle piccole cose che rendono Internet più efficiente e facile da usare. Un giorno, mentre condividevo un URL particolarmente lungo e ingombrante con un collega, mi sono ritrovato a desiderare un modo semplice e personalizzato per abbreviare i collegamenti. Certo, ci sono moltissimi servizi di abbreviazione di URL là fuori, ma volevo qualcosa che mi sentisse più “me”, qualcosa che potessi personalizzare e controllare.

È stato allora che mi è venuta l'idea di creare il mio abbreviatore URL personalizzato utilizzando Cloudflare Workers. È stato come trovare un tesoro nascosto nel vasto mare delle tecnologie web. Non solo potrei abbreviare gli URL, ma potrei farlo anche con il mio nome di dominio, gratuitamente! L'entusiasmo di questa scoperta mi ha ricordato la prima volta che ho implementato un sito web: quell'ondata di empowerment e infinite possibilità.

Ciò che ha reso questa scoperta ancora più entusiasmante è stato rendersi conto che poteva rappresentare un'alternativa fantastica e gratuita a servizi popolari come Bit.ly o TinyURL per la creazione di collegamenti brevi brandizzati su un dominio personalizzato. Molte aziende e privati ​​pagano fior di quattrini per questo tipo di funzionalità, ma ecco un modo per ottenere lo stesso risultato senza spendere un centesimo.

Passaggio 1: registrare un nome di dominio (utilizzare un dominio breve)

Il primo passo nella creazione del tuo abbreviatore URL personalizzato è registrare un nome di dominio. Questo sarà il fondamento dei tuoi link brevi brandizzati, quindi scegli saggiamente!

Ecco alcuni suggerimenti per aiutarti a scegliere il dominio perfetto:

1. Tenerlo corto: Lo scopo principale di un accorciatore di URL è creare collegamenti concisi. Cerca nomi di dominio con 3-5 caratteri, se possibile. Potrebbe trattarsi di un'abbreviazione, di un acronimo o di una parola accattivante.
2. Rendilo memorabile: scegli qualcosa di facile da ricordare e digitare. Ciò renderà più semplice per te e per gli altri utilizzare i tuoi collegamenti abbreviati.
3. Considera il tuo marchio: se lo utilizzi per un'azienda o un marchio personale, prova ad allineare il dominio con l'identità del marchio esistente.
4. Verificare la disponibilità: I domini brevi e accattivanti sono molto richiesti. Potrebbe essere necessario essere creativi o prendere in considerazione domini di primo livello (TLD) alternativi come .io, .co o .me se la tua prima scelta non è disponibile.
5. Pensa al TLD: Anche se .com è popolare, non rifuggire dagli altri TLD. Alcuni, come .link o .click, potrebbero essere particolarmente adatti per un abbreviatore di URL.

Ecco alcuni esempi a cui ispirarti:

• abc.link
• vai.io
• shrt.co
• zap.me

Una volta scelto il dominio, dovrai acquistarlo da un registrar di domini. Alcune opzioni popolari includono:

• Namecheap
• Vai papà
• Cloudflare (Consigliato – che è anche molto conveniente poiché utilizzeremo Cloudflare Workers)

Ricorda, anche se il dominio avrà un costo, si tratta di un acquisto una tantum all'anno e il resto della nostra configurazione dell'abbreviatore URL sarà gratuito utilizzando Cloudflare Workers.

Suggerimento da professionista: prima di finalizzare l'acquisto, assicurati che il dominio non sia associato ad attività di spam o dannose. Puoi controllarne la cronologia utilizzando strumenti come Domain Tools o Wayback Machine.

Con il tuo nuovo brillante dominio in mano, sei pronto per passare al passaggio successivo: configurare Cloudflare per il tuo dominio. Ma ne parleremo nella prossima sezione.

Passaggio 2: configura i record DNS per il tuo dominio

Ora che hai il tuo dominio, è il momento di impostare la configurazione DNS. Questo passaggio è fondamentale per garantire che i tuoi Cloudflare Worker funzionino correttamente con il tuo dominio appena registrato.

Esaminiamo il processo:

1. Aggiungi il tuo dominio a Cloudflare

• Se non lo hai già fatto, creare un account Cloudflare gratuito.
• Nella dashboard di Cloudflare, fai clic su "Aggiungi un sito" e inserisci il nome del tuo dominio.
• Cloudflare cercherà i record DNS esistenti. Elimina tutti i record trovati (a meno che tu non stia utilizzando il dominio anche per la posta elettronica o altri servizi importanti, nel qual caso conservali).

2. Aggiorna i nameserver (ignora questo passaggio se il tuo dominio è registrato con Cloudflare)

• Cloudflare ti fornirà una serie di nameserver.
• Vai al sito web del registrar del tuo dominio e sostituisci i nameserver esistenti con quelli forniti da Cloudflare.
• Questo passaggio potrebbe richiedere fino a 24 ore per propagarsi a livello globale.

3. Configurare i record DNS

• Nelle impostazioni DNS di Cloudflare, aggiungeremo due nuovi record A.
• Aggiungi quanto segue:

Tipo: A
Nome e Cognome: @
Contenuto: 192.0.2.1
TTL: Automatico
Stato del delegato: Procurato (nuvola arancione - molto importante)

Tipo: A
Nome e Cognome: www
Contenuto: 192.0.2.1
TTL: Automatico
Stato del delegato: Procurato (nuvola arancione - molto importante)

Questo IP 192.0.2.1 è uno speciale indirizzo “fittizio”. È riservato alla documentazione e ai test, il che lo rende perfetto per le nostre esigenze.

4. Abilita il proxy Cloudflare

• Assicurati che lo stato del proxy (icona della nuvola arancione) sia abilitato per il tuo record DNS.
• Ciò consente a Cloudflare di eseguire il proxy del tuo traffico ed è necessario per il funzionamento dei Cloudflare Workers.

5. Verificare la configurazione

• Una volta propagata la modifica del server dei nomi, Cloudflare mostrerà il tuo dominio come "Attivo".
• Puoi verificarlo nella dashboard di Cloudflare.

Il punto chiave qui è che non stiamo indirizzando il tuo dominio a nessun vero hosting web. L'indirizzo 192.0.2.1 è solo un segnaposto. Il tuo Cloudflare Worker, che configureremo in seguito, intercetterà tutte le richieste al tuo dominio e gestirà la logica di abbreviazione dell'URL.

Suggerimento avanzato: questa configurazione significa che non è necessario pagare o gestire alcun hosting web. I Cloudflare Workers gestiranno tutto il lavoro pesante, rendendo questa soluzione non solo gratuita ma anche incredibilmente leggera e di facile manutenzione.

Con il tuo DNS configurato correttamente, ora sei pronto per passare alla parte entusiasmante: configurare il tuo Cloudflare Worker per gestire l'abbreviazione degli URL.

Passaggio 3: creazione di un lavoratore Cloudflare

Ora che abbiamo configurato il nostro dominio in Cloudflare, è il momento di creare il Worker che gestirà i nostri reindirizzamenti. I Cloudflare Workers forniscono un ambiente di esecuzione serverless che ci consente di eseguire il nostro codice all'edge, vicino ai nostri utenti per prestazioni ottimali.

1. Crea un lavoratore Cloudflare

• Accesso alla Sezione Lavoratori:
  • Accedi alla dashboard di Cloudflare.
  • Passare alla sezione "Lavoratori" dalla barra laterale.
  • Clicca su "Crea un servizio" se questo è il tuo primo lavoratore, o "Crea lavoratore" se hai già lavoratori esistenti.
• Dai un nome al tuo lavoratore:
  • Scegli un nome descrittivo per il tuo lavoratore, ad esempio "gestore di reindirizzamenti di massa".
  • Fare clic su "Crea servizio" per procedere all'editor.
• Scrivere lo script del lavoratore:
  • Nell'editor, sostituisci il codice predefinito con lo script del gestore di reindirizzamento:

esportazione predefinita {
  fetch asincrono(richiesta) {
    const reindirizzamentoMap = nuova Mappa([
      ["google", "https://www.google.com?subId1=google"],
      ["bing", "https://www.bing.com?subId1=bing"],
      // Aggiungi altri reindirizzamenti qui se necessario
    ])?

    const url = nuovo URL(richiesta.url);
    console.log("URL completo:", url.toString());
    console.log("Nome host:", url.nomehost);
    console.log("Percorso:", url.percorso);

    let percorso = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
    
    if (url.nomehost.includes('workers.dev')) {
      percorso = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
    }
    
    console.log("Percorso elaborato:", percorso);
    
    const posizione = reindirizzaMap.get(percorso);
    console.log("Posizione reindirizzamento:", posizione);

// Passa a 301 per il reindirizzamento permanente
    se (posizione) {
      return Response.redirect(posizione, 302);
    }
    
    // Se la richiesta non è nella mappa, restituisci un 404 o il tuo fallback preferito
    restituisce una nuova risposta(`Non trovato: ${percorso}`, { status: 404 });
  },
};

• Comprendere la sceneggiatura:
  • Definiamo a reindirizzareMap che contiene i nostri percorsi brevi e i corrispondenti URL completi.

      ["google", "https://www.google.com?subId1=google"],

tuoURLbreve.com/google reindirizza a -> https://www.google.com?subId1=google

      ["bing", "https://www.bing.com?subId1=bing"],

yourshorturl.com/bing reindirizza a -> https://www.bing.com?subId1=bing

• Lo script elabora le richieste in arrivo, estrae il percorso e controlla se corrisponde a uno dei nostri reindirizzamenti definiti.
• Se viene trovata una corrispondenza, restituisce un 302 (reindirizzamento temporaneo) all'URL corrispondente.
• Se non viene trovata alcuna corrispondenza, restituisce una risposta 404 Not Found.
• Testare il lavoratore:
  • Utilizza la funzione "Modifica rapida" nella dashboard di Cloudflare per apportare modifiche e testare il tuo Worker.
  • Puoi utilizzare lo strumento di test HTTP fornito per simulare le richieste e vedere come risponde il tuo lavoratore.
• Distribuzione del lavoratore:
  • Una volta che sei soddisfatto dei test, fai clic su "Salva e distribuisci" per rendere attivo il tuo lavoratore.
• Impostazione dei percorsi dei lavoratori:

• Dopo la distribuzione, vai alla scheda "Trigger" per il tuo lavoratore.
• Aggiungi un percorso che corrisponde al tuo dominio, ad esempio *raccomanda.link/*.
• Ciò garantisce che tutte le richieste al tuo dominio siano gestite da questo lavoratore.
• Verifica della configurazione:
  • Prova ad accedere ad alcuni dei tuoi percorsi di reindirizzamento (ad esempio, https://recommends.link/url-shortener-guide) per garantire che funzionino come previsto.
  • Controlla i registri dei lavoratori nella dashboard di Cloudflare per vedere l'output della console e verificare che i percorsi vengano elaborati correttamente.

Passaggio 4: ulteriori personalizzazioni (facoltativo)

Reindirizzamenti dinamici con Cloudflare KV

Per rendere il nostro sistema di reindirizzamento più flessibile e più facile da gestire, possiamo utilizzare lo spazio di archiviazione KV (valore-chiave) Cloudflare per archiviare i nostri reindirizzamenti:

Crea uno spazio dei nomi KV:

• Nella dashboard di Cloudflare, vai su Lavoratori > KV. Fai clic su "Crea spazio dei nomi" e assegnagli un nome (ad esempio, "REDIRECT_MAP").

Associa lo spazio dei nomi KV al tuo lavoratore:

• Vai alle impostazioni del tuo lavoratore. In "Associazioni dello spazio dei nomi KV", aggiungi una nuova associazione. Scegli il tuo spazio dei nomi KV e dagli un nome variabile (ad esempio, REDIRECTS).

Modifica lo script Worker per utilizzare KV:

   esportazione predefinita {
     fetch asincrono(richiesta, ambiente) {
       const url = nuovo URL(richiesta.url);
       const percorso = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const posizione = attendono env.REDIRECTS.get(percorso);
       
       se (posizione) {
         return Response.redirect(posizione, 301);
       }
       
       restituisce una nuova risposta(`Non trovato: ${percorso}`, { status: 404 });
     },
   };

Ora puoi aggiungere, aggiornare o rimuovere reindirizzamenti modificando l'archivio KV senza modificare il codice lavoratore.

Reindirizzamenti parametrizzati

Consenti parametri dinamici nei tuoi reindirizzamenti:

   esportazione predefinita {
     fetch asincrono(richiesta, ambiente) {
       const url = nuovo URL(richiesta.url);
       const [percorso, ...params] = url.percorso.toLowerCase().replace(/^\//, '').split('/');
       
       let location = attendono env.REDIRECTS.get(percorso);
       
       se (posizione) {
         // Sostituisce i segnaposto con i parametri effettivi
         params.forEach((parametro, indice) => {
           posizione = posizione.sostituisci(`{${index}}`, param);
         });
         return Response.redirect(posizione, 301);
       }
       
       restituisce una nuova risposta(`Non trovato: ${percorso}`, { status: 404 });
     },
   };

Con questa configurazione, potresti avere una voce KV come "prodotto": "https://mystore.com/item/{0}/details" e usarla come yourshortlink.com/product/12345.

Fai clic su Monitoraggio e analisi

Implementa l'analisi di base registrando gli eventi di reindirizzamento:

   esportazione predefinita {
     fetch asincrono(richiesta, ambiente) {
       const url = nuovo URL(richiesta.url);
       const percorso = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const posizione = attendono env.REDIRECTS.get(percorso);
       
       se (posizione) {
         // Registra l'evento di reindirizzamento
         attendono env.REDIRECTS.put(`${percorso}_clicks`, (parseInt(await env.REDIRECTS.get(`${percorso}_clicks`) || '0') + 1).toString());
         return Response.redirect(posizione, 301);
       }
       
       restituisce una nuova risposta(`Non trovato: ${percorso}`, { status: 404 });
     },
   };

Pagine di errore personalizzate

Invece di una risposta 404 in testo semplice, restituisci una pagina HTML personalizzata:

   const notFoundPage = `
   
   
   
     
     
     Collegamento non trovato
     
       corpo { famiglia di caratteri: Arial, sans-serif; allineamento del testo: centro; imbottitura superiore: 50px; }
     
   
   
     Ops! Collegamento non trovato
     Il link breve che stai cercando non esiste.
   
   
   `;

   // Nella funzione di recupero:
   restituisce una nuova risposta (notFoundPage, { 
     stato: 404,
     intestazioni: { 'Tipo di contenuto': 'testo/html' }
   });

rate limiting

Implementare la limitazione della tariffa di base per prevenire gli abusi:

   esportazione predefinita {
     fetch asincrono(richiesta, ambiente) {
       const ip = request.headers.get('CF-Connecting-IP');
       const rateLimitKey = `ratelimit:${ip}`;
       const currentRequests = parseInt(await env.REDIRECTS.get(rateLimitKey) || '0');
       
       if (currentRequests > 100) { // Limite di 100 richieste al minuto
         return new Response('Limite di velocità superato', { status: 429 });
       }
       
       attendono env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});
       
       // Il resto della logica di reindirizzamento qui
     },
   };

Test A / B

Implementa semplici test A/B per i tuoi reindirizzamenti:

   esportazione predefinita {
     fetch asincrono(richiesta, ambiente) {
       const url = nuovo URL(richiesta.url);
       const percorso = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const locationA = attendono env.REDIRECTS.get(`${percorso}_A`);
       const locationB = attendono env.REDIRECTS.get(`${percorso}_B`);
       
       if (localitàA && localitàB) {
         posizione const = Math.random() < 0.5 ? posizioneA: posizioneB;
         return Response.redirect(posizione, 301);
       }
       
       // Fallback al reindirizzamento normale se il test A/B non è impostato
       const posizione = attendono env.REDIRECTS.get(percorso);
       se (posizione) {
         return Response.redirect(posizione, 301);
       }
       
       restituisce una nuova risposta(`Non trovato: ${percorso}`, { status: 404 });
     },
   };

Queste personalizzazioni ed espansioni aggiungono funzionalità significative al tuo sistema di reindirizzamento collettivo, rendendolo più flessibile, potente e informativo. Ognuna di queste funzionalità può essere ulteriormente perfezionata e ampliata in base alle esigenze e ai casi d'uso specifici.

Riepilogo: creazione di un abbreviatore di link personalizzato con Cloudflare Workers

In questo post del blog, abbiamo esplorato come creare un abbreviatore URL personalizzato potente e flessibile utilizzando Cloudflare Workers. Questa soluzione offre un approccio gratuito ed efficiente alla creazione di collegamenti brevi su larga scala.

TL; DR:

1. Cloudflare Workers fornisce una piattaforma serverless per implementare la logica di reindirizzamento personalizzata con distribuzione globale e bassa latenza.
2. La corretta configurazione DNS e l'impostazione dei percorsi di lavoro sono cruciali per connettere il tuo dominio personalizzato al lavoratore.
3. Un semplice lavoratore basato su JavaScript può gestire in modo efficiente scenari di reindirizzamento complessi.
4. Lo storage Key-Value (KV) di Cloudflare può essere sfruttato per creare mappe di reindirizzamento dinamiche e facilmente gestibili.
5. Funzionalità avanzate come reindirizzamenti parametrizzati, tracciamento dei clic, pagine di errore personalizzate, limitazione della velocità e test A/B possono essere implementate all'interno dell'ecosistema Worker.
6. Questo sistema offre notevoli vantaggi rispetto al tradizionale metodi di reindirizzamento, tra cui prestazioni migliorate, gestione più semplice e maggiore flessibilità.

La soluzione che abbiamo creato offre diversi vantaggi:

• Scalabilità: gestisce milioni di reindirizzamenti senza degrado delle prestazioni.
• Flessibilità: aggiungi, modifica o rimuovi facilmente i reindirizzamenti senza modificare la logica principale.
• Performance: sfrutta la rete globale di Cloudflare per reindirizzamenti rapidi in tutto il mondo.
• Personalizzazione: consente funzionalità avanzate come analisi e test A/B.
• Efficacia dei costi: Utilizza un'architettura serverless, riducendo potenzialmente i costi di hosting.
• Alternativa gratuita a servizi popolari come Bit.ly o Yourls per creare link brevi brandizzati su un dominio personalizzato.

Ora che hai compreso la potenza e la flessibilità di questo sistema di reindirizzamento basato su Cloudflare Worker, è il momento di metterlo in azione:

1. Se non l'hai già fatto, registrati per un account Cloudflare e familiarizza con la piattaforma Workers.
2. Implementa questo sistema per i tuoi collegamenti brevi con marchio o reindirizzamenti collettivi.
3. Sperimenta le funzionalità avanzate di cui abbiamo discusso per adattare il sistema alle tue esigenze specifiche.
4. Condividi le tue esperienze o fai domande nella sezione commenti qui sotto. Le tue intuizioni potrebbero aiutare gli altri nella comunità!
5. Per casi d'uso più avanzati o implementazioni personalizzate, valuta la possibilità di contattare un esperto di Cloudflare Workers o un servizio di consulenza.

Rimani curioso, continua a imparare e non esitare a superare i limiti di ciò che è possibile con strumenti come Cloudflare Workers.