W tym poście podzielę się z Wami jak utworzyć własny, niestandardowy skracacz adresów URL domeny za pomocą Cloudflare Workers. Niezależnie od tego, czy jesteś twórcą stron internetowych, który chce dodać do paska kolejne narzędzie, właścicielem firmy, który chce obrandować swoje linki bez wygórowanej ceny, czy po prostu osobą, która uwielbia majstrować przy technologiach internetowych, ten przewodnik krok po kroku jest dla Ty.
Jako programista stron internetowych i entuzjasta technologii zawsze fascynowały mnie małe rzeczy, które sprawiają, że Internet jest bardziej wydajny i przyjazny dla użytkownika. Któregoś dnia, dzieląc się ze współpracownikiem wyjątkowo długim i nieporęcznym adresem URL, poczułem, że pragnę prostego, spersonalizowanego sposobu na skracanie linków. Jasne, istnieje wiele usług skracania adresów URL, ale chciałem czegoś, co będzie bardziej „ja” – czegoś, co będę mógł dostosować i kontrolować.
Wtedy natknąłem się na pomysł stworzenia własnego, niestandardowego skracacza adresów URL przy użyciu Cloudflare Workers. To było jak znalezienie ukrytego skarbu w rozległym morzu technologii internetowych. Nie tylko mogłem skracać adresy URL, ale mogłem to zrobić z własną nazwą domeny i to za darmo! Podekscytowanie tym odkryciem przypomniało mi, kiedy po raz pierwszy uruchomiłem stronę internetową – ten przypływ mocy i nieskończonych możliwości.
Tym, co uczyniło to odkrycie jeszcze bardziej ekscytującym, było uświadomienie sobie, że może ono służyć jako fantastyczna, bezpłatna alternatywa dla popularnych usług, takich jak Bit.ly czy TinyURL, do tworzenia markowych krótkich linków w niestandardowej domenie. Wiele firm i osób prywatnych płaci dobre pieniądze za tego rodzaju funkcjonalność, ale oto sposób na osiągnięcie tego samego rezultatu bez wydawania ani grosza.
Krok 1: Zarejestruj nazwę domeny (użyj krótkiej domeny)
Pierwszym krokiem w tworzeniu niestandardowego skracacza adresów URL jest zarejestrowanie nazwy domeny. To będzie podstawa Twoich markowych krótkich linków, więc wybieraj mądrze!
Oto kilka wskazówek, które pomogą Ci wybrać idealną domenę:
- Trzymaj to krótko: Celem skracacza adresów URL jest tworzenie zwięzłych linków. Jeśli to możliwe, szukaj nazw domen składających się z 3–5 znaków. Może to być skrót, akronim lub chwytliwe słowo.
- Niech będzie niezapomniany: Wybierz coś łatwego do zapamiętania i wpisania. Ułatwi to Tobie i innym korzystanie z Twoich skróconych linków.
- Weź pod uwagę swoją markę: jeśli używasz tej nazwy dla marki biznesowej lub osobistej, spróbuj dopasować domenę do istniejącej tożsamości marki.
- Sprawdź dostępność: Krótkie, chwytliwe domeny cieszą się dużym zainteresowaniem. Być może będziesz musiał wykazać się kreatywnością lub rozważyć alternatywne domeny najwyższego poziomu (TLD), takie jak .io, .co lub .me, jeśli pierwsza opcja nie jest dostępna.
- Pomyśl o TLD: Chociaż domena .com jest popularna, nie bój się innych TLD. Niektóre, jak .link lub .click, mogą szczególnie nadawać się do skracania adresów URL.
Oto kilka przykładów, które mogą Cię zainspirować:
- abc.link
- idź.io
- shrt.co
- zap.me
Po wybraniu domeny musisz ją kupić u rejestratora domen. Niektóre popularne opcje obejmują:
- Namecheap
- Idź Tato
- Cloudflare (Zalecane – co jest również bardzo wygodne, ponieważ będziemy korzystać z pracowników Cloudflare)
Pamiętaj, że chociaż domena będzie kosztować, jest to jednorazowy zakup w roku, a reszta konfiguracji naszego narzędzia do skracania adresów URL będzie bezpłatna przy użyciu Cloudflare Workers.
Wskazówka dla profesjonalistów: przed sfinalizowaniem zakupu upewnij się, że domena nie jest powiązana z żadnym spamem ani złośliwą aktywnością. Możesz sprawdzić jego historię za pomocą narzędzi takich jak Domain Tools lub Wayback Machine.
Mając w ręku nową, błyszczącą domenę, możesz przejść do następnego kroku: skonfigurowania Cloudflare dla swojej domeny. Ale omówimy to w następnej sekcji.
Krok 2: Skonfiguruj rekordy DNS dla swojej domeny
Teraz, gdy masz już swoją domenę, czas skonfigurować konfigurację DNS. Ten krok jest kluczowy dla zapewnienia prawidłowego działania Cloudflare Workers w nowo zarejestrowanej domenie.
Przejdźmy przez proces:
1. Dodaj swoją domenę do Cloudflare
- Jeśli jeszcze tego nie zrobiłeś, utwórz darmowe konto Cloudflare.
- W panelu kontrolnym Cloudflare kliknij „Dodaj witrynę” i wprowadź nazwę swojej domeny.
- Cloudflare przeskanuje istniejące rekordy DNS. Usuń wszystkie znalezione rekordy (chyba że używasz domeny również do poczty e-mail lub innych ważnych usług, w takim przypadku zachowaj je).
2. Zaktualizuj serwery nazw (zignoruj ten krok, jeśli Twoja domena jest zarejestrowana w Cloudflare)
- Cloudflare zapewni Ci zestaw serwerów nazw.
- Przejdź do witryny rejestratora swojej domeny i zastąp istniejące serwery nazw serwerami dostarczonymi przez Cloudflare.
- Globalne rozpowszechnienie tego kroku może zająć do 24 godzin.
3. Skonfiguruj rekordy DNS
- W ustawieniach DNS Cloudflare dodamy dwa nowe rekordy A.
- Dodaj następujące:
Typ: A
Nazwa: @
Treść: 192.0.2.1
Czas wygaśnięcia: Samochody
Stan proxy: Przesłane przez serwer proxy (pomarańczowa chmurka - bardzo ważne)
Typ: A
Nazwa: www
Treść: 192.0.2.1
Czas wygaśnięcia: Samochody
Stan proxy: Przesłane przez serwer proxy (pomarańczowa chmurka - bardzo ważne)
Ten adres IP 192.0.2.1 jest specjalnym adresem „fikcyjnym”. Jest zarezerwowany do dokumentacji i testów, co czyni go idealnym dla naszych potrzeb.
4. Włącz serwer proxy Cloudflare
- Upewnij się, że status proxy (pomarańczowa ikona chmury) jest włączony dla Twojego rekordu DNS.
- Umożliwia to Cloudflare proxy Twojego ruchu i jest niezbędne, aby pracownicy Cloudflare mogli działać.
5. Sprawdź konfigurację
- Po rozpowszechnieniu zmiany serwera nazw Cloudflare wyświetli Twoją domenę jako „Aktywną”.
- Możesz to sprawdzić w panelu kontrolnym Cloudflare.
Kluczową kwestią jest to, że nie wskazujemy Twojej domeny na żaden faktyczny hosting. Adres 192.0.2.1 jest tylko symbolem zastępczym. Twój pracownik Cloudflare, którego skonfigurujemy w następnej kolejności, przechwyci wszystkie żądania kierowane do Twojej domeny i zajmie się logiką skracania adresów URL.
Wskazówka dla profesjonalistów: ta konfiguracja oznacza, że nie musisz płacić za hosting ani zarządzać nim. Pracownicy Cloudflare zajmą się wszystkimi ciężkimi operacjami, dzięki czemu to rozwiązanie będzie nie tylko bezpłatne, ale także niezwykle lekkie i łatwe w utrzymaniu.
Po prawidłowym skonfigurowaniu DNS możesz teraz przejść do ekscytującej części – skonfigurowania Cloudflare Worker do obsługi skracania adresów URL.
Krok 3: Tworzenie pracownika Cloudflare
Skoro mamy już skonfigurowaną domenę w Cloudflare, czas stworzyć Workera, który będzie obsługiwał nasze przekierowania. Cloudflare Workers zapewniają bezserwerowe środowisko wykonawcze, które pozwala nam uruchamiać nasz kod na krawędzi, blisko naszych użytkowników, w celu uzyskania optymalnej wydajności.
1. Utwórz pracownika Cloudflare
- Dostęp do sekcji Pracownicy:
- Zaloguj się do swojego pulpitu nawigacyjnego Cloudflare.
- Przejdź do sekcji „Pracownicy” na pasku bocznym.
- Kliknij „Utwórz usługę”, jeśli jest to Twój pierwszy pracownik, lub „Utwórz pracownika”, jeśli masz już istniejących pracowników.
- Nazwij swojego pracownika:
- Wybierz opisową nazwę swojego pracownika, na przykład „obsługa przekierowań zbiorczych”.
- Kliknij „Utwórz usługę”, aby przejść do edytora.
- Pisanie skryptu roboczego:
- W edytorze zastąp domyślny kod skryptem obsługi przekierowań:
eksport domyślny {
asynchroniczne pobieranie(żądanie) {
const redirectMap = nowa mapa([
["google", "https://www.google.com?subId1=google"],
["bing", "https://www.bing.com?subId1=bing"],
// W razie potrzeby dodaj tutaj więcej przekierowań
]);
const url = nowy adres URL(request.url);
console.log("Pełny adres URL:", url.toString());
console.log("Nazwa hosta:", url.nazwa hosta);
console.log("Nazwa ścieżki:", url.ścieżka);
niech ścieżka = url.ścieżka.toLowerCase().replace(/^\//, '').split('/')[0];
if (url.hostname.includes('workers.dev')) {
ścieżka = url.nazwa ścieżki.toLowerCase().replace(/^\//, '').split('/')[1] || '';
}
console.log("Przetworzona ścieżka:", ścieżka);
stała lokalizacja = redirectMap.get(path);
console.log("Przekieruj lokalizację:", lokalizacja);
// Zmień na 301 dla stałego przekierowania
jeśli (lokalizacja) {
return Odpowiedź.przekierowanie(lokalizacja, 302);
}
// Jeśli żądania nie ma na mapie, zwróć kod 404 lub preferowany sygnał zastępczy
zwróć nową odpowiedź(`Nie znaleziono: ${ścieżka}`, {status: 404 });
},
};
- Zrozumienie skryptu:
- Definiujemy a mapa przekierowań który zawiera nasze krótkie ścieżki i odpowiadające im pełne adresy URL.
["google", "https://www.google.com?subId1=google"],
yourshorturl.com/google przekierowuje do -> https://www.google.com?subId1=google
["bing", "https://www.bing.com?subId1=bing"],
yourshorturl.com/bing przekierowuje do -> https://www.bing.com?subId1=bing
- Skrypt przetwarza przychodzące żądania, wyodrębnia ścieżkę i sprawdza, czy pasuje ona do któregoś ze zdefiniowanych przez nas przekierowań.
- Jeśli zostanie znalezione dopasowanie, zwraca 302 (tymczasowe przekierowanie) do odpowiedniego adresu URL.
- Jeśli nie zostanie znalezione żadne dopasowanie, zwracana jest odpowiedź 404 Nie znaleziono.
- Testowanie pracownika:
- Użyj funkcji „Szybka edycja” w panelu Cloudflare, aby wprowadzić zmiany i przetestować swojego pracownika.
- Możesz użyć dostarczonego narzędzia do testowania HTTP, aby symulować żądania i zobaczyć, jak Twój Worker odpowiada.
- Oddelegowanie pracownika:
- Gdy będziesz zadowolony z testów, kliknij „Zapisz i rozmieść”, aby Twój Robotnik mógł działać.
- Konfigurowanie tras roboczych:
- Po rozmieszczeniu przejdź do zakładki „Wyzwalacze” dla swojego Robotnika.
- Dodaj trasę pasującą do Twojej domeny, np *poleca.link/*.
- Dzięki temu wszystkie żądania kierowane do Twojej domeny będą obsługiwane przez tego pracownika.
- Weryfikacja konfiguracji:
- Spróbuj uzyskać dostęp do kilku ścieżek przekierowań (np. https://recommends.link/url-shortener-guide), aby upewnić się, że działają zgodnie z oczekiwaniami.
- Sprawdź dzienniki robocze na pulpicie nawigacyjnym Cloudflare, aby zobaczyć dane wyjściowe konsoli i sprawdzić, czy ścieżki są przetwarzane poprawnie.
Krok 4: Więcej dostosowań (opcjonalnie)
Dynamiczne przekierowania z Cloudflare KV
Aby uczynić nasz system przekierowań bardziej elastycznym i łatwiejszym w zarządzaniu, możemy użyć pamięci Cloudflare KV (Key-Value) do przechowywania naszych przekierowań:
Utwórz przestrzeń nazw KV:
- W panelu kontrolnym Cloudflare przejdź do Pracownicy > KV. Kliknij „Utwórz przestrzeń nazw” i nadaj jej nazwę (np. „REDIRECT_MAP”).
- Przejdź do ustawień pracownika. W „Powiązaniach przestrzeni nazw KV” dodaj nowe powiązanie. Wybierz przestrzeń nazw KV i nadaj jej zmienną nazwę (np. REDIRECTS).
eksport domyślny {
asynchroniczne pobieranie(żądanie, środowisko) {
const url = nowy adres URL(request.url);
const ścieżka = url.ścieżka.toLowerCase().replace(/^\//, '').split('/')[0];
stała lokalizacja = oczekiwanie na env.REDIRECTS.get(ścieżka);
jeśli (lokalizacja) {
return Odpowiedź.przekierowanie(lokalizacja, 301);
}
zwróć nową odpowiedź(`Nie znaleziono: ${ścieżka}`, {status: 404 });
},
};
Możesz teraz dodawać, aktualizować lub usuwać przekierowania, modyfikując magazyn KV bez zmiany kodu pracownika.
Sparametryzowane przekierowania
Zezwól na parametry dynamiczne w swoich przekierowaniach:
eksport domyślny {
asynchroniczne pobieranie(żądanie, środowisko) {
const url = nowy adres URL(request.url);
const [ścieżka, ...params] = url.ścieżka.toLowerCase().replace(/^\//, '').split('/');
niech lokalizacja = czekaj na env.REDIRECTS.get(ścieżka);
jeśli (lokalizacja) {
// Zamień symbole zastępcze na rzeczywiste parametry
params.forEach((param, indeks) => {
lokalizacja = lokalizacja.replace(`{${index}}`, param);
});
return Odpowiedź.przekierowanie(lokalizacja, 301);
}
zwróć nową odpowiedź(`Nie znaleziono: ${ścieżka}`, {status: 404 });
},
};
Dzięki tej konfiguracji możesz mieć wpis KV, taki jak „produkt”: „https://mystore.com/item/{0}/details” i używać go jako yourshortlink.com/product/12345.
Kliknij opcję Śledzenie i analityka
Wdrażaj podstawową analitykę poprzez rejestrowanie zdarzeń przekierowań:
eksport domyślny {
asynchroniczne pobieranie(żądanie, środowisko) {
const url = nowy adres URL(request.url);
const ścieżka = url.ścieżka.toLowerCase().replace(/^\//, '').split('/')[0];
stała lokalizacja = oczekiwanie na env.REDIRECTS.get(ścieżka);
jeśli (lokalizacja) {
// Zarejestruj zdarzenie przekierowania
czekaj na env.REDIRECTS.put(`${ścieżka}_kliknięć`, (parseInt(czekaj na env.REDIRECTS.get(`${ścieżka}_kliknięć`) || '0') + 1).toString());
return Odpowiedź.przekierowanie(lokalizacja, 301);
}
zwróć nową odpowiedź(`Nie znaleziono: ${ścieżka}`, {status: 404 });
},
};
Niestandardowe strony błędów
Zamiast odpowiedzi 404 w postaci zwykłego tekstu zwróć niestandardową stronę HTML:
const notFoundPage = `
Nie znaleziono łącza
body {rodzina czcionek: Arial, bezszeryfowa; wyrównanie tekstu: do środka; górna część dopełnienia: 50px; }
Ups! Nie znaleziono łącza
Krótki link, którego szukasz, nie istnieje.
`;
// W funkcji pobierania:
zwróć nową odpowiedź (notFoundPage, {
stan: 404,
nagłówki: { 'Typ zawartości': 'tekst/html' }
});
Ograniczanie tempa
Wprowadź podstawowe ograniczenie szybkości, aby zapobiec nadużyciom:
eksport domyślny {
asynchroniczne pobieranie(żądanie, środowisko) {
const ip = request.headers.get('CF-Connecting-IP');
stała stawkaLimitKey = `limit szybkości:${ip}`;
const currentRequests = parseInt(await env.REDIRECTS.get(rateLimitKey) || '0');
if (currentRequests > 100) {// Limit 100 żądań na minutę
zwróć nową odpowiedź('Przekroczono limit szybkości', { status: 429 });
}
czekaj na env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});
// Pozostała część logiki przekierowania znajduje się tutaj
},
};
Testowanie A / B
Zaimplementuj proste testy A/B dla swoich przekierowań:
eksport domyślny {
asynchroniczne pobieranie(żądanie, środowisko) {
const url = nowy adres URL(request.url);
const ścieżka = url.ścieżka.toLowerCase().replace(/^\//, '').split('/')[0];
stała lokalizacjaA = oczekiwanie na env.REDIRECTS.get(`${ścieżka}_A`);
stała lokalizacjaB = oczekiwanie na env.REDIRECTS.get(`${ścieżka}_B`);
jeśli (lokalizacjaA i& lokalizacjaB) {
stała lokalizacja = Math.random() < 0.5? lokalizacjaA: lokalizacjaB;
return Odpowiedź.przekierowanie(lokalizacja, 301);
}
// Powrót do normalnego przekierowania, jeśli nie skonfigurowano testu A/B
stała lokalizacja = oczekiwanie na env.REDIRECTS.get(ścieżka);
jeśli (lokalizacja) {
return Odpowiedź.przekierowanie(lokalizacja, 301);
}
zwróć nową odpowiedź(`Nie znaleziono: ${ścieżka}`, {status: 404 });
},
};
Te dostosowania i rozszerzenia dodają znaczną funkcjonalność do Twojego systemu przekierowań zbiorczych, czyniąc go bardziej elastycznym, wydajnym i informacyjnym. Każdą z tych funkcji można dalej udoskonalać i rozszerzać w zależności od konkretnych potrzeb i przypadków użycia.
Podsumowanie: Tworzenie niestandardowego skracacza linków z pracownikami Cloudflare
W tym poście na blogu omówiliśmy, jak utworzyć wydajny i elastyczny niestandardowy skracacz adresów URL za pomocą Cloudflare Workers. To rozwiązanie oferuje bezpłatne i wydajne podejście do tworzenia krótkich linków na dużą skalę.
TL; DR:
- Workers Cloudflare zapewniają bezserwerową platformę do implementowania niestandardowej logiki przekierowań z globalną dystrybucją i niskimi opóźnieniami.
- Właściwa konfiguracja DNS i konfiguracja Worker Routes mają kluczowe znaczenie dla połączenia Twojej niestandardowej domeny z Workerem.
- Prosty proces roboczy oparty na JavaScript może skutecznie obsługiwać złożone scenariusze przekierowań.
- Magazyn klucz-wartość (KV) Cloudflare można wykorzystać do tworzenia dynamicznych, łatwych w zarządzaniu map przekierowań.
- Zaawansowane funkcje, takie jak sparametryzowane przekierowania, śledzenie kliknięć, niestandardowe strony błędów, ograniczanie szybkości i testy A/B, można wdrożyć w ekosystemie Worker.
- System ten oferuje znaczną przewagę nad tradycyjnym metody przekierowania, w tym lepszą wydajność, łatwiejsze zarządzanie i większą elastyczność.
Rozwiązanie, które zbudowaliśmy, oferuje kilka korzyści:
- Skalowalność: Obsługuje miliony przekierowań bez pogorszenia wydajności.
- Elastyczność: Z łatwością dodawaj, modyfikuj i usuwaj przekierowania bez zmiany podstawowej logiki.
- Wydajność: Wykorzystuje globalną sieć Cloudflare do szybkich przekierowań na całym świecie.
- Personalizacja: umożliwia korzystanie z zaawansowanych funkcji, takich jak analizy i testy A/B.
- Opłacalność: Wykorzystuje architekturę bezserwerową, potencjalnie zmniejszając koszty hostingu.
- Darmowa alternatywa do popularnych serwisów, takich jak Bit.ly lub Yourls do tworzenia markowych krótkich linków w niestandardowej domenie.
Teraz, gdy rozumiesz możliwości i elastyczność tego systemu przekierowań opartego na Cloudflare Worker, czas wdrożyć go w działanie:
- Jeśli jeszcze tego nie zrobiłeś, załóż konto Cloudflare i zapoznaj się z platformą Workers.
- Zaimplementuj ten system dla własnych, markowych krótkich linków lub masowych przekierowań.
- Eksperymentuj z zaawansowanymi funkcjami, które omówiliśmy, aby dostosować system do swoich konkretnych potrzeb.
- Podziel się swoimi doświadczeniami lub zadaj pytania w sekcji komentarzy poniżej. Twoje spostrzeżenia mogą pomóc innym członkom społeczności!
- W przypadku bardziej zaawansowanych przypadków użycia lub niestandardowych wdrożeń rozważ skontaktowanie się z ekspertem Cloudflare Workers lub usługą konsultingową.
Bądź ciekawy, ucz się dalej i nie wahaj się przesuwać granic możliwości dzięki narzędziom takim jak Cloudflare Workers.
