Creați un program de scurtare a adreselor URL personalizate gratuit (cu Cloudflare Workers)

in Resurse și instrumente

Conținutul nostru este susținut de cititor. Dacă faceți clic pe linkurile noastre, este posibil să câștigăm un comision. Cum revizuim.

În această postare, voi împărtăși cu voi cum vă puteți crea propriul dispozitiv personalizat de scurtare a adreselor URL de domeniu folosind Cloudflare Workers. Indiferent dacă sunteți un dezvoltator web care dorește să adauge un alt instrument la centura dvs., un proprietar de afaceri care dorește să vă marcați linkurile fără prețul ridicat sau doar cineva căruia îi place să se ocupe de tehnologiile web, acest ghid pas cu pas este pentru tu.

Ca dezvoltator web și pasionat de tehnologie, am fost întotdeauna fascinat de micile lucruri care fac internetul mai eficient și mai ușor de utilizat. Într-o zi, în timp ce partajam o adresă URL deosebit de lungă și greoaie cu un coleg, m-am trezit să îmi doresc o modalitate simplă și personalizată de a scurta link-urile. Sigur, există o mulțime de servicii de scurtare a adreselor URL, dar îmi doream ceva care să simtă mai mult „eu” – ceva pe care l-aș putea personaliza și controla.

Atunci am dat peste ideea de a-mi crea propriul dispozitiv de scurtare a adreselor URL personalizate folosind Cloudflare Workers. Era ca și cum ai găsi o comoară ascunsă în marea vastă de tehnologii web. Nu numai că aș putea scurta adresele URL, dar aș putea face acest lucru cu propriul meu nume de domeniu, gratuit! Emoția acestei descoperiri mi-a reamintit de prima dată când am implementat un site web – acel val de împuternicire și posibilități nesfârșite.

Ceea ce a făcut această descoperire și mai interesantă a fost conștientizarea că ar putea servi drept o alternativă fantastică și gratuită la serviciile populare precum Bit.ly sau TinyURL pentru crearea de link-uri scurte de marcă pe un domeniu personalizat. Multe companii și persoane plătesc bani buni pentru acest tip de funcționalitate, dar iată o modalitate de a obține același rezultat fără a cheltui un ban.

Pasul 1: Înregistrați un nume de domeniu (utilizați un domeniu scurt)

    Primul pas în crearea dispozitivului de scurtare a adreselor URL personalizate este să înregistrați un nume de domeniu. Aceasta va fi fundamentul linkurilor dvs. scurte de marcă, așa că alegeți cu înțelepciune!

    Iată câteva sfaturi pentru a vă ajuta să alegeți domeniul perfect:

    1. Ține-l scurt: Scopul unui dispozitiv de scurtare a adreselor URL este de a crea linkuri concise. Căutați nume de domenii cu 3-5 caractere dacă este posibil. Aceasta ar putea fi o abreviere, un acronim sau un cuvânt captivant.
    2. Fă-l memorabil: Alegeți ceva ușor de reținut și de tastat. Acest lucru va face mai ușor pentru dvs. și pentru alții să utilizați linkurile dvs. scurtate.
    3. Luați în considerare marca dvs: Dacă îl utilizați pentru o marcă de afaceri sau personală, încercați să aliniați domeniul cu identitatea dvs. de marcă existentă.
    4. Verifică disponibilitatea: Domeniile scurte și captivante sunt la mare căutare. Poate fi necesar să fiți creativ sau să luați în considerare domeniile de nivel superior (TLD-uri) alternative precum .io, .co sau .me, dacă prima alegere nu este disponibilă.
    5. Gândiți-vă la TLD: Deși .com este popular, nu vă feriți de alte TLD-uri. Unele, cum ar fi .link sau .click, ar putea fi deosebit de potrivite pentru un dispozitiv de scurtare a adreselor URL.

    Iată câteva exemple care să te inspire:

    • abc.link
    • du-te.io
    • shrt.co
    • zap.me

    După ce ți-ai ales domeniul, va trebui să-l achiziționezi de la un registrator de domenii. Unele opțiuni populare includ:

    • NameCheap
    • GoDaddy
    • Cloudflare (Recomandat – ceea ce este, de asemenea, foarte convenabil, deoarece vom folosi Cloudflare Workers)

    Rețineți, deși domeniul va costa bani, este o achiziție o singură dată pe an, iar restul configurației noastre de scurtare URL va fi gratuită folosind Cloudflare Workers.

    Sfat profesionist: înainte de a finaliza achiziția, asigurați-vă că domeniul nu este asociat cu niciun spam sau activitate rău intenționată. Îi puteți verifica istoricul folosind instrumente precum Domain Tools sau Wayback Machine.

    Cu noul tău domeniu strălucitor în mână, ești gata să treci la următorul pas: configurarea Cloudflare pentru domeniul tău. Dar vom acoperi asta în secțiunea următoare.

    Pasul 2: Configurați înregistrările DNS pentru domeniul dvs

    Acum că aveți domeniul dvs., este timpul să configurați configurația DNS. Acest pas este crucial pentru a vă asigura că lucrătorii dvs. Cloudflare funcționează corect cu domeniul dvs. nou înregistrat.

    Cloudflare

    Să parcurgem procesul:

    1. Adăugați domeniul dvs. la Cloudflare

      • Dacă nu ați făcut deja acest lucru, creați un cont Cloudflare gratuit.
      • În tabloul de bord Cloudflare, faceți clic pe „Adăugați un site” și introduceți numele domeniului dvs.
      • Cloudflare va scana pentru înregistrările DNS existente. Ștergeți toate înregistrările pe care le găsește (cu excepția cazului în care utilizați și domeniul pentru e-mail sau alte servicii importante, caz în care păstrați-le).

      2. Actualizați serverele de nume (Ignorați acest pas dacă domeniul dvs. este înregistrat la Cloudflare)

        Servere de nume Cloudflare
        • Cloudflare vă va oferi un set de servere de nume.
        • Accesați site-ul web al registratorului de domenii și înlocuiți serverele de nume existente cu cele furnizate de Cloudflare.
        • Acest pas poate dura până la 24 de ore pentru a se propaga la nivel global.

        3. Configurați înregistrările DNS

        Gestionarea DNS Cloudflare
        • În setările dvs. Cloudflare DNS, vom adăuga două noi înregistrări A.
        • Adăugați următoarele:
        Tip: A
        Nume: @
        Conţinut: 192.0.2.1
        TTL: Auto
        Stare proxy: Proxy (nor portocaliu - foarte important)

        Tip: A
        Nume: www
        Conţinut: 192.0.2.1
        TTL: Auto
        Stare proxy: Proxy (nor portocaliu - foarte important)

        Acest IP 192.0.2.1 este o adresă „fachinică” specială. Este rezervat pentru documentare și testare, ceea ce îl face perfect pentru nevoile noastre.

        4. Activați Cloudflare Proxy

        • Asigurați-vă că starea proxy (pictograma portocalie cloud) este activată pentru înregistrarea dvs. DNS.
        • Acest lucru permite Cloudflare să vă proxy traficul și este necesar pentru funcționarea lucrătorilor Cloudflare.

        5. Verificați configurația

        • Odată ce modificarea serverului de nume s-a propagat, Cloudflare va afișa domeniul dvs. ca „Activ”.
        • Puteți verifica acest lucru în tabloul de bord Cloudflare.

          Punctul cheie aici este că nu direcționăm domeniul dvs. către nicio găzduire web reală. Adresa 192.0.2.1 este doar un substituent. Cloudflare Worker, pe care îl vom configura în continuare, va intercepta toate solicitările către domeniul dvs. și va gestiona logica de scurtare a adreselor URL.

          Sfat profesionist: această configurare înseamnă că nu trebuie să plătiți sau să gestionați nicio găzduire web. Lucrătorii Cloudflare se vor ocupa de toate sarcinile grele, făcând această soluție nu numai gratuită, ci și incredibil de ușoară și ușor de întreținut.

          Cu DNS-ul dvs. configurat corect, sunteți acum gata să treceți la partea interesantă - configurarea Cloudflare Worker pentru a se ocupa de scurtarea URL-ului.

          Pasul 3: Crearea unui lucrător Cloudflare

          Acum că avem domeniul nostru configurat în Cloudflare, este timpul să creăm Worker-ul care se va ocupa de redirecționările noastre. Lucrătorii Cloudflare oferă un mediu de execuție fără server care ne permite să rulăm codul nostru la margine, aproape de utilizatorii noștri pentru performanțe optime.

          1. Creați un lucrător Cloudflare

          • Accesarea secțiunii de muncitori:
            • Conectați-vă la tabloul de bord Cloudflare.
            • Navigați la secțiunea „Lucrători” din bara laterală.
            • Faceți clic pe „Creați un serviciu” dacă acesta este primul dvs. lucrător sau pe „Creați un lucrător” dacă aveți deja lucrători existenți.
          • Numiți-vă lucrătorul:
            • Alegeți un nume descriptiv pentru lucrătorul dvs., cum ar fi „bulk-redirects-handler”.
            • Faceți clic pe „Creați serviciu” pentru a trece la editor.
          • Scrierea scriptului pentru lucrător:
            • În editor, înlocuiți codul implicit cu scriptul de gestionare a redirecționării:
          export implicit {
          preluare asincronă (cerere) {
          const redirectMap = hartă nouă([
          ["google", "https://www.google.com?subId1=google"],
          [„bing”, „https://www.bing.com?subId1=bing”],
          // Adăugați mai multe redirecționări aici după cum este necesar
          ]);

          const url = URL nou (request.url);
          console.log(„Adresa URL completă:”, url.toString());
          console.log("Nume gazdă:", url.nume gazdă);
          console.log("Nume cale:", url.nume cale);

          let path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];

          dacă (url.hostname.includes('workers.dev')) {
          cale = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
          }

          console.log("Cale procesată:", cale);

          const locație = redirectMap.get(cale);
          console.log("Locație de redirecționare:", locație);

          // Schimbați la 301 pentru redirecționare permanentă
          dacă (locație) {
          return Response.redirect(locație, 302);
          }

          // Dacă cererea nu este în hartă, returnați un 404 sau alternativa preferată
          returnează un răspuns nou(`Nu a fost găsit: ${cale}`, { stare: 404});
          },
          };
          • Înțelegerea scenariului:
            • Definim a redirectMap care conține căile noastre scurte și adresele URL complete corespunzătoare.
                ["google", "https://www.google.com?subId1=google"],

          yourshorturl.com/google redirecționează către -> https://www.google.com?subId1=google

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

          yourshorturl.com/bing redirecționează către -> https://www.bing.com?subId1=bing
          • Scriptul procesează cererile primite, extrage calea și verifică dacă se potrivește cu oricare dintre redirecționările noastre definite.
          • Dacă se găsește o potrivire, returnează un 302 (Redirecționare temporară) la adresa URL corespunzătoare.
          • Dacă nu se găsește nicio potrivire, returnează un răspuns 404 Not Found.
          • Testarea lucrătorului:
            • Utilizați funcția „Editare rapidă” din tabloul de bord Cloudflare pentru a face modificări și a testa lucratorul.
            • Puteți utiliza instrumentul de testare HTTP furnizat pentru a simula solicitările și pentru a vedea cum răspunde lucrătorul dvs.
          • Desfășurarea lucrătorului:
            • Odată ce sunteți mulțumit de testele dvs., faceți clic pe „Salvați și implementați” pentru a vă activa lucrătorul.
          • Configurarea rutelor lucrătorilor:
          traseul lucrătorului cloudflare
          • După implementare, accesați fila „Declanșatoare” pentru lucrătorul dvs.
          • Adăugați o rută care se potrivește domeniului dvs., cum ar fi *recomands.link/*.
          • Acest lucru asigură că toate solicitările către domeniul dvs. sunt gestionate de acest lucrător.
          • Verificarea configurației:
            • Încercați să accesați câteva dintre căile dvs. de redirecționare (de exemplu, https://recommends.link/url-shortener-guide) pentru a se asigura că funcționează conform așteptărilor.
            • Verificați jurnalele lucrătorilor din tabloul de bord Cloudflare pentru a vedea rezultatul consolei și pentru a verifica dacă căile sunt procesate corect.

          Pasul 4: Mai multe personalizări (opțional)

          Redirecționări dinamice cu Cloudflare KV

          Pentru a face sistemul nostru de redirecționare mai flexibil și mai ușor de gestionat, putem folosi stocarea Cloudflare KV (Key-Value) pentru a stoca redirecționările noastre:

          Creați un spațiu de nume KV:

          • În tabloul de bord Cloudflare, accesați Lucrători > KV. Faceți clic pe „Creați spațiu de nume” și denumiți-l (de exemplu, „REDIRECT_MAP”).
          Leagă spațiul de nume KV cu lucrătorul tău:
          • Accesați setările lucrătorului dvs.. În „Legături KV Namespace”, adăugați o nouă legare. Alegeți spațiul de nume KV și dați-i un nume de variabilă (de ex., REDIRECȚI).
          Modificați scriptul Worker pentru a utiliza KV:

             export implicit {
          preluare asincronă (cerere, înv.) {
          const url = URL nou (request.url);
          cale const = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];

          const location = await env.REDIRECTS.get(cale);

          dacă (locație) {
          return Response.redirect(locație, 301);
          }

          returnează un răspuns nou(`Nu a fost găsit: ${cale}`, { stare: 404});
          },
          };

          Acum puteți adăuga, actualiza sau elimina redirecționări modificând magazinul KV fără a modifica codul de lucrător.

          Redirecționări parametrizate

          Permiteți parametri dinamici în redirecționări:

               export implicit {
            preluare asincronă (cerere, înv.) {
            const url = URL nou (request.url);
            const [cale, ...params] = url.pathname.toLowerCase().replace(/^\//, '').split('/');

            let location = await env.REDIRECTS.get(cale);

            dacă (locație) {
            // Înlocuiește substituenții cu parametri reali
            params.forEach((param, index) => {
            locație = location.replace(`{${index}}`, param);
            });
            return Response.redirect(locație, 301);
            }

            returnează un răspuns nou(`Nu a fost găsit: ${cale}`, { stare: 404});
            },
            };

            Cu această configurare, ați putea avea o intrare KV precum „produs”: „https://mystore.com/item/{0}/details” și să o utilizați ca yourshortlink.com/product/12345.

            Faceți clic pe Urmărire și analiză

            Implementați analiza de bază prin înregistrarea evenimentelor de redirecționare:

                 export implicit {
              preluare asincronă (cerere, înv.) {
              const url = URL nou (request.url);
              cale const = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];

              const location = await env.REDIRECTS.get(cale);

              dacă (locație) {
              // Înregistrează evenimentul de redirecționare
              await env.REDIRECTS.put(`${path}_clicks`, (parseInt(wait env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
              return Response.redirect(locație, 301);
              }

              returnează un răspuns nou(`Nu a fost găsit: ${cale}`, { stare: 404});
              },
              };

              Pagini de eroare personalizate

              În loc de un răspuns 404 text simplu, returnați o pagină HTML personalizată:

                   const notFoundPage = `





                Link nu a fost găsit

                body { font-family: Arial, sans-serif; text-align: centru; padding-top: 50px; }



                Hopa! Link nu a fost găsit
                Linkul scurt pe care îl cauți nu există.


                `;

                // În funcția ta de preluare:
                returnează un răspuns nou (notFoundPage, {
                stare: 404,
                anteturi: { „Content-Type”: „text/html” }
                });

                Rata de Limitarea

                Implementați limitarea ratei de bază pentru a preveni abuzul:

                     export implicit {
                  preluare asincronă (cerere, înv.) {
                  const ip = request.headers.get('CF-Connecting-IP');
                  const rateLimitKey = `ratelimit:${ip}`;
                  const currentRequests = parseInt(wait env.REDIRECTS.get(rateLimitKey) || '0');

                  if (currentRequests > 100) {// Limită de 100 de solicitări pe minut
                  return new Response('Limita ratei depășită', { status: 429 });
                  }

                  await env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});

                  // Restul logicii de redirecționare aici
                  },
                  };

                  Testarea A / B

                  Implementați testarea A/B simplă pentru redirecționările dvs.:

                       export implicit {
                    preluare asincronă (cerere, înv.) {
                    const url = URL nou (request.url);
                    cale const = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];

                    const locationA = await env.REDIRECTS.get(`${path}_A`);
                    const locationB = await env.REDIRECTS.get(`${path}_B`);

                    dacă (locațieA && locațieB) {
                    const locație = Math.random() < 0.5 ? locațieA : locațieB;
                    return Response.redirect(locație, 301);
                    }

                    // Redirecționare la redirecționare normală dacă testul A/B nu este configurat
                    const location = await env.REDIRECTS.get(cale);
                    dacă (locație) {
                    return Response.redirect(locație, 301);
                    }

                    returnează un răspuns nou(`Nu a fost găsit: ${cale}`, { stare: 404});
                    },
                    };

                    Aceste personalizări și extinderi adaugă funcționalități semnificative sistemului dvs. de redirecționare în bloc, făcându-l mai flexibil, mai puternic și mai informativ. Fiecare dintre aceste caracteristici poate fi rafinată și extinsă în continuare în funcție de nevoile dumneavoastră specifice și de cazurile de utilizare.

                    De-a lungul acestei postări pe blog, am explorat cum să creăm un dispozitiv de scurtare a adreselor URL personalizat puternic și flexibil folosind Cloudflare Workers. Această soluție oferă o abordare gratuită și eficientă pentru crearea de legături scurte la scară.

                    TL; DR:

                    1. Cloudflare Workers oferă o platformă fără server pentru implementarea unei logici de redirecționare personalizată cu distribuție globală și latență scăzută.
                    2. Configurarea corectă a DNS și configurarea rutelor de lucru sunt cruciale pentru conectarea domeniului personalizat la Worker.
                    3. Un simplu lucrător bazat pe JavaScript poate gestiona eficient scenarii complexe de redirecționare.
                    4. Stocarea Key-Value (KV) de la Cloudflare poate fi folosită pentru a crea hărți de redirecționare dinamice, ușor de gestionat.
                    5. Funcțiile avansate precum redirecționările parametrizate, urmărirea clicurilor, paginile de eroare personalizate, limitarea ratei și testarea A/B pot fi implementate în ecosistemul Worker.
                    6. Acest sistem oferă avantaje semnificative față de tradițional metode de redirecționare, inclusiv performanță îmbunătățită, management mai ușor și flexibilitate sporită.

                    Soluția pe care am construit-o oferă mai multe beneficii:

                    • scalabilitate: Gestionează milioane de redirecționări fără degradarea performanței.
                    • Flexibilitate: adăugați, modificați sau eliminați cu ușurință redirecționări fără a schimba logica de bază.
                    • Performanţă: Utilizează rețeaua globală Cloudflare pentru redirecționări rapide în întreaga lume.
                    • Personalizare: Permite funcții avansate, cum ar fi analiza și testarea A/B.
                    • Eficiența costurilor: Utilizează arhitectura fără server, reducând posibil costurile de găzduire.
                    • Alternativă gratuită la servicii populare precum Bit.ly sau Yourls pentru crearea de link-uri scurte de marcă pe un domeniu personalizat.

                    Acum că înțelegeți puterea și flexibilitatea acestui sistem de redirecționare bazat pe Cloudflare Worker, este timpul să îl puneți în acțiune:

                    1. Dacă nu ați făcut-o deja, înscrieți-vă pentru un cont Cloudflare și familiarizați-vă cu platforma Workers.
                    2. Implementați acest sistem pentru propriile linkuri scurte de marcă sau redirecționări în bloc.
                    3. Experimentați cu funcțiile avansate pe care le-am discutat pentru a adapta sistemul la nevoile dumneavoastră specifice.
                    4. Împărtășește-ți experiențele sau pune întrebări în secțiunea de comentarii de mai jos. Perspectivele dvs. ar putea ajuta pe alții din comunitate!
                    5. Pentru cazuri de utilizare mai avansate sau implementări personalizate, vă recomandăm să contactați un expert Cloudflare Workers sau un serviciu de consultanță.

                    Rămâneți curios, continuați să învățați și nu ezitați să depășiți limitele a ceea ce este posibil cu instrumente precum Cloudflare Workers.

                    Despre autor

                    Matt Ahlgren

                    Mathias Ahlgren este CEO și fondator al Website Rating, conducând o echipă globală de editori și scriitori. Deține un master în știința informației și management. Cariera sa s-a orientat către SEO după experiențele timpurii de dezvoltare web din timpul universității. Cu peste 15 ani în SEO, marketing digital și dezvoltatori web. Accentul său include și securitatea site-ului web, evidențiată de un certificat în Cyber ​​Security. Această expertiză diversă îi sprijină conducerea la Website Rating.

                    Acasă » Resurse și instrumente » Creați un program de scurtare a adreselor URL personalizate gratuit (cu Cloudflare Workers)
                    Distribuie la...