I dette innlegget skal jeg dele med dere hvordan du kan lage din egen tilpassede URL-forkorter for domene ved å bruke Cloudflare Workers. Enten du er en nettutvikler som ønsker å legge til et annet verktøy i beltet ditt, en bedriftseier som ønsker å merke koblingene dine uten den høye prislappen, eller bare noen som elsker å fikle med nettteknologier, er denne trinnvise veiledningen for du.
Som nettutvikler og teknologientusiast har jeg alltid vært fascinert av de små tingene som gjør internett mer effektivt og brukervennlig. En dag, mens jeg delte en spesielt lang og uhåndterlig URL med en kollega, fant jeg at jeg ønsket meg en enkel, personlig måte å forkorte lenker på. Jada, det er nok av URL-forkortingstjenester der ute, men jeg ville ha noe som føltes mer "meg" - noe jeg kunne tilpasse og kontrollere.
Det var da jeg snublet over ideen om å lage min egen tilpassede URL-forkorter ved å bruke Cloudflare Workers. Det var som å finne en skjult skatt i det enorme havet av nettteknologier. Ikke bare kunne jeg forkorte URL-er, men jeg kunne gjøre det med mitt eget domenenavn, gratis! Spenningen ved denne oppdagelsen minnet meg om første gang jeg distribuerte et nettsted – det rushet av bemyndigelse og uendelige muligheter.
Det som gjorde denne oppdagelsen enda mer spennende var å innse at den kunne fungere som et fantastisk, gratis alternativ til populære tjenester som Bit.ly eller TinyURL for å lage merkede korte lenker på et tilpasset domene. Mange bedrifter og enkeltpersoner betaler gode penger for denne typen funksjonalitet, men her er en måte å oppnå samme resultat uten å bruke en krone.
Trinn 1: Registrer et domenenavn (Bruk et kort domene)
Det første trinnet i å lage din egendefinerte URL-forkorter er å registrere et domenenavn. Dette vil være grunnlaget for dine merkede korte lenker, så velg med omhu!
Her er noen tips for å hjelpe deg med å velge det perfekte domenet:
- Hold det kort: Hele poenget med en URL-forkorter er å lage konsise lenker. Se etter domenenavn med 3-5 tegn hvis mulig. Dette kan være en forkortelse, akronym eller et fengende ord.
- Gjør det minneverdig: Velg noe som er lett å huske og skrive. Dette vil gjøre det enklere for deg og andre å bruke de forkortede koblingene dine.
- Vurder merkevaren din: Hvis du bruker dette for en bedrift eller personlig merkevare, prøv å justere domenet med din eksisterende merkevareidentitet.
- Sjekk tilgjengelighet: Korte, fengende domener er etterspurt. Du må kanskje være kreativ eller vurdere alternative toppdomener (TLDer) som .io, .co eller .me hvis førstevalget ditt ikke er tilgjengelig.
- Tenk på TLD: Mens .com er populært, ikke viker unna andre TLDer. Noen, som .link eller .click, kan være spesielt passende for en URL-forkorter.
Her er noen eksempler for å inspirere deg:
- abc.link
- go.io
- shrt.co
- zap.me
Når du har valgt domene, må du kjøpe det fra en domeneregistrator. Noen populære alternativer inkluderer:
- Namecheap
- Gå pappa
- CloudFlare (Anbefalt – noe som også er veldig praktisk siden vi skal bruke Cloudflare Workers)
Husk at selv om domenet vil koste penger, er det et engangskjøp per år, og resten av oppsettet for URL-forkorter vil være gratis ved å bruke Cloudflare Workers.
Profftips: Før du fullfører kjøpet, sørg for at domenet ikke er assosiert med spam eller ondsinnet aktivitet. Du kan sjekke historien ved å bruke verktøy som domeneverktøy eller Wayback Machine.
Med det skinnende nye domenet ditt i hånden, er du klar til å gå videre til neste trinn: konfigurere Cloudflare for domenet ditt. Men vi skal dekke det i neste avsnitt.
Trinn 2: Konfigurer DNS-poster for domenet ditt
Nå som du har domenet ditt, er det på tide å sette opp DNS-konfigurasjonen. Dette trinnet er avgjørende for å sikre at Cloudflare Workers fungerer korrekt med det nylig registrerte domenet.
La oss gå gjennom prosessen:
1. Legg til domenet ditt i Cloudflare
- Hvis du ikke allerede har gjort det, opprette en gratis Cloudflare-konto.
- I Cloudflare-dashbordet ditt, klikk "Legg til et nettsted" og skriv inn domenenavnet ditt.
- Cloudflare vil skanne etter eksisterende DNS-poster. Slett alle oppføringer den finner (med mindre du også bruker domenet til e-post eller andre viktige tjenester, i så fall behold dem).
2. Oppdater navneservere (Ignorer dette trinnet hvis domenet ditt er registrert hos Cloudflare)
- Cloudflare vil gi deg et sett med navneservere.
- Gå til domeneregistratorens nettsted og erstatt de eksisterende navneserverne med de som leveres av Cloudflare.
- Dette trinnet kan ta opptil 24 timer å spre seg globalt.
3. Konfigurer DNS-poster
- I Cloudflare DNS-innstillingene dine legger vi til to nye A-poster.
- Legg til følgende:
Type: A
Navn: @
Innhold: 192.0.2.1
TTL: Auto
Fullmaktsstatus: Fullmakt (oransje sky - veldig viktig)
Type: A
Navn: www
Innhold: 192.0.2.1
TTL: Auto
Fullmaktsstatus: Fullmakt (oransje sky - veldig viktig)
Denne 192.0.2.1 IP-adressen er en spesiell "dummy"-adresse. Den er reservert for dokumentasjon og testing, noe som gjør den perfekt for våre behov.
4. Aktiver Cloudflare Proxy
- Sørg for at proxy-statusen (oransje skyikon) er aktivert for DNS-posten din.
- Dette lar Cloudflare proxy-tjene trafikken din og er nødvendig for at Cloudflare Workers skal fungere.
5. Bekreft konfigurasjonen
- Når navneserverendringen har forplantet seg, vil Cloudflare vise domenet ditt som "Aktivt".
- Du kan bekrefte dette i Cloudflare-dashbordet.
Hovedpoenget her er at vi ikke peker domenet ditt til noen faktisk webhotell. 192.0.2.1-adressen er bare en plassholder. Din Cloudflare Worker, som vi setter opp neste gang, vil fange opp alle forespørsler til domenet ditt og håndtere URL-forkortingslogikken.
Profftips: Dette oppsettet betyr at du ikke trenger å betale for eller administrere noe webhotell. Cloudflare Workers vil håndtere alle de tunge løftene, noe som gjør denne løsningen ikke bare gratis, men også utrolig lett og enkel å vedlikeholde.
Med DNS riktig konfigurert, er du nå klar til å gå videre til den spennende delen – å sette opp Cloudflare Worker for å håndtere URL-forkortelsen.
Trinn 3: Opprette en Cloudflare-arbeider
Nå som vi har konfigurert domenet vårt i Cloudflare, er det på tide å lage arbeideren som skal håndtere omdirigeringene våre. Cloudflare Workers tilbyr et serverløst kjøringsmiljø som lar oss kjøre koden vår på kanten, nær brukerne våre for optimal ytelse.
1. Opprett en Cloudflare-arbeider
- Få tilgang til arbeiderseksjonen:
- Logg inn på Cloudflare-dashbordet.
- Naviger til "Arbeidere"-delen fra sidefeltet.
- Klikk på "Opprett en tjeneste" hvis dette er din første arbeider, eller "Opprett arbeider" hvis du allerede har eksisterende arbeidere.
- Gi navn til arbeideren din:
- Velg et beskrivende navn for Worker, for eksempel "bulk-redirects-handler".
- Klikk "Opprett tjeneste" for å fortsette til redigeringsprogrammet.
- Skrive arbeiderskriptet:
- I redigeringsprogrammet erstatter du standardkoden med omdirigeringsbehandlerskriptet:
eksporter standard
asynkron hente(forespørsel) {
const redirectMap = nytt kart([
["google"," https://www.google.com?subId1=google"],
["bing", "https://www.bing.com?subId1=bing"],
// Legg til flere omdirigeringer her etter behov
]);
const url = ny URL(request.url);
console.log("Full URL:", url.toString());
console.log("Vertsnavn:", url.vertsnavn);
console.log("Binavn:", url.banenavn);
let path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
if (url.hostname.includes('workers.dev')) {
path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
}
console.log("Behandlet bane:", bane);
const plassering = redirectMap.get(bane);
console.log("Omdiriger plassering:", plassering);
// Endre til 301 for Permanent omdirigering
if (sted) {
return Response.redirect(location, 302);
}
// Hvis forespørselen ikke er på kartet, returner en 404 eller din foretrukne reserve
return new Response(`Ikke funnet: ${path}`, { status: 404 });
},
};
- Forstå skriptet:
- Vi definerer en redirectMap som inneholder våre korte veier og deres tilhørende fullstendige nettadresser.
["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
- Skriptet behandler innkommende forespørsler, trekker ut banen og sjekker om den samsvarer med noen av våre definerte omdirigeringer.
- Hvis et samsvar blir funnet, returnerer det en 302 (midlertidig viderekobling) til den tilsvarende URL-en.
- Hvis ingen samsvar blir funnet, returnerer det et 404 Ikke funnet-svar.
- Testing av arbeideren:
- Bruk "Hurtigredigering"-funksjonen i Cloudflare-dashbordet for å gjøre endringer og teste arbeideren din.
- Du kan bruke det medfølgende HTTP-testverktøyet til å simulere forespørsler og se hvordan Worker reagerer.
- Utplassering av arbeideren:
- Når du er fornøyd med testene dine, klikker du på "Lagre og distribuer" for å gjøre Worker live.
- Sette opp arbeiderruter:
- Etter utplasseringen går du til «Triggere»-fanen for arbeideren din.
- Legg til en rute som samsvarer med domenet ditt, for eksempel *recommends.link/*.
- Dette sikrer at alle forespørsler til domenet ditt blir håndtert av denne arbeideren.
- Verifisering av oppsettet:
- Prøv å få tilgang til noen av omdirigeringsbanene dine (f.eks. https://recommends.link/url-shortener-guide) for å sikre at de fungerer som forventet.
- Sjekk arbeiderloggene i Cloudflare-dashbordet for å se konsollutdataene og bekrefte at banene blir behandlet på riktig måte.
Trinn 4: Flere tilpasninger (valgfritt)
Dynamiske omdirigeringer med Cloudflare KV
For å gjøre omdirigeringssystemet vårt mer fleksibelt og enklere å administrere, kan vi bruke Cloudflare KV (Key-Value)-lagring for å lagre omdirigeringene våre:
Opprett et KV-navneområde:
- I Cloudflare-dashbordet ditt, gå til Workers > KV. Klikk på "Create namespace" og navngi det (f.eks. "REDIRECT_MAP").
- Gå til Worker-innstillingene. Under "KV-navneområdebindinger", legg til en ny binding. Velg ditt KV-navneområde og gi det et variabelnavn (f.eks. REDIRECTS).
eksporter standard
async fetch(request, env) {
const url = ny URL(request.url);
const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
const plassering = avvent env.REDIRECTS.get(bane);
if (sted) {
return Response.redirect(location, 301);
}
return new Response(`Ikke funnet: ${path}`, { status: 404 });
},
};
Du kan nå legge til, oppdatere eller fjerne omdirigeringer ved å endre KV-butikken uten å endre Worker-koden.
Parameteriserte omdirigeringer
Tillat dynamiske parametere i viderekoblingene dine:
eksporter standard
async fetch(request, env) {
const url = ny URL(request.url);
const [bane, ...params] = url.pathname.toLowerCase().replace(/^\//, '').split('/');
la plassering = avvente env.REDIRECTS.get(bane);
if (sted) {
// Erstatt plassholdere med faktiske parametere
params.forEach((param, indeks) => {
location = location.replace(`{${indeks}}`, param);
});
return Response.redirect(location, 301);
}
return new Response(`Ikke funnet: ${path}`, { status: 404 });
},
};
Med dette oppsettet kan du ha en KV-oppføring som "produkt" : "https://mystore.com/item/{0}/details" og bruke den som yourshortlink.com/product/12345.
Klikk på Sporing og analyse
Implementer grunnleggende analyser ved å logge omdirigeringshendelser:
eksporter standard
async fetch(request, env) {
const url = ny URL(request.url);
const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
const plassering = avvent env.REDIRECTS.get(bane);
if (sted) {
// Logg omdirigeringshendelsen
await env.REDIRECTS.put(`${path}_clicks`, (parseInt(await env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
return Response.redirect(location, 301);
}
return new Response(`Ikke funnet: ${path}`, { status: 404 });
},
};
Egendefinerte feilsider
I stedet for et 404-svar med ren tekst, returner en tilpasset HTML-side:
const notFoundPage = `
Link ikke funnet
body { font-family: Arial, sans-serif; tekst-align: center; polstring-topp: 50px; }
Oops! Link ikke funnet
Den korte lenken du leter etter eksisterer ikke.
`;
// I hentefunksjonen din:
returner nytt svar(notFoundPage, {
status: 404,
overskrifter: { 'Content-Type': 'text/html' }
});
Rate Limiting
Implementer grunnleggende takstbegrensning for å forhindre misbruk:
eksporter 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 forespørsler per minutt grense
return new Response('Rate limit overskred', { status: 429 });
}
await env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});
// Resten av omdirigeringslogikken din her
},
};
A / B-testing
Implementer enkel A/B-testing for viderekoblingene dine:
eksporter standard
async fetch(request, env) {
const url = ny URL(request.url);
const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
const plasseringA = await env.REDIRECTS.get(`${path}_A`);
const locationB = await env.REDIRECTS.get(`${path}_B`);
if (sted A && sted B) {
const plassering = Math.random() < 0.5 ? plasseringA: plasseringB;
return Response.redirect(location, 301);
}
// Tilbakeslag til normal omdirigering hvis A/B-testen ikke er satt opp
const plassering = avvent env.REDIRECTS.get(bane);
if (sted) {
return Response.redirect(location, 301);
}
return new Response(`Ikke funnet: ${path}`, { status: 404 });
},
};
Disse tilpasningene og utvidelsene gir betydelig funksjonalitet til systemet for masseomdirigering, noe som gjør det mer fleksibelt, kraftig og informativt. Hver av disse funksjonene kan foredles og utvides ytterligere basert på dine spesifikke behov og brukstilfeller.
Sammendrag: Opprette en tilpasset koblingsforkorter med Cloudflare-arbeidere
Gjennom dette blogginnlegget har vi utforsket hvordan du kan lage en kraftig og fleksibel egendefinert URL-forkorter ved å bruke Cloudflare Workers. Denne løsningen tilbyr en gratis og effektiv tilnærming til å lage korte lenker i stor skala.
TL; DR:
- Cloudflare Workers tilbyr en serverløs plattform for implementering av tilpasset omdirigeringslogikk med global distribusjon og lav ventetid.
- Riktig DNS-konfigurasjon og Worker Routes-oppsett er avgjørende for å koble ditt egendefinerte domene til Worker.
- En enkel JavaScript-basert arbeider kan håndtere komplekse omdirigeringsscenarier effektivt.
- Cloudflares Key-Value (KV)-lagring kan utnyttes til å lage dynamiske, lett håndterbare omdirigeringskart.
- Avanserte funksjoner som parameteriserte omdirigeringer, klikksporing, tilpassede feilsider, hastighetsbegrensning og A/B-testing kan implementeres i Worker-økosystemet.
- Dette systemet gir betydelige fordeler fremfor tradisjonelle omdirigeringsmetoder, inkludert forbedret ytelse, enklere administrasjon og økt fleksibilitet.
Løsningen vi har bygget gir flere fordeler:
- skalerbarhet: Håndterer millioner av omdirigeringer uten ytelsesforringelse.
- fleksibilitet: Legg til, modifiser eller fjern enkelt omdirigeringer uten å endre kjernelogikken.
- Ytelse: Utnytter Cloudflares globale nettverk for raske omdirigeringer over hele verden.
- Tilpasning: Gir mulighet for avanserte funksjoner som analyse og A/B-testing.
- Kostnadseffektivitet: Bruker serverløs arkitektur, noe som potensielt reduserer hostingkostnadene.
- Gratis alternativ til populære tjenester som Bit.ly eller Yourls for å lage merkede korte lenker på et tilpasset domene.
Nå som du forstår kraften og fleksibiliteten til dette Cloudflare Worker-baserte omdirigeringssystemet, er det på tide å sette det i verk:
- Hvis du ikke allerede har gjort det, registrer deg for en Cloudflare-konto og gjør deg kjent med Workers-plattformen.
- Implementer dette systemet for dine egne merkede korte lenker eller masseviderekoblinger.
- Eksperimenter med de avanserte funksjonene vi har diskutert for å skreddersy systemet til dine spesifikke behov.
- Del dine erfaringer eller still spørsmål i kommentarfeltet nedenfor. Din innsikt kan hjelpe andre i samfunnet!
- For mer avanserte brukstilfeller eller tilpassede implementeringer, bør du vurdere å kontakte en Cloudflare Workers-ekspert eller konsulenttjeneste.
Vær nysgjerrig, fortsett å lære, og ikke nøl med å flytte grensene for hva som er mulig med verktøy som Cloudflare Workers.
