Gratis anpassad domän-URL-förkortare (med Cloudflare-arbetare)

I det här inlägget tänker jag dela med mig hur du kan skapa din helt egen anpassade domän-URL-förkortare med Cloudflare Workers. Oavsett om du är en webbutvecklare som vill lägga till ytterligare ett verktyg i ditt bälte, en företagsägare som vill skapa ett varumärke för dina länkar utan den höga prislappen eller bara någon som älskar att mixtra med webbteknik, är den här steg-för-steg-guiden för du.

Som webbutvecklare och teknikentusiast har jag alltid varit fascinerad av de små sakerna som gör internet mer effektivt och användarvänligt. En dag, medan jag delade en särskilt lång och otymplig URL med en kollega, kom jag på mig själv med att önska ett enkelt, personligt sätt att förkorta länkar. Visst, det finns gott om URL-förkortningstjänster där ute, men jag ville ha något som kändes mer "jag" - något jag kunde anpassa och kontrollera.

Det var då jag snubblade över idén att skapa min egen anpassade URL-förkortare med Cloudflare Workers. Det var som att hitta en gömd skatt i det stora havet av webbteknologier. Inte bara kunde jag förkorta webbadresser, utan jag kunde göra det med mitt eget domännamn, gratis! Spänningen över den här upptäckten påminde mig om första gången jag distribuerade en webbplats – det ruset av egenmakt och oändliga möjligheter.

Det som gjorde denna upptäckt ännu mer spännande var att inse att den kunde fungera som ett fantastiskt, gratis alternativ till populära tjänster som Bit.ly eller TinyURL för att skapa korta länkar på en anpassad domän. Många företag och privatpersoner betalar bra pengar för denna typ av funktionalitet, men här är ett sätt att uppnå samma resultat utan att spendera en krona.

Steg 1: Registrera ett domännamn (Använd en kort domän)

Det första steget i att skapa din anpassade URL-förkortare är att registrera ett domännamn. Detta kommer att vara grunden för dina korta varumärkeslänkar, så välj klokt!

Här är några tips som hjälper dig att välja den perfekta domänen:

Håll det kort: Hela poängen med en URL-förkortare är att skapa kortfattade länkar. Leta efter domännamn med 3-5 tecken om möjligt. Detta kan vara en förkortning, akronym eller ett catchy ord.
Gör det minnesvärd: Välj något som är lätt att komma ihåg och skriva. Detta kommer att göra det lättare för dig och andra att använda dina förkortade länkar.
Tänk på ditt varumärke: Om du använder detta för ett företag eller personligt varumärke, försök att anpassa domänen till din befintliga varumärkesidentitet.
Kontrollera tillgänglighet: Korta, catchy domäner är mycket efterfrågade. Du kan behöva bli kreativ eller överväga alternativa toppdomäner (TLD) som .io, .co eller .me om ditt förstahandsval inte är tillgängligt.
Tänk på TLD: Även om .com är populärt, skygga inte för andra toppdomäner. Vissa, som .link eller .click, kan vara särskilt passande för en URL-förkortare.

Här är några exempel för att inspirera dig:

abc.länk
go.io
shrt.co
zap.me

När du har valt din domän måste du köpa den från en domänregistrator. Några populära alternativ inkluderar:

Namecheap
Kör pappa
CloudFlare (Rekommenderas – vilket också är väldigt bekvämt eftersom vi kommer att använda Cloudflare Workers)

Kom ihåg att även om domänen kommer att kosta pengar, är det ett engångsköp per år, och resten av vår webbadressförkortningskonfiguration kommer att vara gratis med Cloudflare Workers.

Proffstips: Innan du slutför ditt köp, se till att domänen inte är associerad med någon spam eller skadlig aktivitet. Du kan kontrollera dess historik med hjälp av verktyg som Domain Tools eller Wayback Machine.

Med din glänsande nya domän i handen är du redo att gå vidare till nästa steg: konfigurera Cloudflare för din domän. Men vi tar upp det i nästa avsnitt.

Steg 2: Konfigurera DNS-poster för din domän

Nu när du har din domän är det dags att ställa in DNS-konfigurationen. Detta steg är avgörande för att säkerställa att dina Cloudflare Workers fungerar korrekt med din nyregistrerade domän.

Låt oss gå igenom processen:

1. Lägg till din domän i Cloudflare

Om du inte redan har gjort det, skapa ett gratis Cloudflare-konto.
I din Cloudflare-instrumentpanel klickar du på "Lägg till en webbplats" och anger ditt domännamn.
Cloudflare kommer att söka efter befintliga DNS-poster. Ta bort alla poster som den hittar (såvida du inte också använder domänen för e-post eller andra viktiga tjänster, behåll dem i så fall).

2. Uppdatera namnservrar (Ignorera det här steget om din domän är registrerad hos Cloudflare)

Cloudflare kommer att förse dig med en uppsättning namnservrar.
Gå till din domänregistrars webbplats och ersätt de befintliga namnservrarna med de som tillhandahålls av Cloudflare.
Det kan ta upp till 24 timmar innan det här steget sprids globalt.

3. Konfigurera DNS-poster

I dina Cloudflare DNS-inställningar lägger vi till två nya A-poster.
Lägg till följande:

Typ: A
Namn: @
Innehåll: 192.0.2.1
TTL: Bil
Proxystatus: Fullmakt (orange moln - mycket viktigt)

Typ: A
Namn: www
Innehåll: 192.0.2.1
TTL: Bil
Proxystatus: Fullmakt (orange moln - mycket viktigt)

Denna 192.0.2.1 IP är en speciell "dummy"-adress. Den är reserverad för dokumentation och testning, vilket gör den perfekt för våra behov.

4. Aktivera Cloudflare Proxy

Se till att proxystatusen (orange molnikon) är aktiverad för din DNS-post.
Detta tillåter Cloudflare att proxyservera din trafik och är nödvändigt för att Cloudflare Workers ska fungera.

5. Verifiera konfigurationen

När namnserverändringen har spridits kommer Cloudflare att visa din domän som "Aktiv".
Du kan verifiera detta i Cloudflares instrumentpanel.

Den viktigaste punkten här är att vi inte pekar din domän till något faktiskt webbhotell. Adressen 192.0.2.1 är bara en platshållare. Din Cloudflare Worker, som vi ställer in härnäst, kommer att fånga upp alla förfrågningar till din domän och hantera URL-förkortningslogiken.

Proffstips: Denna inställning innebär att du inte behöver betala för eller hantera något webbhotell. Cloudflare Workers kommer att hantera alla tunga lyft, vilket gör denna lösning inte bara gratis utan också otroligt lätt och lätt att underhålla.

Med din DNS korrekt konfigurerad är du nu redo att gå vidare till den spännande delen – att ställa in din Cloudflare Worker för att hantera URL-förkortningen.

Steg 3: Skapa en Cloudflare-arbetare

Nu när vi har vår domän konfigurerad i Cloudflare är det dags att skapa Worker som kommer att hantera våra omdirigeringar. Cloudflare Workers tillhandahåller en serverlös exekveringsmiljö som gör att vi kan köra vår kod på kanten, nära våra användare för optimal prestanda.

1. Skapa en Cloudflare-arbetare

Åtkomst till arbetarsektionen:
- Logga in på din Cloudflare-instrumentpanel.
- Navigera till avsnittet "Arbetare" från sidofältet.
- Klicka på "Skapa en tjänst" om detta är din första arbetare, eller "Skapa arbetare" om du redan har befintliga arbetare.
Namnge din arbetare:
- Välj ett beskrivande namn för din Worker, till exempel "bulk-redirects-handler".
- Klicka på "Skapa tjänst" för att gå vidare till redigeraren.
Att skriva Worker Script:
- I editorn, ersätt standardkoden med omdirigeringshanterarens skript:

exportera standard {
  async fetch(request) {
    const redirectMap = ny karta([
      ["google"," https://www.google.com?subId1=google"],
      ["bing", "https://www.bing.com?subId1=bing"],
      // Lägg till fler omdirigeringar här efter behov
    ]);

    const url = ny URL(request.url);
    console.log("Fullständig URL:", url.toString());
    console.log("Värdnamn:", url.värdnamn);
    console.log("Sökväg:", url.sökväg);

    let path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
    
    if (url.hostname.includes('workers.dev')) {
      sökväg = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
    }
    
    console.log("Bearbetad sökväg:", sökväg);
    
    const plats = redirectMap.get(sökväg);
    console.log("Omdirigera plats:", plats);

// Ändra till 301 för Permanent omdirigering
    if (plats) {
      return Response.redirect(plats, 302);
    }
    
    // Om begäran inte finns i kartan, returnera en 404 eller önskad reserv
    return new Response(`Not Found: ${path}`, { status: 404 });
  },
};

Förstå skriptet:
- Vi definierar en redirectMap som innehåller våra korta sökvägar och deras motsvarande fullständiga webbadresser.

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

yourshorturl.com/google omdirigerar till -> https://www.google.com?subId1=google

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

yourshorturl.com/bing omdirigerar till -> https://www.bing.com?subId1=bing

Skriptet behandlar inkommande förfrågningar, extraherar sökvägen och kontrollerar om den matchar någon av våra definierade omdirigeringar.
Om en matchning hittas returnerar den en 302 (Temporary Redirect) till motsvarande URL.
Om ingen matchning hittas returneras ett 404 Not Found-svar.
Testa arbetaren:
- Använd funktionen "Snabbredigering" i Cloudflares instrumentpanel för att göra ändringar och testa din Worker.
- Du kan använda det medföljande HTTP-testverktyget för att simulera förfrågningar och se hur din Worker svarar.
Utplacera arbetaren:
- När du är nöjd med dina tester klickar du på "Spara och distribuera" för att göra din Worker live.
Ställa in arbetarrutter:

Efter implementeringen går du till fliken "Triggers" för din Worker.
Lägg till en rutt som matchar din domän, som t.ex *recommends.link/*.
Detta säkerställer att alla förfrågningar till din domän hanteras av denna Worker.
Verifiera installationen:
- Försök komma åt några av dina omdirigeringsvägar (t.ex. https://recommends.link/url-shortener-guide) för att säkerställa att de fungerar som förväntat.
- Kontrollera arbetarloggarna i din Cloudflare-instrumentpanel för att se konsolutdata och verifiera att sökvägarna bearbetas korrekt.

Steg 4: Fler anpassningar (valfritt)

Dynamiska omdirigeringar med Cloudflare KV

För att göra vårt omdirigeringssystem mer flexibelt och lättare att hantera kan vi använda Cloudflare KV (Key-Value)-lagring för att lagra våra omdirigeringar:

Skapa ett KV-namnområde:

I din Cloudflare-instrumentpanel, gå till Workers > KV. Klicka på "Skapa namnområde" och namnge det (t.ex. "REDIRECT_MAP").

Bind KV-namnområdet till din arbetare:

Gå till din Workers inställningar. Under "KV-namnområdesbindningar" lägg till en ny bindning. Välj ditt KV-namnområde och ge det ett variabelnamn (t.ex. REDIRECTS).

Ändra Worker-skriptet för att använda KV:

   exportera standard {
     async fetch(request, env) {
       const url = ny URL(request.url);
       const sökväg = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const plats = await env.REDIRECTS.get(sökväg);
       
       if (plats) {
         return Response.redirect(plats, 301);
       }
       
       return new Response(`Not Found: ${path}`, { status: 404 });
     },
   };

Du kan nu lägga till, uppdatera eller ta bort omdirigeringar genom att ändra KV-butiken utan att ändra Worker-koden.

Parameteriserade omdirigeringar

Tillåt dynamiska parametrar i dina omdirigeringar:

   exportera standard {
     async fetch(request, env) {
       const url = ny URL(request.url);
       const [sökväg, ...params] = url.pathname.toLowerCase().replace(/^\//, '').split('/');
       
       let location = await env.REDIRECTS.get(path);
       
       if (plats) {
         // Ersätt platshållare med faktiska parametrar
         params.forEach((param, index) => {
           location = location.replace(`{${index}}`, param);
         });
         return Response.redirect(plats, 301);
       }
       
       return new Response(`Not Found: ${path}`, { status: 404 });
     },
   };

Med den här inställningen kan du ha en KV-post som "produkt" : "https://mystore.com/item/{0}/details" och använda den som yourshortlink.com/product/12345.

Klicka på Spårning och analys

Implementera grundläggande analyser genom att logga omdirigeringshändelser:

   exportera standard {
     async fetch(request, env) {
       const url = ny URL(request.url);
       const sökväg = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const plats = await env.REDIRECTS.get(sökväg);
       
       if (plats) {
         // Logga omdirigeringshändelsen
         await env.REDIRECTS.put(`${path}_clicks`, (parseInt(await env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
         return Response.redirect(plats, 301);
       }
       
       return new Response(`Not Found: ${path}`, { status: 404 });
     },
   };

Anpassade felsidor

Istället för ett 404-svar med vanlig text returnerar du en anpassad HTML-sida:

   const notFoundPage = `
   
   
   
     
     
     Länk hittades inte
     
       body { font-family: Arial, sans-serif; text-align: center; padding-top: 50px; }
     
   
   
     hoppsan! Länk hittades inte
     Den korta länken du letar efter finns inte.
   
   
   `;

   // I din hämtningsfunktion:
   returnera nytt svar(notFoundPage, { 
     status: 404,
     rubriker: { 'Content-Type': 'text/html' }
   });

hastighetsbegränsande

Implementera grundläggande taxebegränsning för att förhindra missbruk:

   exportera standard {
     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) {// 100 begäranden per minut gräns
         return new Response('Rate limit överskriden', { status: 429 });
       }
       
       await env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});
       
       // Resten av din omdirigeringslogik här
     },
   };

A / B-test

Implementera enkla A/B-tester för dina omdirigeringar:

   exportera standard {
     async fetch(request, env) {
       const url = ny URL(request.url);
       const sökväg = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const locationA = await env.REDIRECTS.get(`${path}_A`);
       const locationB = await env.REDIRECTS.get(`${path}_B`);
       
       if (platsA && platsB) {
         const plats = Math.random() < 0.5 ? platsA: platsB;
         return Response.redirect(plats, 301);
       }
       
       // Fallback till normal omdirigering om A/B-testet inte är inställt
       const plats = await env.REDIRECTS.get(sökväg);
       if (plats) {
         return Response.redirect(plats, 301);
       }
       
       return new Response(`Not Found: ${path}`, { status: 404 });
     },
   };

Dessa anpassningar och utökningar lägger till betydande funktionalitet till ditt massomdirigeringssystem, vilket gör det mer flexibelt, kraftfullt och informativt. Var och en av dessa funktioner kan förfinas och utökas ytterligare baserat på dina specifika behov och användningsfall.

Sammanfattning: Skapa en anpassad länkförkortare med Cloudflare-arbetare

Under hela det här blogginlägget har vi utforskat hur man skapar en kraftfull och flexibel anpassad URL-förkortare med Cloudflare Workers. Denna lösning erbjuder ett gratis och effektivt sätt att skapa korta länkar i stor skala.

TL; DR:

Cloudflare Workers tillhandahåller en serverlös plattform för att implementera anpassad omdirigeringslogik med global distribution och låg latens.
Korrekt DNS-konfiguration och Worker Routes-inställning är avgörande för att ansluta din anpassade domän till Worker.
En enkel JavaScript-baserad arbetare kan hantera komplexa omdirigeringsscenarier effektivt.
Cloudflares Key-Value (KV)-lagring kan utnyttjas för att skapa dynamiska, lätthanterliga omdirigeringskartor.
Avancerade funktioner som parametriserade omdirigeringar, klickspårning, anpassade felsidor, hastighetsbegränsning och A/B-testning kan implementeras inom Worker-ekosystemet.
Detta system erbjuder betydande fördelar jämfört med traditionella omdirigeringsmetoder, inklusive förbättrad prestanda, enklare hantering och ökad flexibilitet.

Lösningen vi har byggt erbjuder flera fördelar:

skalbarhet: Hanterar miljontals omdirigeringar utan prestandaförsämring.
Flexibilitet: Lägg enkelt till, ändra eller ta bort omdirigeringar utan att ändra kärnlogiken.
prestanda: Utnyttjar Cloudflares globala nätverk för snabba omdirigeringar över hela världen.
Anpassning: Tillåter avancerade funktioner som analys och A/B-testning.
Kostnadseffektivitet: Använder serverlös arkitektur, vilket kan minska värdkostnaderna.
Gratis alternativ till populära tjänster som Bit.ly eller Yourls för att skapa korta varumärkeslänkar på en anpassad domän.

Nu när du förstår kraften och flexibiliteten i detta Cloudflare Worker-baserade omdirigeringssystem, är det dags att omsätta det i handling:

Om du inte redan har gjort det, registrera dig för ett Cloudflare-konto och bekanta dig med Workers-plattformen.
Implementera detta system för dina egna korta länkar eller massomdirigeringar.
Experimentera med de avancerade funktionerna vi har diskuterat för att skräddarsy systemet efter dina specifika behov.
Dela dina erfarenheter eller ställ frågor i kommentarsfältet nedan. Dina insikter kan hjälpa andra i samhället!
För mer avancerade användningsfall eller anpassade implementeringar, överväg att kontakta en Cloudflare Workers-expert eller konsulttjänst.

Håll dig nyfiken, fortsätt lära dig och tveka inte att tänja på gränserna för vad som är möjligt med verktyg som Cloudflare Workers.

Steg 1: Registrera ett domännamn (Använd en kort domän)

Steg 2: Konfigurera DNS-poster för din domän

Steg 3: Skapa en Cloudflare-arbetare

Steg 4: Fler anpassningar (valfritt)

Dynamiska omdirigeringar med Cloudflare KV

Parameteriserade omdirigeringar

Klicka på Spårning och analys

Anpassade felsidor

hastighetsbegränsande

A / B-test

Sammanfattning: Skapa en anpassad länkförkortare med Cloudflare-arbetare

Author

Matt Ahlgren

sidor

Besökarnas favoriter

Verktyg och resurser

Skapa en gratis anpassad domän-URL-förkortare (med Cloudflare-arbetare)

Steg 1: Registrera ett domännamn (Använd en kort domän)

Steg 2: Konfigurera DNS-poster för din domän

Steg 3: Skapa en Cloudflare-arbetare

Steg 4: Fler anpassningar (valfritt)

Dynamiska omdirigeringar med Cloudflare KV

Parameteriserade omdirigeringar

Klicka på Spårning och analys

Anpassade felsidor

hastighetsbegränsande

A / B-test

Sammanfattning: Skapa en anpassad länkförkortare med Cloudflare-arbetare

relaterade inlägg

Author

Matt Ahlgren

sidor

Besökarnas favoriter

Verktyg och resurser