V tomto príspevku sa s vami podelím ako si môžete vytvoriť svoj vlastný vlastný skracovač adresy URL domény pomocou Cloudflare Workers. Či už ste webový vývojár, ktorý si chce pridať ďalší nástroj na svoj opasok, vlastník firmy, ktorý chce označiť svoje odkazy bez vysokej ceny, alebo len niekto, kto sa rád hrá s webovými technológiami, tento podrobný sprievodca je určený pre vy.
Ako webový vývojár a technologický nadšenec ma vždy fascinovali maličkosti, vďaka ktorým je internet efektívnejší a užívateľsky prívetivejší. Jedného dňa, keď som s kolegom zdieľal obzvlášť dlhú a nepraktickú adresu URL, zistil som, že túžim po jednoduchom a prispôsobenom spôsobe skrátenia odkazov. Iste, existuje veľa služieb na skracovanie adries URL, ale chcel som niečo, čo by bolo viac „ja“ – niečo, čo by som si mohol prispôsobiť a ovládať.
Vtedy som narazil na myšlienku vytvoriť si vlastný skracovač URL pomocou Cloudflare Workers. Bolo to ako nájsť skrytý poklad v obrovskom mori webových technológií. Nielenže som mohol skrátiť adresy URL, ale mohol som to urobiť s vlastným názvom domény zadarmo! Nadšenie z tohto objavu mi pripomenulo, keď som prvýkrát nasadil webovú stránku – ten nával posilnenia a nekonečných možností.
To, čo urobilo tento objav ešte vzrušujúcejším, bolo zistenie, že môže slúžiť ako fantastická bezplatná alternatíva k obľúbeným službám ako Bit.ly alebo TinyURL na vytváranie značkových krátkych odkazov na vlastnej doméne. Mnoho firiem a jednotlivcov platí za tento druh funkcií slušné peniaze, no tu je spôsob, ako dosiahnuť rovnaký výsledok bez toho, aby ste minuli cent.
Krok 1: Zaregistrujte si názov domény (použite krátku doménu)
Prvým krokom pri vytváraní vlastného skracovača adries URL je registrácia názvu domény. Toto bude základ vašich značkových krátkych odkazov, takže vyberajte múdro!
Tu je niekoľko tipov, ktoré vám pomôžu vybrať dokonalú doménu:
- Nechajte to krátke: Celý zmysel skracovača adries URL je vytvárať výstižné odkazy. Ak je to možné, hľadajte názvy domén s 3 až 5 znakmi. Môže to byť skratka, akronym alebo chytľavé slovo.
- Nech je to nezabudnuteľné: Vyberte niečo, čo si ľahko zapamätáte a napíšte. To vám a ostatným uľahčí používanie vašich skrátených odkazov.
- Zvážte svoju značku: Ak to používate pre obchodnú alebo osobnú značku, skúste doménu zosúladiť s vašou existujúcou identitou značky.
- Skontrolovať dostupnosť: Krátke, chytľavé domény sú veľmi žiadané. Možno budete musieť byť kreatívni alebo zvážiť alternatívne domény najvyššej úrovne (TLD), ako sú .io, .co alebo .me, ak vaša prvá voľba nie je k dispozícii.
- Zamyslite sa nad TLD: Aj keď je doména .com populárna, nevyhýbajte sa iným TLD. Niektoré, napríklad .link alebo .click, by mohli byť obzvlášť vhodné pre skracovač adries URL.
Tu je niekoľko príkladov na inšpiráciu:
- abc.link
- go.io
- shrt.co
- zap.me
Po výbere domény si ju budete musieť kúpiť od registrátora domény. Niektoré populárne možnosti zahŕňajú:
- Namecheap
- GoDaddy
- CloudFlare (Odporúča sa – čo je tiež veľmi výhodné, pretože budeme používať Cloudflare Workers)
Pamätajte, že doména bude síce stáť peniaze, ale ide o jednorazový nákup ročne a zvyšok nášho nastavenia skracovača adries URL bude pomocou Cloudflare Workers bezplatný.
Tip pre profesionálov: Pred dokončením nákupu sa uistite, že doména nie je spojená so žiadnym spamom alebo škodlivou aktivitou. Jeho históriu môžete skontrolovať pomocou nástrojov ako Domain Tools alebo Wayback Machine.
S vašou nablýskanou novou doménou v ruke ste pripravení prejsť na ďalší krok: nastavenie Cloudflare pre vašu doménu. Ale tomu sa budeme venovať v ďalšej časti.
Krok 2: Nakonfigurujte záznamy DNS pre vašu doménu
Teraz, keď máte svoju doménu, je čas nastaviť konfiguráciu DNS. Tento krok je kľúčový pre zabezpečenie správneho fungovania vašich Cloudflare Workers s vašou novo zaregistrovanou doménou.
Poďme sa prejsť procesom:
1. Pridajte svoju doménu do Cloudflare
- Ak ste tak ešte neurobili, vytvorte si bezplatný účet Cloudflare.
- Na hlavnom paneli Cloudflare kliknite na „Pridať stránku“ a zadajte názov svojej domény.
- Cloudflare vyhľadá existujúce záznamy DNS. Odstráňte všetky záznamy, ktoré nájde (pokiaľ doménu nepoužívate aj na e-mail alebo iné dôležité služby, v takom prípade si ich ponechajte).
2. Aktualizujte názvové servery (tento krok ignorujte, ak je vaša doména registrovaná v Cloudflare)
- Cloudflare vám poskytne sadu nameserverov.
- Prejdite na webovú stránku svojho registrátora domény a nahraďte existujúce menné servery tými, ktoré poskytuje Cloudflare.
- Globálne rozšírenie tohto kroku môže trvať až 24 hodín.
3. Nakonfigurujte DNS záznamy
- V nastaveniach DNS služby Cloudflare pridáme dva nové záznamy A.
- Pridajte nasledujúce:
Typ: A
Názov: @
Obsah: 192.0.2.1
TTL: Auto
Stav servera proxy: Sprostredkovaný (oranžový oblak - veľmi dôležité)
Typ: A
Názov: www
Obsah: 192.0.2.1
TTL: Auto
Stav servera proxy: Sprostredkovaný (oranžový oblak - veľmi dôležité)
Táto IP adresa 192.0.2.1 je špeciálna „fiktívna“ adresa. Je vyhradený pre dokumentáciu a testovanie, vďaka čomu je ideálny pre naše potreby.
4. Povoľte Cloudflare Proxy
- Skontrolujte, či je pre váš záznam DNS povolený stav servera proxy (ikona oranžového oblaku).
- To umožňuje Cloudflare proxy váš prenos a je potrebné na fungovanie Cloudflare Workers.
5. Overte konfiguráciu
- Keď sa zmena názvového servera rozšíri, Cloudflare zobrazí vašu doménu ako „Aktívnu“.
- Môžete si to overiť na hlavnom paneli Cloudflare.
Kľúčovým bodom je, že vašu doménu nenasmerujeme na žiadny skutočný webhosting. Adresa 192.0.2.1 je len zástupný symbol. Váš Cloudflare Worker, ktorého nastavíme ako ďalší, bude zachytávať všetky požiadavky na vašu doménu a spracovávať logiku skracovania adries URL.
Tip pre profesionálov: Toto nastavenie znamená, že nemusíte platiť ani spravovať žiadny webhosting. Cloudflare Workers zvládne všetko ťažké zdvíhanie, vďaka čomu je toto riešenie nielen bezplatné, ale aj neuveriteľne ľahké a ľahko sa udržiava.
So správne nakonfigurovaným DNS ste teraz pripravení prejsť na vzrušujúcu časť – nastavenie vášho Cloudflare Worker na spracovanie skrátenia URL.
Krok 3: Vytvorenie Cloudflare Worker
Teraz, keď máme našu doménu nakonfigurovanú v Cloudflare, je čas vytvoriť pracovníka, ktorý bude spracovávať naše presmerovania. Cloudflare Workers poskytujú bezserverové spúšťacie prostredie, ktoré nám umožňuje spúšťať náš kód na hranici, blízko k našim používateľom, aby sme dosiahli optimálny výkon.
1. Vytvorte Cloudflare Worker
- Vstup do sekcie Pracovníci:
- Prihláste sa do svojho hlavného panela Cloudflare.
- Na bočnom paneli prejdite do sekcie Pracovníci.
- Kliknite na „Vytvoriť službu“, ak je toto váš prvý pracovník, alebo na „Vytvoriť pracovníka“, ak už máte existujúcich pracovníkov.
- Pomenujte svojho pracovníka:
- Vyberte pre svojho pracovníka popisný názov, napríklad „obslužný nástroj hromadných presmerovaní“.
- Kliknutím na „Vytvoriť službu“ prejdite do editora.
- Písanie pracovného skriptu:
- V editore nahraďte predvolený kód skriptom obsluhy presmerovania:
exportovať predvolené {
async fetch(request) {
const redirectMap = nová mapa([
["google“, „https://www.google.com?subId1=google"],
["bing", "https://www.bing.com?subId1=bing"],
// Podľa potreby sem pridajte ďalšie presmerovania
]);
const url = nová adresa URL (požiadavka.url);
console.log("Úplná adresa URL:", url.toString());
console.log("Názov hostiteľa:", url.názov hostiteľa);
console.log("Cesta:", url.cesta);
nech cesta = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
if (url.hostname.includes('workers.dev')) {
path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
}
console.log("Spracovaná cesta:", cesta);
const location = redirectMap.get(cesta);
console.log("Umiestnenie presmerovania:", umiestnenie);
// Zmeňte na 301 pre trvalé presmerovanie
if (location) {
return Response.redirect(umiestnenie, 302);
}
// Ak požiadavka nie je na mape, vráťte 404 alebo vami preferovanú rezervu
return new Response(`Nenájdené: ${cesta}`, { stav: 404 });
},
};
- Pochopenie skriptu:
- Definujeme a redirectMap ktorý obsahuje naše krátke cesty a ich zodpovedajúce úplné adresy URL.
["google“, „https://www.google.com?subId1=google"],
yourshorturl.com/google presmeruje na -> https://www.google.com?subId1=google
["bing", "https://www.bing.com?subId1=bing"],
yourshorturl.com/bing presmeruje na -> https://www.bing.com?subId1=bing
- Skript spracuje prichádzajúce požiadavky, extrahuje cestu a skontroluje, či sa zhoduje s niektorým z našich definovaných presmerovaní.
- Ak sa nájde zhoda, vráti 302 (dočasné presmerovanie) na zodpovedajúcu adresu URL.
- Ak sa nenájde žiadna zhoda, vráti odpoveď 404 Nenájdené.
- Testovanie pracovníka:
- Na vykonanie zmien a otestovanie svojho pracovníka použite funkciu „Quick Edit“ na ovládacom paneli Cloudflare.
- Môžete použiť dodaný testovací nástroj HTTP na simuláciu požiadaviek a zistiť, ako váš pracovník reaguje.
- Nasadenie pracovníka:
- Keď budete so svojimi testami spokojní, kliknite na „Uložiť a nasadiť“, aby sa váš pracovník aktivoval.
- Nastavenie pracovných trás:
- Po nasadení prejdite na kartu „Spúšťače“ pre svojho pracovníka.
- Pridajte trasu, ktorá zodpovedá vašej doméne, ako napr *recommends.link/*.
- Tým sa zabezpečí, že všetky požiadavky na vašu doménu spracuje tento pracovník.
- Overenie nastavenia:
- Skúste získať prístup k niekoľkým vašim presmerovacím cestám (napr. https://recommends.link/url-shortener-guide), aby ste sa uistili, že fungujú podľa očakávania.
- Skontrolujte denníky pracovníkov na svojom informačnom paneli Cloudflare, aby ste videli výstup konzoly a overili, či sa cesty spracovávajú správne.
Krok 4: Ďalšie prispôsobenia (voliteľné)
Dynamické presmerovania s Cloudflare KV
Aby bol náš systém presmerovania flexibilnejší a ľahšie spravovateľný, môžeme na ukladanie našich presmerovaní použiť úložisko Cloudflare KV (Key-Value):
Vytvorte priestor názvov KV:
- Na hlavnom paneli Cloudflare prejdite na Workers > KV. Kliknite na „Vytvoriť priestor názvov“ a pomenujte ho (napr. „REDIRECT_MAP“).
- Prejdite do nastavení svojho pracovníka. V časti „Väzby názvového priestoru KV“ pridajte novú väzbu. Vyberte si svoj KV menný priestor a dajte mu názov premennej (napr. PRESMEROVANIA).
exportovať predvolené {
async fetch(request, env) {
const url = nová adresa URL (požiadavka.url);
const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
const location = wait env.REDIRECTS.get(cesta);
if (location) {
return Response.redirect(umiestnenie, 301);
}
return new Response(`Nenájdené: ${cesta}`, { stav: 404 });
},
};
Teraz môžete pridávať, aktualizovať alebo odstraňovať presmerovania úpravou úložiska KV bez zmeny kódu Worker.
Parametrizované presmerovania
Povoľte vo svojich presmerovaniach dynamické parametre:
exportovať predvolené {
async fetch(request, env) {
const url = nová adresa URL (požiadavka.url);
const [cesta, ...paramy] = url.pathname.toLowerCase().replace(/^\//, '').split('/');
nech umiestnenie = čaká env.REDIRECTS.get(cesta);
if (location) {
// Nahraďte zástupné symboly skutočnými parametrami
params.forEach((param, index) => {
umiestnenie = location.replace(`{${index}}`, param);
});
return Response.redirect(umiestnenie, 301);
}
return new Response(`Nenájdené: ${cesta}`, { stav: 404 });
},
};
S týmto nastavením by ste mohli mať položku KV ako „produkt“ : „https://mystore.com/item/{0}/details“ a použiť ju ako yourshortlink.com/product/12345.
Kliknite na položku Sledovanie a analýza
Implementujte základnú analýzu protokolovaním udalostí presmerovania:
exportovať predvolené {
async fetch(request, env) {
const url = nová adresa URL (požiadavka.url);
const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
const location = wait env.REDIRECTS.get(cesta);
if (location) {
// Zaznamenajte udalosť presmerovania
wait env.REDIRECTS.put(`${path}_clicks`, (parseInt(await env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
return Response.redirect(umiestnenie, 301);
}
return new Response(`Nenájdené: ${cesta}`, { stav: 404 });
},
};
Vlastné chybové stránky
Namiesto jednoduchej textovej odpovede 404 vráťte vlastnú HTML stránku:
const notFoundPage = `
Odkaz sa nenašiel
telo { font-family: Arial, bezpätkové; text-align: center; padding-top: 50px; }
Ojoj! Odkaz sa nenašiel
Krátky odkaz, ktorý hľadáte, neexistuje.
`;
// Vo vašej funkcii načítania:
return new Response(notFoundPage, {
stav: 404,
hlavičky: { 'Content-Type': 'text/html' }
});
obmedzenie rýchlosti
Implementujte základné obmedzenie sadzieb, aby ste zabránili zneužitiu:
exportovať predvolené {
async fetch(request, env) {
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 100 požiadaviek za minútu
return new Response('Prekročený limit rýchlosti', { stav: 429 });
}
wait env.REDIRECTS.put(rateLimitKey, (aktuálne požiadavky + 1).toString(), {expirationTtl: 60});
// Tu je zvyšok logiky presmerovania
},
};
Testovanie A / B
Implementujte jednoduché A/B testovanie pre vaše presmerovania:
exportovať predvolené {
async fetch(request, env) {
const url = nová adresa URL (požiadavka.url);
const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
const locationA = wait env.REDIRECTS.get(`${cesta}_A`);
const locationB = wait env.REDIRECTS.get(`${cesta}_B`);
if (locationA && locationB) {
const location = Math.random() < 0.5 ? umiestnenieA: umiestnenieB;
return Response.redirect(umiestnenie, 301);
}
// Návrat k normálnemu presmerovaniu, ak nie je nastavený A/B test
const location = wait env.REDIRECTS.get(cesta);
if (location) {
return Response.redirect(umiestnenie, 301);
}
return new Response(`Nenájdené: ${cesta}`, { stav: 404 });
},
};
Tieto prispôsobenia a rozšírenia dodávajú vášmu systému hromadného presmerovania významnú funkčnosť, vďaka čomu je flexibilnejší, výkonnejší a informatívnejší. Každá z týchto funkcií môže byť ďalej vylepšená a rozšírená na základe vašich špecifických potrieb a prípadov použitia.
Zhrnutie: Vytvorenie vlastného skracovača odkazov s Cloudflare Workers
V tomto blogovom príspevku sme skúmali, ako vytvoriť výkonný a flexibilný vlastný skracovač adries URL pomocou Cloudflare Workers. Toto riešenie ponúka bezplatný a efektívny prístup k vytváraniu krátkych odkazov vo veľkom rozsahu.
TL; DR:
- Cloudflare Workers poskytujú platformu bez servera na implementáciu vlastnej logiky presmerovania s globálnou distribúciou a nízkou latenciou.
- Správna konfigurácia DNS a nastavenie Worker Routes sú kľúčové pre pripojenie vašej vlastnej domény k Workerovi.
- Jednoduchý pracovník založený na JavaScripte dokáže efektívne zvládnuť zložité scenáre presmerovania.
- Úložisko Key-Value (KV) Cloudflare možno využiť na vytváranie dynamických, ľahko spravovateľných máp presmerovania.
- V rámci ekosystému Worker možno implementovať pokročilé funkcie, ako sú parametrizované presmerovania, sledovanie kliknutí, vlastné chybové stránky, obmedzenie rýchlosti a A/B testovanie.
- Tento systém ponúka oproti tradičným značné výhody metódy presmerovaniavrátane zlepšeného výkonu, jednoduchšej správy a zvýšenej flexibility.
Riešenie, ktoré sme vytvorili, ponúka niekoľko výhod:
- škálovateľnosť: Zvláda milióny presmerovaní bez zníženia výkonu.
- flexibilita: Jednoducho pridajte, upravte alebo odstráňte presmerovania bez zmeny základnej logiky.
- výkon: Využíva globálnu sieť Cloudflare na rýchle presmerovania po celom svete.
- Prispôsobenie: Umožňuje pokročilé funkcie, ako sú analýzy a A/B testovanie.
- Efektivita nákladov: Využíva architektúru bez servera, čo potenciálne znižuje náklady na hosting.
- Bezplatná alternatíva k obľúbeným službám ako Bit.ly alebo Yourls na vytváranie značkových krátkych odkazov na vlastnej doméne.
Teraz, keď ste pochopili silu a flexibilitu tohto systému presmerovania založeného na Cloudflare Worker, je čas ho uviesť do činnosti:
- Ak ste tak ešte neurobili, zaregistrujte si účet Cloudflare a oboznámte sa s platformou Workers.
- Implementujte tento systém pre svoje vlastné značkové krátke odkazy alebo hromadné presmerovania.
- Experimentujte s pokročilými funkciami, o ktorých sme hovorili, aby ste systém prispôsobili vašim špecifickým potrebám.
- Podeľte sa o svoje skúsenosti alebo položte otázky v sekcii komentárov nižšie. Vaše poznatky môžu pomôcť ostatným v komunite!
- V prípade pokročilejších prípadov použitia alebo vlastných implementácií zvážte oslovenie odborníka alebo konzultačnej služby Cloudflare Workers.
Zostaňte zvedaví, neprestávajte sa učiť a neváhajte posunúť hranice toho, čo je možné s nástrojmi ako Cloudflare Workers.
