V tomto příspěvku se s vámi podělím jak si můžete vytvořit svůj vlastní zkracovač adresy URL domény pomocí Cloudflare Workers. Ať už jste webový vývojář, který si chce přidat další nástroj na svůj opasek, majitel firmy, který chce označit své odkazy bez vysoké cenovky, nebo jen někdo, kdo si rád pohrává s webovými technologiemi, tento podrobný průvodce je určen pro Vy.
Jako webový vývojář a technický nadšenec mě vždy fascinovaly maličkosti, díky kterým je internet efektivnější a uživatelsky přívětivější. Jednoho dne, když jsem s kolegou sdílel obzvláště dlouhou a nepraktickou adresu URL, zjistil jsem, že chci jednoduchý, personalizovaný způsob, jak zkrátit odkazy. Jistě, existuje spousta služeb pro zkracování adres URL, ale chtěl jsem něco, co by bylo více „já“ – něco, co bych si mohl přizpůsobit a ovládat.
Tehdy jsem narazil na myšlenku vytvořit si vlastní zkracovač URL pomocí Cloudflare Workers. Bylo to jako najít skrytý poklad v obrovském moři webových technologií. Nejen, že jsem mohl zkrátit adresy URL, ale mohl jsem to udělat s vlastním názvem domény, a to zdarma! Nadšení z tohoto objevu mi připomnělo, jak jsem poprvé nasadil webovou stránku – ten příval zmocnění a nekonečných možností.
Co učinilo tento objev ještě vzrušujícím, bylo zjištění, že může sloužit jako fantastická bezplatná alternativa k oblíbeným službám, jako je Bit.ly nebo TinyURL, pro vytváření značkových krátkých odkazů na vlastní doméně. Mnoho podniků a jednotlivců platí za tento druh funkčnosti slušné peníze, ale zde je způsob, jak dosáhnout stejného výsledku, aniž byste utratili desetník.
Krok 1: Zaregistrujte název domény (použijte krátkou doménu)
Prvním krokem při vytváření vlastního zkracovače adres URL je registrace názvu domény. To bude základem vašich značkových krátkých odkazů, takže vybírejte moudře!
Zde je několik tipů, které vám pomohou vybrat perfektní doménu:
- Mějte to krátký: Celý smysl zkracovače URL je vytvářet výstižné odkazy. Pokud je to možné, hledejte názvy domén s 3–5 znaky. Může to být zkratka, akronym nebo chytlavé slovo.
- Udělejte to nezapomenutelným: Vyberte něco, co si snadno zapamatujete a napište. To vám i ostatním usnadní používání vašich zkrácených odkazů.
- Zvažte svou značku: Pokud to používáte pro obchodní nebo osobní značku, zkuste doménu sladit s vaší stávající identitou značky.
- Zkontrolujte dostupnost: Krátké, chytlavé domény jsou velmi žádané. Možná budete muset být kreativní nebo zvážit alternativní domény nejvyšší úrovně (TLD), jako jsou .io, .co nebo .me, pokud vaše první volba není k dispozici.
- Přemýšlejte o TLD: I když je doména .com populární, nevyhýbejte se ostatním TLD. Některé, například .link nebo .click, by mohly být zvláště vhodné pro zkracovač adres URL.
Zde je několik příkladů pro inspiraci:
- abc.link
- go.io
- shrt.co
- zap.me
Jakmile si doménu vyberete, budete ji muset zakoupit od registrátora domény. Mezi oblíbené možnosti patří:
- Namecheap
- Do toho tati
- Cloudflare (Doporučeno – což je také velmi výhodné, protože budeme používat Cloudflare Workers)
Pamatujte, že i když bude doména stát peníze, jde o jednorázový nákup ročně a zbytek našeho nastavení zkracovače URL bude pomocí Cloudflare Workers zdarma.
Tip pro profesionály: Před dokončením nákupu se ujistěte, že doména není spojena s žádným spamem nebo škodlivými aktivitami. Jeho historii můžete zkontrolovat pomocí nástrojů jako Domain Tools nebo Wayback Machine.
S vaší zářnou novou doménou v ruce jste připraveni přejít k dalšímu kroku: nastavení Cloudflare pro vaši doménu. Ale tomu se budeme věnovat v další části.
Krok 2: Nakonfigurujte DNS záznamy pro vaši doménu
Nyní, když máte svou doménu, je čas nastavit konfiguraci DNS. Tento krok je zásadní pro zajištění správného fungování vašich Cloudflare Workers s vaší nově registrovanou doménou.
Pojďme si projít proces:
1. Přidejte svou doménu do Cloudflare
- Pokud jste tak ještě neučinili, vytvořte si zdarma účet Cloudflare.
- Na hlavním panelu Cloudflare klikněte na „Přidat web“ a zadejte název své domény.
- Cloudflare vyhledá existující záznamy DNS. Smažte všechny záznamy, které najde (pokud doménu nepoužíváte také pro e-mail nebo jiné důležité služby, v takovém případě si je ponechte).
2. Aktualizujte jmenné servery (tento krok ignorujte, pokud je vaše doména registrována u Cloudflare)
- Cloudflare vám poskytne sadu jmenných serverů.
- Přejděte na web svého registrátora domény a nahraďte stávající jmenné servery těmi, které poskytuje Cloudflare.
- Globální rozšíření tohoto kroku může trvat až 24 hodin.
3. Nakonfigurujte záznamy DNS
- V nastavení DNS Cloudflare přidáme dva nové záznamy A.
- Přidejte následující:
Typ: A
Jméno: @
Obsah: 192.0.2.1
TTL: Auto
Stav proxy: Proxed (oranžový mrak - velmi důležité)
Typ: A
Jméno: www
Obsah: 192.0.2.1
TTL: Auto
Stav proxy: Proxed (oranžový mrak - velmi důležité)
Tato IP adresa 192.0.2.1 je speciální „fiktivní“ adresa. Je vyhrazen pro dokumentaci a testování, díky čemuž je ideální pro naše potřeby.
4. Povolte Cloudflare Proxy
- Ujistěte se, že je pro váš záznam DNS povolen stav proxy (oranžová ikona cloudu).
- To umožňuje Cloudflare proxy váš provoz a je nezbytné pro fungování Cloudflare Workers.
5. Ověřte konfiguraci
- Jakmile se změna jmenného serveru rozšíří, Cloudflare zobrazí vaši doménu jako „Aktivní“.
- Můžete si to ověřit na řídicím panelu Cloudflare.
Klíčovým bodem je, že vaši doménu nesměřujeme na žádný skutečný webhosting. Adresa 192.0.2.1 je pouze zástupný symbol. Váš Cloudflare Worker, kterého nastavíme jako další, zachytí všechny požadavky na vaši doménu a bude zpracovávat logiku zkracování URL.
Tip pro profesionály: Toto nastavení znamená, že nemusíte platit ani spravovat žádný webhosting. Cloudflare Workers zvládnou veškeré těžké zvedání, díky čemuž je toto řešení nejen zdarma, ale také neuvěřitelně lehké a snadno se udržuje.
Se správně nakonfigurovaným DNS jste nyní připraveni přejít k vzrušující části – nastavení vašeho Cloudflare Worker, aby zvládl zkracování URL.
Krok 3: Vytvoření Cloudflare Worker
Nyní, když máme naši doménu nakonfigurovanou v Cloudflare, je čas vytvořit Worker, který bude obsluhovat naše přesměrování. Cloudflare Workers poskytují spouštěcí prostředí bez serveru, které nám umožňuje spouštět náš kód na hranici, v blízkosti našich uživatelů pro optimální výkon.
1. Vytvořte Cloudflare Worker
- Vstup do sekce Pracovníci:
- Přihlaste se do svého řídicího panelu Cloudflare.
- Na postranním panelu přejděte do sekce Pracovníci.
- Klikněte na „Vytvořit službu“, pokud je toto váš první pracovník, nebo na „Vytvořit pracovníka“, pokud již existující pracovníky máte.
- Pojmenujte svého pracovníka:
- Vyberte pro svého pracovníka popisný název, například „obslužný program hromadného přesměrování“.
- Kliknutím na „Vytvořit službu“ přejděte do editoru.
- Psaní pracovního skriptu:
- V editoru nahraďte výchozí kód skriptem obsluhy přesměrování:
exportovat výchozí {
async fetch(request) {
const redirectMap = nová mapa([
["google“, „https://www.google.com?subId1=google"],
["bing", "https://www.bing.com?subId1=bing"],
// Podle potřeby sem přidejte další přesměrování
]);
const url = nová URL(požadavek.url);
console.log("Úplná URL:", url.toString());
console.log("Název hostitele:", url.název hostitele);
console.log("Název cesty:", url.název cesty);
let path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
if (url.hostname.includes('workers.dev')) {
path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
}
console.log("Zpracovaná cesta:", cesta);
const location = redirectMap.get(cesta);
console.log("Umístění přesměrování:", umístění);
// Změňte na 301 pro trvalé přesměrování
if (location) {
return Response.redirect(umístění, 302);
}
// Pokud požadavek není na mapě, vraťte 404 nebo preferovanou záložní verzi
return new Response(`Nenalezeno: ${cesta}`, { stav: 404 });
},
};
- Porozumění skriptu:
- Definujeme a redirectMap který obsahuje naše krátké cesty a jejich odpovídající úplné adresy URL.
["google“, „https://www.google.com?subId1=google"],
yourshorturl.com/google přesměruje na -> https://www.google.com?subId1=google
["bing", "https://www.bing.com?subId1=bing"],
yourshorturl.com/bing přesměruje na -> https://www.bing.com?subId1=bing
- Skript zpracovává příchozí požadavky, extrahuje cestu a kontroluje, zda odpovídá některému z našich definovaných přesměrování.
- Pokud je nalezena shoda, vrátí 302 (dočasné přesměrování) na odpovídající adresu URL.
- Pokud není nalezena žádná shoda, vrátí odpověď 404 Nenalezeno.
- Testování pracovníka:
- Pomocí funkce „Quick Edit“ na řídicím panelu Cloudflare proveďte změny a otestujte svého Worker.
- Můžete použít dodaný testovací nástroj HTTP k simulaci požadavků a zjistit, jak váš pracovník reaguje.
- Nasazení pracovníka:
- Jakmile budete se svými testy spokojeni, klikněte na „Uložit a nasadit“, aby váš Worker fungoval.
- Nastavení pracovních tras:
- Po nasazení přejděte na kartu „Spouštěče“ pro svého pracovníka.
- Přidejte trasu, která odpovídá vaší doméně, např *recommends.link/*.
- Tím zajistíte, že všechny požadavky na vaši doménu zpracuje tento pracovník.
- Ověření nastavení:
- Zkuste získat přístup k několika cestám přesměrování (např. https://recommends.link/url-shortener-guide), aby bylo zajištěno, že fungují podle očekávání.
- Zkontrolujte protokoly pracovníků na řídicím panelu Cloudflare, abyste viděli výstup konzoly a ověřili, že cesty jsou zpracovávány správně.
Krok 4: Další přizpůsobení (volitelné)
Dynamická přesměrování s Cloudflare KV
Aby byl náš systém přesměrování flexibilnější a snadněji spravovatelný, můžeme k ukládání našich přesměrování použít úložiště Cloudflare KV (Key-Value):
Vytvořte jmenný prostor KV:
- Na řídicím panelu Cloudflare přejděte na Workers > KV. Klikněte na „Vytvořit jmenný prostor“ a pojmenujte jej (např. „PŘEDIRECT_MAP“).
- Přejděte do nastavení svého pracovníka. V části „Vazby jmenného prostoru KV“ přidejte novou vazbu. Vyberte svůj jmenný prostor KV a dejte mu název proměnné (např. PŘESMĚROVÁNÍ).
exportovat výchozí {
async fetch(request, env) {
const url = nová URL(požadavek.url);
const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
const location = wait env.REDIRECTS.get(cesta);
if (location) {
return Response.redirect(umístění, 301);
}
return new Response(`Nenalezeno: ${cesta}`, { stav: 404 });
},
};
Nyní můžete přidávat, aktualizovat nebo odstraňovat přesměrování úpravou úložiště KV bez změny kódu Worker.
Parametrizovaná přesměrování
Povolte dynamické parametry v přesměrování:
exportovat výchozí {
async fetch(request, env) {
const url = nová URL(požadavek.url);
const [cesta, ...paramy] = url.pathname.toLowerCase().replace(/^\//, '').split('/');
nechat umístění = čekat env.REDIRECTS.get(cesta);
if (location) {
// Nahraďte zástupné symboly skutečnými parametry
params.forEach((param, index) => {
location = location.replace(`{${index}}`, param);
});
return Response.redirect(umístění, 301);
}
return new Response(`Nenalezeno: ${cesta}`, { stav: 404 });
},
};
S tímto nastavením můžete mít položku KV jako „produkt“: „https://mystore.com/item/{0}/details“ a použít ji jako yourshortlink.com/product/12345.
Klikněte na možnost Sledování a analýza
Implementujte základní analýzu protokolováním událostí přesměrování:
exportovat výchozí {
async fetch(request, env) {
const url = nová URL(požadavek.url);
const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
const location = wait env.REDIRECTS.get(cesta);
if (location) {
// Zaznamená událost přesměrování
wait env.REDIRECTS.put(`${cesta}_clicks`, (parseInt(await env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
return Response.redirect(umístění, 301);
}
return new Response(`Nenalezeno: ${cesta}`, { stav: 404 });
},
};
Vlastní chybové stránky
Místo odpovědi ve formátu prostého textu 404 vraťte vlastní stránku HTML:
const notFoundPage = `
Odkaz nenalezen
tělo { font-family: Arial, sans-serif; text-align: center; padding-top: 50px; }
Jejda! Odkaz nenalezen
Krátký odkaz, který hledáte, neexistuje.
`;
// Ve vaší funkci načtení:
return new Response(notFoundPage, {
stav: 404,
záhlaví: { 'Content-Type': 'text/html' }
});
Omezení rychlosti
Implementujte základní omezení sazeb, abyste zabránili zneužití:
exportovat výchozí {
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žadavků za minutu
return new Response('Překročen limit rychlosti', { stav: 429 });
}
wait env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});
// Zbytek logiky přesměrování zde
},
};
A/B testování
Implementujte jednoduché A/B testování pro vaše přesměrování:
exportovat výchozí {
async fetch(request, env) {
const url = nová URL(požadavek.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 (umístěníA && umístěníB) {
const location = Math.random() < 0.5 ? umístěníA: umístěníB;
return Response.redirect(umístění, 301);
}
// Návrat k normálnímu přesměrování, pokud není nastaven A/B test
const location = wait env.REDIRECTS.get(cesta);
if (location) {
return Response.redirect(umístění, 301);
}
return new Response(`Nenalezeno: ${cesta}`, { stav: 404 });
},
};
Tato přizpůsobení a rozšíření přidávají vašemu systému hromadného přesměrování významné funkce, díky čemuž je flexibilnější, výkonnější a informativnější. Každou z těchto funkcí lze dále vylepšit a rozšířit na základě vašich konkrétních potřeb a případů použití.
Shrnutí: Vytvoření vlastního zkracovače odkazů s Cloudflare Workers
V tomto příspěvku na blogu jsme prozkoumali, jak vytvořit výkonný a flexibilní vlastní zkracovač adres URL pomocí Cloudflare Workers. Toto řešení nabízí bezplatný a efektivní přístup k vytváření krátkých odkazů ve velkém měřítku.
TL; DR:
- Cloudflare Workers poskytují platformu bez serveru pro implementaci vlastní logiky přesměrování s globální distribucí a nízkou latencí.
- Správná konfigurace DNS a nastavení Worker Routes jsou zásadní pro připojení vaší vlastní domény k Workeru.
- Jednoduchý Worker založený na JavaScriptu dokáže efektivně zvládnout složité scénáře přesměrování.
- Úložiště Key-Value (KV) Cloudflare lze využít k vytvoření dynamických, snadno spravovatelných přesměrovacích map.
- V rámci ekosystému Worker lze implementovat pokročilé funkce, jako jsou parametrizovaná přesměrování, sledování kliknutí, vlastní chybové stránky, omezení rychlosti a A/B testování.
- Tento systém nabízí značné výhody oproti tradičním metody přesměrování, včetně vylepšeného výkonu, snadnější správy a zvýšené flexibility.
Řešení, které jsme vytvořili, nabízí několik výhod:
- Škálovatelnost: Zvládá miliony přesměrování bez snížení výkonu.
- Flexibilita: Snadno přidávejte, upravujte nebo odebírejte přesměrování bez změny základní logiky.
- Výkon: Využívá globální síť Cloudflare pro rychlé přesměrování po celém světě.
- Přizpůsobení: Umožňuje pokročilé funkce, jako je analytika a A/B testování.
- Efektivita nákladů: Využívá bezserverovou architekturu, která potenciálně snižuje náklady na hosting.
- Volná alternativa na oblíbené služby jako Bit.ly nebo Tvůj pro vytváření značkových krátkých odkazů na vlastní doméně.
Nyní, když chápete sílu a flexibilitu tohoto systému přesměrování založeného na Cloudflare Worker, je čas jej uvést do praxe:
- Pokud jste to ještě neudělali, zaregistrujte si účet Cloudflare a seznamte se s platformou Workers.
- Implementujte tento systém pro své vlastní značkové krátké odkazy nebo hromadná přesměrování.
- Experimentujte s pokročilými funkcemi, o kterých jsme hovořili, a přizpůsobte systém vašim konkrétním potřebám.
- Podělte se o své zkušenosti nebo se zeptejte v sekci komentářů níže. Vaše postřehy mohou pomoci ostatním v komunitě!
- Pro pokročilejší případy použití nebo vlastní implementace zvažte kontaktování odborníka Cloudflare Workers nebo konzultační služby.
Zůstaňte zvědaví, nepřestávejte se učit a neváhejte posouvat hranice toho, co je možné s nástroji jako Cloudflare Workers.
