Napravite besplatni skraćivač URL-ova prilagođene domene (s Cloudflare Workers)

U ovom postu ću podijeliti s vama kako možete izraditi vlastiti prilagođeni skraćivač URL-ova domene koristeći Cloudflare Workers. Bez obzira jeste li web programer koji želi dodati još jedan alat u svoj pojas, vlasnik tvrtke koji želi brendirati svoje veze bez visoke cijene ili samo netko tko se voli petljati s web tehnologijama, ovaj vodič korak po korak namijenjen je vas.

Kao web programer i tehnološki entuzijast, uvijek su me fascinirale male stvari koje internet čine učinkovitijim i lakšim za korištenje. Jednog dana, dok sam s kolegom dijelio posebno dugačak i glomazan URL, zatekao sam želju za jednostavnim, personaliziranim načinom skraćivanja veza. Naravno, postoji mnogo usluga za skraćivanje URL-ova, ali želio sam nešto što se više čini "ja" - nešto što mogu prilagoditi i kontrolirati.

Tada sam naletio na ideju stvaranja vlastitog skraćivača URL-ova pomoću Cloudflare Workersa. Bilo je to poput pronalaska skrivenog blaga u golemom moru web tehnologija. Ne samo da sam mogao skratiti URL-ove, već sam to mogao učiniti sa svojim imenom domene, besplatno! Uzbuđenje zbog ovog otkrića podsjetilo me na prvi put kada sam postavio web stranicu – taj nalet osnaživanja i beskrajnih mogućnosti.

Ono što je ovo otkriće učinilo još uzbudljivijim je spoznaja da može poslužiti kao fantastična, besplatna alternativa popularnim uslugama poput Bit.ly ili TinyURL za stvaranje brendiranih kratkih poveznica na prilagođenoj domeni. Mnoge tvrtke i pojedinci plaćaju dobre novce za ovu vrstu funkcionalnosti, ali evo načina da postignete isti rezultat bez trošenja novčića.

Korak 1: Registrirajte naziv domene (koristite kratku domenu)

Prvi korak u stvaranju prilagođenog skraćivača URL-ova je registracija naziva domene. Ovo će biti temelj vaših brendiranih kratkih veza, stoga birajte mudro!

Evo nekoliko savjeta koji će vam pomoći da odaberete savršenu domenu:

1. Neka bude kratko: Cijela poanta skraćivača URL-ova je stvaranje sažetih veza. Potražite imena domena s 3-5 znakova ako je moguće. To može biti skraćenica, akronim ili privlačna riječ.
2. Učinite to nezaboravnim: Odaberite nešto što je lako zapamtiti i upišite. To će vama i drugima olakšati korištenje vaših skraćenih poveznica.
3. Razmotrite svoju marku: Ako ovo koristite za poslovnu ili osobnu robnu marku, pokušajte uskladiti domenu s postojećim identitetom robne marke.
4. Provjera dostupnosti: Kratke, privlačne domene su vrlo tražene. Možda ćete morati biti kreativni ili razmisliti o alternativnim domenama najviše razine (TLD-ovima) kao što su .io, .co ili .me ako vaš prvi izbor nije dostupan.
5. Razmislite o TLD-u: Iako je .com popularan, ne bježite od drugih TLD-ova. Neki, poput .link ili .click, mogu biti posebno prikladni za skraćivanje URL-ova.

Evo nekoliko primjera koji će vas inspirirati:

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

Nakon što odaberete svoju domenu, morat ćete je kupiti od registra domene. Neke popularne opcije uključuju:

• Namecheap
• GoDaddy
• CloudFlare (Preporučeno – što je također vrlo zgodno jer ćemo koristiti Cloudflare Workers)

Upamtite, iako će domena koštati, to je jednokratna kupnja godišnje, a ostatak našeg podešavanja za skraćivanje URL-ova bit će besplatan uz korištenje Cloudflare Workers.

Profesionalni savjet: prije dovršetka kupnje provjerite nije li domena povezana s neželjenom poštom ili zlonamjernim aktivnostima. Možete provjeriti njegovu povijest pomoću alata kao što su Domain Tools ili Wayback Machine.

Sa svojom sjajnom novom domenom u ruci, spremni ste prijeći na sljedeći korak: postavljanje Cloudflarea za svoju domenu. Ali o tome ćemo govoriti u sljedećem odjeljku.

Korak 2: Konfigurirajte DNS zapise za svoju domenu

Sada kada imate svoju domenu, vrijeme je da postavite DNS konfiguraciju. Ovaj je korak ključan za osiguravanje ispravnog rada vaših Cloudflare Workera s vašom novoregistriranom domenom.

Prođimo kroz proces:

1. Dodajte svoju domenu u Cloudflare

• Ako to već niste učinili, kreirajte besplatni Cloudflare račun.
• Na nadzornoj ploči Cloudflare kliknite "Dodaj web mjesto" i unesite naziv svoje domene.
• Cloudflare će skenirati postojeće DNS zapise. Izbrišite sve zapise koje pronađe (osim ako domenu ne koristite i za e-poštu ili druge važne usluge, u kojem slučaju ih zadržite).

2. Ažurirajte poslužitelje naziva (zanemarite ovaj korak ako je vaša domena registrirana na Cloudflareu)

• Cloudflare će vam pružiti skup poslužitelja imena.
• Idite na web mjesto registrara svoje domene i zamijenite postojeće poslužitelje imena onima koje nudi Cloudflare.
• Ovaj korak može potrajati do 24 sata da se proširi globalno.

3. Konfigurirajte DNS zapise

• U vašim Cloudflare DNS postavkama dodat ćemo dva nova A zapisa.
• Dodajte sljedeće:

Tip: A
Ime: @
Sadržaj: 192.0.2.1
TTL: automobil
Status proxyja: Proksiran (narančasti oblak - vrlo važno)

Tip: A
Ime: www
Sadržaj: 192.0.2.1
TTL: automobil
Status proxyja: Proksiran (narančasti oblak - vrlo važno)

Ova 192.0.2.1 IP je posebna "lažna" adresa. Rezerviran je za dokumentaciju i testiranje, što ga čini savršenim za naše potrebe.

4. Omogućite Cloudflare proxy

• Provjerite je li proxy status (ikona narančastog oblaka) omogućen za vaš DNS zapis.
• To omogućuje Cloudflareu proxy vaš promet i neophodno je za rad Cloudflare Workersa.

5. Provjerite konfiguraciju

• Nakon što se promjena poslužitelja imena proširi, Cloudflare će prikazati vašu domenu kao "Aktivnu".
• To možete provjeriti na Cloudflare nadzornoj ploči.

Ključna točka ovdje je da vašu domenu ne usmjeravamo ni na kakav stvarni web hosting. Adresa 192.0.2.1 samo je rezervirano mjesto. Vaš Cloudflare Worker, kojeg ćemo postaviti sljedeći, presret će sve zahtjeve prema vašoj domeni i upravljati logikom skraćivanja URL-a.

Stručni savjet: Ova postavka znači da ne morate plaćati niti upravljati web hostingom. Cloudflare Workers podnijet će sav težak posao, čineći ovo rješenje ne samo besplatnim, već i nevjerojatno laganim i lakim za održavanje.

S pravilno konfiguriranim DNS-om, sada ste spremni prijeći na uzbudljivi dio – postavljanje Cloudflare Worker-a za rukovanje skraćivanjem URL-ova.

Korak 3: Stvaranje Cloudflare Worker-a

Sada kada imamo našu domenu konfiguriranu u Cloudflareu, vrijeme je da stvorimo Worker koji će upravljati našim preusmjeravanjima. Cloudflare Workers pružaju okruženje za izvršavanje bez poslužitelja koje nam omogućuje pokretanje našeg koda na rubu, blizu naših korisnika za optimalnu izvedbu.

1. Stvorite Cloudflare Worker

• Pristup odjeljku za radnike:
  • Prijavite se na svoju Cloudflare nadzornu ploču.
  • Dođite do odjeljka "Radnici" s bočne trake.
  • Kliknite na "Create a Service" ako je ovo vaš prvi radnik ili "Create Worker" ako već imate postojeće radnike.
• Imenujte svog radnika:
  • Odaberite opisni naziv za svog radnika, kao što je "obrađivač skupnih preusmjeravanja".
  • Kliknite "Stvori uslugu" za nastavak uređivača.
• Pisanje radničke skripte:
  • U uređivaču zamijenite zadani kod skriptom rukovatelja preusmjeravanja:

izvoz zadani {
  asinkroni dohvat(zahtjev) {
    const redirectMap = nova karta([
      ["google", "https://www.google.com?subId1=google"],
      ["bing", "https://www.bing.com?subId1=bing"],
      // Dodajte više preusmjeravanja ovdje prema potrebi
    ]);

    const url = novi URL(request.url);
    console.log("Puni URL:", url.toString());
    console.log("Ime glavnog računala:", url.ime glavnog računala);
    console.log("Ime putanje:", url.ime putanje);

    neka staza = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
    
    if (url.hostname.includes('workers.dev')) {
      put = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
    }
    
    console.log("Obrađeni put:", put);
    
    const lokacija = redirectMap.get(put);
    console.log("Lokacija preusmjeravanja:", lokacija);

// Promjena u 301 za Trajno preusmjeravanje
    ako (lokacija) {
      return Response.redirect(location, 302);
    }
    
    // Ako zahtjev nije u karti, vratite 404 ili željenu zamjenu
    return new Response(`Nije pronađeno: ${path}`, { status: 404 });
  },
};

• Razumijevanje skripte:
  • Definiramo a redirectMap koji sadrži naše kratke putove i njihove odgovarajuće pune URL-ove.

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

yourshorturl.com/google preusmjerava na -> https://www.google.com?subId1=google

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

yourshorturl.com/bing preusmjerava na -> https://www.bing.com?subId1=bing

• Skripta obrađuje dolazne zahtjeve, izdvaja stazu i provjerava podudara li se s nekim od naših definiranih preusmjeravanja.
• Ako se pronađe podudaranje, vraća 302 (Privremeno preusmjeravanje) na odgovarajući URL.
• Ako se ne pronađe podudaranje, vraća se odgovor 404 Not Found.
• Testiranje radnika:
  • Upotrijebite značajku "Brzo uređivanje" na Cloudflare nadzornoj ploči za izmjene i testiranje svog Workera.
  • Možete upotrijebiti priloženi alat za testiranje HTTP-a za simulaciju zahtjeva i vidjeti kako vaš radnik odgovara.
• Raspoređivanje radnika:
  • Nakon što budete zadovoljni svojim testovima, kliknite na “Spremi i implementiraj” da bi vaš Worker postao živ.
• Postavljanje radnih ruta:

• Nakon implementacije idite na karticu "Okidači" za svog radnika.
• Dodajte rutu koja odgovara vašoj domeni, kao što je *recommends.link/*.
• Ovo osigurava da ovaj radnik obrađuje sve zahtjeve prema vašoj domeni.
• Provjera postavki:
  • Pokušajte pristupiti nekim svojim putovima preusmjeravanja (npr. https://recommends.link/url-shortener-guide) kako biste bili sigurni da rade prema očekivanjima.
  • Provjerite zapisnike radnika na nadzornoj ploči Cloudflarea da biste vidjeli izlaz konzole i potvrdili da se staze ispravno obrađuju.

Korak 4: Više prilagodbi (nije obavezno)

Dinamička preusmjeravanja uz Cloudflare KV

Kako bi naš sustav preusmjeravanja bio fleksibilniji i lakši za upravljanje, možemo koristiti Cloudflare KV (Key-Value) pohranu za pohranjivanje naših preusmjeravanja:

Stvorite KV imenski prostor:

• Na nadzornoj ploči Cloudflarea idite na Radnici > KV. Kliknite na “Create namespace” i dajte mu naziv (npr. “REDIRECT_MAP”).

Povežite prostor imena KV sa svojim Workerom:

• Idite na postavke svog radnika. U odjeljku “KV Namespace Bindings” dodajte novo vezanje. Odaberite svoj KV imenski prostor i dodijelite mu naziv varijable (npr. REDIRECTS).

Izmijenite Worker skriptu da koristi KV:

   izvoz zadani {
     async fetch(request, env) {
       const url = novi URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const lokacija = čekaj env.REDIRECTS.get(put);
       
       ako (lokacija) {
         return Response.redirect(location, 301);
       }
       
       return new Response(`Nije pronađeno: ${path}`, { status: 404 });
     },
   };

Sada možete dodati, ažurirati ili ukloniti preusmjeravanja modificiranjem KV pohrane bez mijenjanja koda radnika.

Parametrirana preusmjeravanja

Omogućite dinamičke parametre u svojim preusmjeravanjima:

   izvoz zadani {
     async fetch(request, env) {
       const url = novi URL(request.url);
       const [path, ...params] = url.pathname.toLowerCase().replace(/^\//, '').split('/');
       
       let location = await env.REDIRECTS.get(path);
       
       ako (lokacija) {
         // Zamijenite rezervirana mjesta stvarnim parametrima
         params.forEach((param, index) => {
           lokacija = lokacija.zamijeni(`{${index}}`, param);
         });
         return Response.redirect(location, 301);
       }
       
       return new Response(`Nije pronađeno: ${path}`, { status: 404 });
     },
   };

Uz ovu postavku, mogli biste imati KV unos poput "proizvod": "https://mystore.com/item/{0}/details" i koristiti ga kao vašakratka veza.com/product/12345.

Kliknite Praćenje i analitika

Implementirajte osnovnu analitiku bilježenjem događaja preusmjeravanja:

   izvoz zadani {
     async fetch(request, env) {
       const url = novi URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const lokacija = čekaj env.REDIRECTS.get(put);
       
       ako (lokacija) {
         // Zabilježi događaj preusmjeravanja
         čekaj env.REDIRECTS.put(`${path}_clicks`, (parseInt(await env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
         return Response.redirect(location, 301);
       }
       
       return new Response(`Nije pronađeno: ${path}`, { status: 404 });
     },
   };

Prilagođene stranice s pogreškama

Umjesto običnog tekstualnog odgovora 404, vratite prilagođenu HTML stranicu:

   const notFoundPage = `
   
   
   
     
     
     Link nije pronađen
     
       tijelo { obitelj-fontova: Arial, sans-serif; poravnanje teksta: središte; padding-top: 50px; }
     
   
   
     Ups! Link nije pronađen
     Kratka veza koju tražite ne postoji.
   
   
   `;

   // U vašoj funkciji dohvaćanja:
   return new Response(notFoundPage, { 
     status: 404,
     zaglavlja: { 'Content-Type': 'text/html' }
   });

Stopa Ograničavanje

Implementirajte osnovno ograničenje brzine kako biste spriječili zlouporabu:

   izvoz zadani {
     async fetch(request, env) {
       const ip = request.headers.get('CF-Connecting-IP');
       const rateLimitKey = `ratelimit:${ip}`;
       const currentRequests = parseInt(await env.REDIRECTS.get(rateLimitKey) || '0');
       
       if (currentRequests > 100) { // ograničenje od 100 zahtjeva po minuti
         return new Response('Ograničenje brzine premašeno', { status: 429 });
       }
       
       await env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});
       
       // Ostatak vaše logike preusmjeravanja ovdje
     },
   };

A / B testiranje

Implementirajte jednostavno A/B testiranje za svoja preusmjeravanja:

   izvoz zadani {
     async fetch(request, env) {
       const url = novi URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const locationA = čekaj env.REDIRECTS.get(`${path}_A`);
       const locationB = čekaj env.REDIRECTS.get(`${path}_B`);
       
       ako (lokacijaA && lokacijaB) {
         const lokacija = Math.random() < 0.5? lokacijaA : lokacijaB;
         return Response.redirect(location, 301);
       }
       
       // Povratak na normalno preusmjeravanje ako A/B test nije postavljen
       const lokacija = čekaj env.REDIRECTS.get(put);
       ako (lokacija) {
         return Response.redirect(location, 301);
       }
       
       return new Response(`Nije pronađeno: ${path}`, { status: 404 });
     },
   };

Ove prilagodbe i proširenja dodaju značajnu funkcionalnost vašem sustavu skupnog preusmjeravanja, čineći ga fleksibilnijim, snažnijim i informativnijim. Svaka od ovih značajki može se dodatno poboljšati i proširiti na temelju vaših specifičnih potreba i slučajeva korištenja.

Sažetak: Stvaranje prilagođenog skraćivača veza s Cloudflare Workerima

Kroz ovaj post na blogu istraživali smo kako stvoriti moćan i fleksibilan prilagođeni skraćivač URL-ova pomoću Cloudflare Workersa. Ovo rješenje nudi besplatan i učinkovit pristup stvaranju kratkih veza u velikom broju.

TL; DR:

1. Cloudflare Workers pružaju platformu bez poslužitelja za implementaciju prilagođene logike preusmjeravanja s globalnom distribucijom i niskom latencijom.
2. Ispravna konfiguracija DNS-a i postavljanje radnih ruta presudni su za povezivanje vaše prilagođene domene s radnikom.
3. Jednostavan Worker koji se temelji na JavaScriptu može učinkovito rješavati složene scenarije preusmjeravanja.
4. Cloudflareov Key-Value (KV) pohranjivanje može se iskoristiti za stvaranje dinamičkih mapa preusmjeravanja kojima se lako upravlja.
5. Napredne značajke poput parametriziranih preusmjeravanja, praćenja klikova, prilagođenih stranica s pogreškama, ograničenja stope i A/B testiranja mogu se implementirati unutar ekosustava Worker.
6. Ovaj sustav nudi značajne prednosti u odnosu na tradicionalni metode preusmjeravanja, uključujući poboljšane performanse, lakše upravljanje i poboljšanu fleksibilnost.

Rješenje koje smo izgradili nudi nekoliko prednosti:

• skalabilnost: Obrađuje milijune preusmjeravanja bez degradacije performansi.
• Fleksibilnost: Jednostavno dodajte, modificirajte ili uklonite preusmjeravanja bez mijenjanja osnovne logike.
• Izvođenje: Iskorištava Cloudflareovu globalnu mrežu za brza preusmjeravanja diljem svijeta.
• Prilagodba: Omogućuje napredne značajke poput analitike i A/B testiranja.
• Isplativost: koristi arhitekturu bez poslužitelja, potencijalno smanjujući troškove hostinga.
• Besplatna alternativa na popularne servise poput Bit.ly ili Yourls za stvaranje brendiranih kratkih poveznica na prilagođenoj domeni.

Sada kada razumijete snagu i fleksibilnost ovog sustava za preusmjeravanje temeljenog na Cloudflare Workeru, vrijeme je da ga provedete u djelo:

1. Ako već niste, prijavite se za Cloudflare račun i upoznajte se s platformom Workers.
2. Implementirajte ovaj sustav za vlastite brendirane kratke veze ili skupna preusmjeravanja.
3. Eksperimentirajte s naprednim značajkama o kojima smo govorili kako biste prilagodili sustav svojim specifičnim potrebama.
4. Podijelite svoja iskustva ili postavite pitanja u odjeljku za komentare u nastavku. Vaši uvidi mogu pomoći drugima u zajednici!
5. Za naprednije slučajeve upotrebe ili prilagođene implementacije razmislite o tome da se obratite stručnjaku Cloudflare Workers ili konzultantskoj službi.

Ostanite znatiželjni, nastavite učiti i nemojte se ustručavati pomicati granice onoga što je moguće s alatima kao što je Cloudflare Workers.