Opret en gratis Custom Domain URL Shortener (med Cloudflare Workers)

I dette indlæg vil jeg dele med jer hvordan du kan oprette din helt egen brugerdefinerede domæne-URL-forkorter ved hjælp af Cloudflare Workers. Uanset om du er en webudvikler, der ønsker at tilføje endnu et værktøj til dit bælte, en virksomhedsejer, der ønsker at brande dine links uden det voldsomme prisskilt, eller bare en, der elsker at pille ved webteknologier, er denne trin-for-trin guide til du.

Som webudvikler og tech-entusiast har jeg altid været fascineret af de små ting, der gør internettet mere effektivt og brugervenligt. En dag, mens jeg delte en særlig lang og uhåndterlig URL med en kollega, fandt jeg mig selv i at ønske mig en enkel, personlig måde at forkorte links. Selvfølgelig er der masser af URL-forkortelsestjenester derude, men jeg ville have noget, der føltes mere "mig" - noget, jeg kunne tilpasse og kontrollere.

Det var da jeg faldt over ideen om at skabe min egen brugerdefinerede URL-forkorter ved hjælp af Cloudflare Workers. Det var som at finde en skjult skat i det store hav af webteknologier. Ikke kun kunne jeg forkorte URL'er, men jeg kunne gøre det med mit eget domænenavn gratis! Spændingen ved denne opdagelse mindede mig om første gang, jeg implementerede et websted – det jag af empowerment og uendelige muligheder.

Det, der gjorde denne opdagelse endnu mere spændende, var at indse, at den kunne tjene som et fantastisk, gratis alternativ til populære tjenester som Bit.ly eller TinyURL til at skabe korte mærkevarelinks på et tilpasset domæne. Mange virksomheder og enkeltpersoner betaler gode penge for denne form for funktionalitet, men her er en måde at opnå det samme resultat uden at bruge en krone.

Trin 1: Registrer et domænenavn (brug et kort domæne)

Det første trin i at oprette din brugerdefinerede URL-forkorter er at registrere et domænenavn. Dette vil være grundlaget for dine brandede korte links, så vælg med omhu!

Her er nogle tips til at hjælpe dig med at vælge det perfekte domæne:

1. Hold det kort: Hele pointen med en URL-forkorter er at skabe kortfattede links. Se efter domænenavne med 3-5 tegn, hvis det er muligt. Dette kan være en forkortelse, akronym eller et iørefaldende ord.
2. Gør det mindeværdigt: Vælg noget, der er nemt at huske og skrive. Dette vil gøre det lettere for dig og andre at bruge dine forkortede links.
3. Overvej dit brand: Hvis du bruger dette til et firma eller et personligt brand, så prøv at tilpasse domænet til din eksisterende brandidentitet.
4. Tjek tilgængelighed: Der er stor efterspørgsel efter korte, fængende domæner. Du skal muligvis være kreativ eller overveje alternative topdomæner (TLD'er) som .io, .co eller .me, hvis dit førstevalg ikke er tilgængeligt.
5. Tænk på TLD: Selvom .com er populært, skal du ikke vige tilbage fra andre TLD'er. Nogle, såsom .link eller .click, kunne være særligt velegnede til en URL-forkorter.

Her er nogle eksempler til inspiration:

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

Når du har valgt dit domæne, skal du købe det hos en domæneregistrator. Nogle populære muligheder inkluderer:

• NameCheap
• GoDaddy
• CloudFlare (Anbefalet – hvilket også er meget praktisk, da vi skal bruge Cloudflare Workers)

Husk, at mens domænet vil koste penge, er det et engangskøb om året, og resten af ​​vores URL-forkorter-opsætning vil være gratis ved brug af Cloudflare Workers.

Professionelt tip: Før du afslutter dit køb, skal du sørge for, at domænet ikke er forbundet med spam eller ondsindet aktivitet. Du kan tjekke dens historie ved hjælp af værktøjer som Domain Tools eller Wayback Machine.

Med dit skinnende nye domæne i hånden, er du klar til at gå videre til næste trin: opsætning af Cloudflare til dit domæne. Men vi vil dække det i næste afsnit.

Trin 2: Konfigurer DNS-poster for dit domæne

Nu hvor du har dit domæne, er det tid til at konfigurere DNS-konfigurationen. Dette trin er afgørende for at sikre, at dine Cloudflare Workers fungerer korrekt med dit nyregistrerede domæne.

Lad os gå gennem processen:

1. Føj dit domæne til Cloudflare

• Hvis du ikke allerede har gjort det, opret en gratis Cloudflare-konto.
• I dit Cloudflare-dashboard skal du klikke på "Tilføj et websted" og indtaste dit domænenavn.
• Cloudflare vil scanne for eksisterende DNS-poster. Slet alle registreringer, den finder (medmindre du også bruger domænet til e-mail eller andre vigtige tjenester, i så fald behold dem).

2. Opdater navneservere (Ignorer dette trin, hvis dit domæne er registreret hos Cloudflare)

• Cloudflare vil give dig et sæt navneservere.
• Gå til din domæneregistrators hjemmeside og udskift de eksisterende navneservere med dem, der leveres af Cloudflare.
• Dette trin kan tage op til 24 timer at sprede sig globalt.

3. Konfigurer DNS Records

• I dine Cloudflare DNS-indstillinger tilføjer vi to nye A-poster.
• Tilføj følgende:

Type: A
Navn: @
Indhold: 192.0.2.1
TTL: Auto
Proxystatus: Fuldmagt (orange sky - meget vigtigt)

Type: A
Navn: www
Indhold: 192.0.2.1
TTL: Auto
Proxystatus: Fuldmagt (orange sky - meget vigtigt)

Denne 192.0.2.1 IP er en speciel "dummy" adresse. Det er reserveret til dokumentation og test, hvilket gør det perfekt til vores behov.

4. Aktiver Cloudflare Proxy

• Sørg for, at proxystatus (orange sky-ikon) er aktiveret for din DNS-post.
• Dette giver Cloudflare mulighed for at proxye din trafik og er nødvendigt for, at Cloudflare Workers kan fungere.

5. Bekræft konfigurationen

• Når navneserverændringen har udbredt sig, vil Cloudflare vise dit domæne som "Aktivt".
• Du kan bekræfte dette i Cloudflare-dashboardet.

Det vigtigste her er, at vi ikke peger dit domæne til nogen egentlig webhosting. 192.0.2.1-adressen er kun en pladsholder. Din Cloudflare Worker, som vi konfigurerer næste gang, opsnapper alle anmodninger til dit domæne og håndtere URL-forkortelseslogikken.

Pro Tip: Denne opsætning betyder, at du ikke behøver at betale for eller administrere nogen webhosting. Cloudflare Workers vil klare alle de tunge løft, hvilket gør denne løsning ikke kun gratis, men også utrolig let og nem at vedligeholde.

Med din DNS korrekt konfigureret, er du nu klar til at gå videre til den spændende del – opsætning af din Cloudflare Worker til at håndtere URL-forkortelsen.

Trin 3: Oprettelse af en Cloudflare-arbejder

Nu hvor vi har vores domæne konfigureret i Cloudflare, er det tid til at oprette den Worker, der skal håndtere vores omdirigeringer. Cloudflare Workers leverer et serverløst eksekveringsmiljø, der giver os mulighed for at køre vores kode på kanten, tæt på vores brugere for optimal ydeevne.

1. Opret en Cloudflare-arbejder

• Adgang til arbejdersektionen:
  • Log ind på dit Cloudflare-dashboard.
  • Naviger til sektionen "Arbejdere" fra sidebjælken.
  • Klik på "Create a Service", hvis dette er din første Worker, eller "Create Worker", hvis du allerede har eksisterende Workers.
• Navngiv din medarbejder:
  • Vælg et beskrivende navn til din Worker, såsom "bulk-redirects-handler".
  • Klik på "Opret service" for at fortsætte til editoren.
• Sådan skriver du Worker Script:
  • I editoren skal du erstatte standardkoden med omdirigeringshåndteringsscriptet:

eksportstandard {
  async fetch(request) {
    const redirectMap = nyt kort([
      ["google"," https://www.google.com?subId1=google"],
      ["bing", "https://www.bing.com?subId1=bing"],
      // Tilføj flere omdirigeringer her efter behov
    ]);

    const url = ny URL(request.url);
    console.log("Fuld URL:", url.toString());
    console.log("Værtsnavn:", url.værtsnavn);
    console.log("Stinavn:", url.stinavn);

    let path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
    
    if (url.hostname.includes('workers.dev')) {
      path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
    }
    
    console.log("Behandlet sti:", sti);
    
    const placering = redirectMap.get(sti);
    console.log("Omdiriger placering:", placering);

// Skift til 301 for Permanent omdirigering
    if (placering) {
      returnere Response.redirect(placering, 302);
    }
    
    // Hvis anmodningen ikke er på kortet, returner en 404 eller din foretrukne fallback
    return new Response(`Ikke fundet: ${sti}`, { status: 404 });
  },
};

• Forstå scriptet:
  • Vi definerer en redirectMap der indeholder vores korte stier og deres tilsvarende fulde URL'er.

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

yourshorturl.com/google omdirigerer til -> https://www.google.com?subId1=google

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

yourshorturl.com/bing omdirigerer til -> https://www.bing.com?subId1=bing

• Scriptet behandler indgående anmodninger, udtrækker stien og tjekker, om den matcher nogen af ​​vores definerede omdirigeringer.
• Hvis der findes et match, returnerer det en 302 (midlertidig omdirigering) til den tilsvarende URL.
• Hvis der ikke findes noget match, returnerer det et 404 Ikke fundet svar.
• Test af arbejderen:
  • Brug "Quick Edit"-funktionen i Cloudflare-dashboardet til at foretage ændringer og teste din Worker.
  • Du kan bruge det medfølgende HTTP-testværktøj til at simulere anmodninger og se, hvordan din Worker reagerer.
• Indsættelse af arbejderen:
  • Når du er tilfreds med dine tests, skal du klikke på "Gem og implementer" for at gøre din Worker live.
• Opsætning af arbejderruter:

• Efter implementeringen skal du gå til fanen "Triggers" for din medarbejder.
• Tilføj en rute, der matcher dit domæne, som f.eks *recommends.link/*.
• Dette sikrer, at alle anmodninger til dit domæne håndteres af denne medarbejder.
• Bekræftelse af opsætningen:
  • Prøv at få adgang til nogle af dine omdirigeringsstier (f.eks. https://recommends.link/url-shortener-guide) for at sikre, at de fungerer som forventet.
  • Tjek Workers Logs i dit Cloudflare-dashboard for at se konsoloutputtet og verificere, at stierne behandles korrekt.

Trin 4: Flere tilpasninger (valgfrit)

Dynamiske omdirigeringer med Cloudflare KV

For at gøre vores omdirigeringssystem mere fleksibelt og nemmere at administrere, kan vi bruge Cloudflare KV (Key-Value) storage til at gemme vores omdirigeringer:

Opret et KV-navneområde:

• I dit Cloudflare-dashboard skal du gå til Workers > KV. Klik på "Create namespace" og navngiv det (f.eks. "REDIRECT_MAP").

Bind KV-navneområdet til din arbejder:

• Gå til din Workers indstillinger. Under "KV-navneområdebindinger" tilføjer du en ny binding. Vælg dit KV-navneområde og giv det et variabelnavn (f.eks. REDIRECTS).

Rediger Worker-scriptet til at bruge KV:

   eksportstandard {
     async fetch(request, env) {
       const url = ny URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const placering = afvent env.REDIRECTS.get(sti);
       
       if (placering) {
         returnere Response.redirect(placering, 301);
       }
       
       return new Response(`Ikke fundet: ${sti}`, { status: 404 });
     },
   };

Du kan nu tilføje, opdatere eller fjerne omdirigeringer ved at ændre KV-butikken uden at ændre Worker-koden.

Parametriserede omdirigeringer

Tillad dynamiske parametre i dine omdirigeringer:

   eksportstandard {
     async fetch(request, env) {
       const url = ny URL(request.url);
       const [sti, ...params] = url.pathname.toLowerCase().replace(/^\//, '').split('/');
       
       lad placering = afvent env.REDIRECTS.get(sti);
       
       if (placering) {
         // Erstat pladsholdere med faktiske parametre
         params.forEach((param, indeks) => {
           location = location.replace(`{${indeks}}`, param);
         });
         returnere Response.redirect(placering, 301);
       }
       
       return new Response(`Ikke fundet: ${sti}`, { status: 404 });
     },
   };

Med denne opsætning kunne du have en KV-indgang som "produkt" : "https://mystore.com/item/{0}/details" og bruge den som yourshortlink.com/product/12345.

Klik på Sporing og analyse

Implementer grundlæggende analyser ved at logge omdirigeringshændelser:

   eksportstandard {
     async fetch(request, env) {
       const url = ny URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const placering = afvent env.REDIRECTS.get(sti);
       
       if (placering) {
         // Log omdirigeringshændelsen
         await env.REDIRECTS.put(`${path}_clicks`, (parseInt(await env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
         returnere Response.redirect(placering, 301);
       }
       
       return new Response(`Ikke fundet: ${sti}`, { status: 404 });
     },
   };

Tilpassede fejlsider

I stedet for et almindeligt tekst 404-svar skal du returnere en tilpasset HTML-side:

   const notFoundPage = `
   
   
   
     
     
     Link ikke fundet
     
       body { font-family: Arial, sans-serif; tekst-align: center; polstring-top: 50px; }
     
   
   
     Ups! Link ikke fundet
     Det korte link, du leder efter, findes ikke.
   
   
   `;

   // I din hentefunktion:
   returner nyt svar(notFoundPage, { 
     status: 404,
     headers: { 'Content-Type': 'text/html' }
   });

hastighedsbegrænsende

Implementer grundlæggende takstbegrænsning for at forhindre misbrug:

   eksportstandard {
     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 requests per minute limit
         return new Response('Rate limit overskred', { status: 429 });
       }
       
       await env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});
       
       // Resten af ​​din omdirigeringslogik her
     },
   };

A / B-test

Implementer enkel A/B-test for dine omdirigeringer:

   eksportstandard {
     async fetch(request, env) {
       const url = ny URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const locationA = await env.REDIRECTS.get(`${path}_A`);
       const locationB = await env.REDIRECTS.get(`${path}_B`);
       
       if (placering A && sted B) {
         const placering = Math.random() < 0.5 ? locationA: locationB;
         returnere Response.redirect(placering, 301);
       }
       
       // Fallback til normal omdirigering, hvis A/B-test ikke er sat op
       const placering = afvent env.REDIRECTS.get(sti);
       if (placering) {
         returnere Response.redirect(placering, 301);
       }
       
       return new Response(`Ikke fundet: ${sti}`, { status: 404 });
     },
   };

Disse tilpasninger og udvidelser tilføjer betydelig funktionalitet til dit masseomdirigeringssystem, hvilket gør det mere fleksibelt, kraftfuldt og informativt. Hver af disse funktioner kan forfines og udvides yderligere baseret på dine specifikke behov og anvendelsesmuligheder.

Resumé: Oprettelse af en tilpasset linkforkorter med Cloudflare-arbejdere

Igennem dette blogindlæg har vi undersøgt, hvordan man opretter en kraftfuld og fleksibel brugerdefineret URL-forkorter ved hjælp af Cloudflare Workers. Denne løsning tilbyder en gratis og effektiv tilgang til at skabe korte links i skala.

TL; DR:

1. Cloudflare Workers leverer en serverløs platform til implementering af tilpasset omdirigeringslogik med global distribution og lav latenstid.
2. Korrekt DNS-konfiguration og opsætning af Worker Routes er afgørende for at forbinde dit brugerdefinerede domæne til Worker.
3. En simpel JavaScript-baseret Worker kan håndtere komplekse omdirigeringsscenarier effektivt.
4. Cloudflares Key-Value (KV)-lagring kan udnyttes til at skabe dynamiske, let håndterbare omdirigeringskort.
5. Avancerede funktioner som parameteriserede omdirigeringer, kliksporing, tilpassede fejlsider, hastighedsbegrænsning og A/B-test kan implementeres i Worker-økosystemet.
6. Dette system giver betydelige fordele i forhold til traditionelle omdirigeringsmetoder, herunder forbedret ydeevne, lettere styring og øget fleksibilitet.

Løsningen vi har bygget giver flere fordele:

• Skalerbarhed: Håndterer millioner af omdirigeringer uden ydeevneforringelse.
• Fleksibilitet: Tilføj, modificer eller fjern nemt omdirigeringer uden at ændre kernelogikken.
• Performance (Præstation): Udnytter Cloudflares globale netværk til hurtige omdirigeringer over hele verden.
• Tilpasning: Giver mulighed for avancerede funktioner som analyse og A/B-test.
• Omkostningseffektivitet: Bruger serverløs arkitektur, hvilket potentielt reducerer hostingomkostningerne.
• Gratis alternativ til populære tjenester som Bit.ly eller Yourls til oprettelse af brandede korte links på et brugerdefineret domæne.

Nu hvor du forstår kraften og fleksibiliteten i dette Cloudflare Worker-baserede omdirigeringssystem, er det tid til at sætte det i værk:

1. Hvis du ikke allerede har gjort det, tilmeld dig en Cloudflare-konto og gør dig bekendt med Workers-platformen.
2. Implementer dette system til dine egne varemærkede korte links eller masseomdirigeringer.
3. Eksperimenter med de avancerede funktioner, vi har diskuteret, for at skræddersy systemet til dine specifikke behov.
4. Del dine oplevelser eller stil spørgsmål i kommentarfeltet nedenfor. Din indsigt kan hjælpe andre i fællesskabet!
5. For mere avancerede brugssager eller tilpassede implementeringer kan du overveje at kontakte en Cloudflare Workers-ekspert eller konsulenttjeneste.

Bliv nysgerrig, fortsæt med at lære, og tøv ikke med at skubbe grænserne for, hvad der er muligt med værktøjer som Cloudflare Workers.