In diesem Beitrag werde ich mit Ihnen teilen So erstellen Sie mit Cloudflare Workers Ihren ganz persönlichen URL-Shortener für Ihre Domain. Egal, ob Sie ein Webentwickler sind, der sein Repertoire um ein weiteres Tool erweitern möchte, ein Geschäftsinhaber, der seine Links ohne hohe Kosten mit einer Marke versehen möchte, oder einfach jemand, der gerne mit Webtechnologien herumbastelt, diese Schritt-für-Schritt-Anleitung ist für Sie.
Als Webentwickler und Technikbegeisterter haben mich die kleinen Dinge schon immer fasziniert, die das Internet effizienter und benutzerfreundlicher machen. Als ich eines Tages eine besonders lange und unhandliche URL mit einem Kollegen teilte, wünschte ich mir eine einfache, personalisierte Möglichkeit, Links zu kürzen. Natürlich gibt es viele Dienste zum Kürzen von URLs, aber ich wollte etwas, das mehr nach „mir“ klingt – etwas, das ich anpassen und steuern kann.
Da bin ich auf die Idee gestoßen, meinen eigenen benutzerdefinierten URL-Shortener mit Cloudflare Workers zu erstellen. Es war, als hätte ich im riesigen Meer der Webtechnologien einen verborgenen Schatz gefunden. Ich konnte nicht nur URLs verkürzen, sondern das auch noch mit meinem eigenen Domänennamen – und das kostenlos! Die Aufregung über diese Entdeckung erinnerte mich an das erste Mal, als ich eine Website erstellte – dieses Gefühl der Selbstbestimmung und der endlosen Möglichkeiten.
Was diese Entdeckung noch spannender machte, war die Erkenntnis, dass es eine fantastische, kostenlose Alternative zu beliebten Diensten wie Bit.ly oder TinyURL zum Erstellen von gebrandeten Kurzlinks auf einer benutzerdefinierten Domain sein könnte. Viele Unternehmen und Einzelpersonen zahlen gutes Geld für diese Art von Funktionalität, aber hier ist eine Möglichkeit, dasselbe Ergebnis zu erzielen, ohne einen Cent auszugeben.
Schritt 1: Registrieren Sie einen Domänennamen (verwenden Sie eine Kurzdomäne)
Der erste Schritt bei der Erstellung Ihres benutzerdefinierten URL-Shorteners besteht darin, einen Domänennamen zu registrieren. Dies wird die Grundlage Ihrer Marken-Kurzlinks sein, also wählen Sie mit Bedacht!
Hier sind einige Tipps, die Ihnen bei der Auswahl der perfekten Domain helfen:
- Halt dich kurz: Der Sinn eines URL-Shorteners besteht darin, prägnante Links zu erstellen. Suchen Sie nach Möglichkeit nach Domänennamen mit 3-5 Zeichen. Dies könnte eine Abkürzung, ein Akronym oder ein einprägsames Wort sein.
- Machen Sie es unvergesslich: Wählen Sie etwas, das leicht zu merken ist, und geben Sie es ein. So können Sie und andere Ihre verkürzten Links einfacher verwenden.
- Betrachten Sie Ihre Marke: Wenn Sie dies für eine geschäftliche oder persönliche Marke verwenden, versuchen Sie, die Domäne an Ihre bestehende Markenidentität anzupassen.
- Verfügbarkeit prüfen: Kurze, einprägsame Domains sind sehr gefragt. Sie müssen möglicherweise kreativ werden oder alternative Top-Level-Domains (TLDs) wie .io, .co oder .me in Betracht ziehen, wenn Ihre erste Wahl nicht verfügbar ist.
- Denken Sie an die TLD: Auch wenn .com beliebt ist, sollten Sie auch andere TLDs nicht meiden. Manche, wie .link oder .click, könnten sich besonders gut für einen URL-Shortener eignen.
Hier sind einige Beispiele, die Sie inspirieren sollen:
- abc.link
- go.io
- shrt.co
- zap.me
Sobald Sie Ihre Domain ausgewählt haben, müssen Sie sie bei einem Domain-Registrar erwerben. Einige beliebte Optionen sind:
- Namecheap
- Los Papa
- Cloudflare (Empfohlen – was auch sehr praktisch ist, da wir Cloudflare Workers verwenden werden)
Denken Sie daran, dass die Domain zwar Geld kostet, es sich jedoch um einen einmaligen Kauf pro Jahr handelt und die restliche Einrichtung unseres URL-Verkürzers mit Cloudflare Workers kostenlos ist.
Profi-Tipp: Stellen Sie vor dem Abschluss Ihres Kaufs sicher, dass die Domain nicht mit Spam oder böswilligen Aktivitäten in Verbindung steht. Sie können den Verlauf mit Tools wie Domain Tools oder Wayback Machine überprüfen.
Mit Ihrer brandneuen Domain in der Hand sind Sie bereit für den nächsten Schritt: das Einrichten von Cloudflare für Ihre Domain. Aber das behandeln wir im nächsten Abschnitt.
Schritt 2: Konfigurieren Sie DNS-Einträge für Ihre Domain
Nachdem Sie nun Ihre Domain haben, ist es an der Zeit, die DNS-Konfiguration einzurichten. Dieser Schritt ist entscheidend, um sicherzustellen, dass Ihre Cloudflare Workers mit Ihrer neu registrierten Domain ordnungsgemäß funktionieren.
Lassen Sie uns den Prozess durchgehen:
1. Fügen Sie Ihre Domain zu Cloudflare hinzu
- Falls Sie dies noch nicht getan haben, Erstellen Sie ein kostenloses Cloudflare-Konto.
- Klicken Sie in Ihrem Cloudflare-Dashboard auf „Site hinzufügen“ und geben Sie Ihren Domänennamen ein.
- Cloudflare sucht nach vorhandenen DNS-Einträgen. Löschen Sie alle gefundenen Einträge (es sei denn, Sie verwenden die Domain auch für E-Mail oder andere wichtige Dienste. In diesem Fall behalten Sie diese).
2. Nameserver aktualisieren (Ignorieren Sie diesen Schritt, wenn Ihre Domain bei Cloudflare registriert ist)
- Cloudflare stellt Ihnen eine Reihe von Nameservern zur Verfügung.
- Gehen Sie zur Website Ihres Domain-Registrars und ersetzen Sie die vorhandenen Nameserver durch die von Cloudflare bereitgestellten.
- Es kann bis zu 24 Stunden dauern, bis dieser Schritt weltweit wirksam wird.
3. DNS-Einträge konfigurieren
- In Ihren Cloudflare-DNS-Einstellungen fügen wir zwei neue A-Einträge hinzu.
- Fügen Sie Folgendes hinzu:
Typ: A
Name: @
Inhalt: 192.0.2.1
TTL: Auto
Proxy-Status: Stellvertretend (orange Wolke – sehr wichtig)
Typ: A
Name: www
Inhalt: 192.0.2.1
TTL: Auto
Proxy-Status: Stellvertretend (orange Wolke – sehr wichtig)
Diese IP 192.0.2.1 ist eine spezielle „Dummy“-Adresse. Sie ist für Dokumentation und Tests reserviert und daher perfekt für unsere Anforderungen geeignet.
4. Cloudflare-Proxy aktivieren
- Stellen Sie sicher, dass der Proxy-Status (orangefarbenes Wolkensymbol) für Ihren DNS-Eintrag aktiviert ist.
- Dadurch kann Cloudflare Ihren Datenverkehr als Proxy verwenden und dies ist für die Funktion von Cloudflare Workers erforderlich.
5. Konfiguration überprüfen
- Sobald die Nameserver-Änderung propagiert wurde, zeigt Cloudflare Ihre Domain als „Aktiv“ an.
- Sie können dies im Cloudflare-Dashboard überprüfen.
Der entscheidende Punkt hierbei ist, dass wir Ihre Domain nicht auf ein tatsächliches Webhosting verweisen. Die Adresse 192.0.2.1 ist nur ein Platzhalter. Ihr Cloudflare Worker, den wir als Nächstes einrichten, fängt alle Anfragen an Ihre Domain ab und kümmert sich um die URL-Verkürzungslogik.
Profi-Tipp: Bei dieser Konfiguration müssen Sie weder für Webhosting bezahlen noch es verwalten. Cloudflare Workers übernimmt die ganze schwere Arbeit, wodurch diese Lösung nicht nur kostenlos, sondern auch unglaublich leicht und einfach zu warten ist.
Wenn Ihr DNS richtig konfiguriert ist, können Sie nun mit dem spannenden Teil fortfahren – der Einrichtung Ihres Cloudflare Workers für die URL-Verkürzung.
Schritt 3: Einen Cloudflare Worker erstellen
Nachdem wir unsere Domäne nun in Cloudflare konfiguriert haben, ist es an der Zeit, den Worker zu erstellen, der unsere Weiterleitungen handhaben wird. Cloudflare Worker bieten eine serverlose Ausführungsumgebung, die es uns ermöglicht, unseren Code am Rand, in der Nähe unserer Benutzer, auszuführen, um optimale Leistung zu erzielen.
1. Einen Cloudflare Worker erstellen
- Zugriff auf den Abschnitt „Mitarbeiter“:
- Melden Sie sich bei Ihrem Cloudflare-Dashboard an.
- Navigieren Sie in der Seitenleiste zum Abschnitt „Mitarbeiter“.
- Klicken Sie auf „Dienst erstellen“, wenn dies Ihr erster Worker ist, oder auf „Worker erstellen“, wenn Sie bereits über vorhandene Worker verfügen.
- Geben Sie Ihrem Mitarbeiter einen Namen:
- Wählen Sie einen beschreibenden Namen für Ihren Worker, beispielsweise „Bulk-Redirects-Handler“.
- Klicken Sie auf „Dienst erstellen“, um zum Editor zu gelangen.
- Schreiben des Worker-Skripts:
- Ersetzen Sie im Editor den Standardcode durch das Skript des Umleitungshandlers:
Standard exportieren {
asynchrones Abrufen (Anfrage) {
const redirectMap = neue Karte([
["google", "https://www.google.com?subId1=google"],
["bing", "https://www.bing.com?subId1=bing"],
// Fügen Sie hier nach Bedarf weitere Weiterleitungen hinzu
]);
const url = neue URL(Anforderungs-URL);
console.log("Vollständige URL:", url.toString());
console.log("Hostname:", url.hostname);
console.log("Pfadname:", url.Pfadname);
let path = url.Pfadname.toLowerCase().replace(/^\//, '').split('/')[0];
wenn (url.hostname.includes('workers.dev')) {
Pfad = url.Pfadname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
}
console.log("Verarbeiteter Pfad:", Pfad);
const location = redirectMap.get(Pfad);
console.log("Umleitungsort:", Ort);
//Änderung auf 301 für permanente Weiterleitung
wenn (Standort) {
gibt Response.redirect(Standort, 302) zurück;
}
// Wenn die Anfrage nicht in der Karte ist, gib eine 404 oder deinen bevorzugten Fallback zurück.
returniere neue Antwort(`Nicht gefunden: ${path}`, { status: 404 });
},
};
- Das Skript verstehen:
- Wir definieren a UmleitungMap das unsere Kurzpfade und die entsprechenden vollständigen URLs enthält.
["google", "https://www.google.com?subId1=google"],
IhreKurz-URL.com/google leitet weiter zu -> https://www.google.com?subId1=google
["bing", "https://www.bing.com?subId1=bing"],
yourshorturl.com/bing leitet weiter zu -> https://www.bing.com?subId1=bing
- Das Skript verarbeitet eingehende Anfragen, extrahiert den Pfad und prüft, ob er mit einer unserer definierten Weiterleitungen übereinstimmt.
- Wenn eine Übereinstimmung gefunden wird, wird eine 302 (temporäre Weiterleitung) an die entsprechende URL zurückgegeben.
- Wenn keine Übereinstimmung gefunden wird, wird die Antwort „404 Nicht gefunden“ zurückgegeben.
- Testen des Workers:
- Verwenden Sie die Funktion „Schnellbearbeitung“ im Cloudflare-Dashboard, um Änderungen vorzunehmen und Ihren Worker zu testen.
- Sie können das bereitgestellte HTTP-Testtool verwenden, um Anfragen zu simulieren und zu sehen, wie Ihr Worker reagiert.
- Bereitstellen des Workers:
- Wenn Sie mit Ihren Tests zufrieden sind, klicken Sie auf „Speichern und bereitstellen“, um Ihren Worker live zu schalten.
- Einrichten von Arbeiterrouten:
- Gehen Sie nach der Bereitstellung zur Registerkarte „Trigger“ für Ihren Worker.
- Fügen Sie eine Route hinzu, die zu Ihrer Domäne passt, beispielsweise *empfiehlt.link/*.
- Dadurch wird sichergestellt, dass alle Anfragen an Ihre Domäne von diesem Worker bearbeitet werden.
- Überprüfen des Setups:
- Versuchen Sie, auf einige Ihrer Umleitungspfade zuzugreifen (z. B. https://recommends.link/url-shortener-guide), um sicherzustellen, dass sie wie erwartet funktionieren.
- Überprüfen Sie die Worker-Protokolle in Ihrem Cloudflare-Dashboard, um die Konsolenausgabe anzuzeigen und sicherzustellen, dass die Pfade korrekt verarbeitet werden.
Schritt 4: Weitere Anpassungen (optional)
Dynamische Weiterleitungen mit Cloudflare KV
Um unser Umleitungssystem flexibler und einfacher zu verwalten zu machen, können wir den Cloudflare KV-Speicher (Key-Value) zum Speichern unserer Umleitungen verwenden:
Erstellen Sie einen KV-Namespace:
- Gehen Sie in Ihrem Cloudflare-Dashboard zu Workers > KV. Klicken Sie auf „Namespace erstellen“ und geben Sie ihm einen Namen (z. B. „REDIRECT_MAP“).
- Gehen Sie zu den Einstellungen Ihres Workers. Fügen Sie unter „KV-Namespace-Bindungen“ eine neue Bindung hinzu. Wählen Sie Ihren KV-Namespace und geben Sie ihm einen Variablennamen (z. B. REDIRECTS).
Standard exportieren {
asynchrones Abrufen (Anfrage, Umgebung) {
const url = neue URL(Anforderungs-URL);
const Pfad = url.Pfadname.toLowerCase().replace(/^\//, '').split('/')[0];
const location = warte auf env.REDIRECTS.get(Pfad);
wenn (Standort) {
gibt Response.redirect(Standort, 301) zurück;
}
returniere neue Antwort(`Nicht gefunden: ${path}`, { status: 404 });
},
};
Sie können jetzt Weiterleitungen hinzufügen, aktualisieren oder entfernen, indem Sie den KV-Store ändern, ohne den Worker-Code zu ändern.
Parametrisierte Weiterleitungen
Erlauben Sie dynamische Parameter in Ihren Weiterleitungen:
Standard exportieren {
asynchrones Abrufen (Anfrage, Umgebung) {
const url = neue URL(Anforderungs-URL);
const [Pfad, ...Params] = url.Pfadname.toLowerCase().replace(/^\//, '').split('/');
let location = warte auf env.REDIRECTS.get(Pfad);
wenn (Standort) {
// Platzhalter durch tatsächliche Parameter ersetzen
params.forEach((param, index) => {
Standort = Standort.Ersetzen(`{${index}}`, Param);
});
gibt Response.redirect(Standort, 301) zurück;
}
returniere neue Antwort(`Nicht gefunden: ${path}`, { status: 404 });
},
};
Mit diesem Setup könnten Sie einen KV-Eintrag wie „product“ : „https://mystore.com/item/{0}/details“ haben und ihn verwenden als yourshortlink.com/product/12345.
Klickverfolgung und Analyse
Implementieren Sie grundlegende Analysen, indem Sie Umleitungsereignisse protokollieren:
Standard exportieren {
asynchrones Abrufen (Anfrage, Umgebung) {
const url = neue URL(Anforderungs-URL);
const Pfad = url.Pfadname.toLowerCase().replace(/^\//, '').split('/')[0];
const location = warte auf env.REDIRECTS.get(Pfad);
wenn (Standort) {
// Das Umleitungsereignis protokollieren
warte auf env.REDIRECTS.put(`${path}_clicks`, (parseInt(warte auf env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
gibt Response.redirect(Standort, 301) zurück;
}
returniere neue Antwort(`Nicht gefunden: ${path}`, { status: 404 });
},
};
Benutzerdefinierte Fehlerseiten
Geben Sie anstelle einer 404-Antwort im Klartext eine benutzerdefinierte HTML-Seite zurück:
const nichtgefundeneSeite = `
Link nicht gefunden
body { Schriftfamilie: Arial, serifenlos; Textausrichtung: zentriert; Polsterung oben: 50px; }
Hoppla! Link nicht gefunden
Der gesuchte Kurzlink existiert nicht.
`;
// In Ihrer Fetch-Funktion:
returniere neue Antwort(notFoundPage, {
Status: 404,
Überschriften: { 'Inhaltstyp': 'text/html' }
});
Rate Limiting
Implementieren Sie eine grundlegende Ratenbegrenzung, um Missbrauch zu verhindern:
Standard exportieren {
asynchrones Abrufen (Anfrage, Umgebung) {
const ip = request.headers.get('CF-Connecting-IP');
const rateLimitKey = `ratelimit:${ip}`;
const currentRequests = parseInt(warte auf env.REDIRECTS.get(rateLimitKey) || '0');
if (currentRequests > 100) { // 100 Anfragen pro Minute Limit
returniere neue Antwort('Ratenlimit überschritten', { status: 429 });
}
warte auf env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});
// Rest Ihrer Umleitungslogik hier
},
};
A/B-Tests
Führen Sie einfache A/B-Tests für Ihre Weiterleitungen durch:
Standard exportieren {
asynchrones Abrufen (Anfrage, Umgebung) {
const url = neue URL(Anforderungs-URL);
const Pfad = url.Pfadname.toLowerCase().replace(/^\//, '').split('/')[0];
const locationA = warte auf env.REDIRECTS.get(`${path}_A`);
const locationB = warte auf env.REDIRECTS.get(`${path}_B`);
wenn (StandortA && StandortB) {
const Standort = Math.random() < 0.5 ? StandortA : StandortB;
gibt Response.redirect(Standort, 301) zurück;
}
// Fallback auf normale Weiterleitung, wenn kein A/B-Test eingerichtet ist
const location = warte auf env.REDIRECTS.get(Pfad);
wenn (Standort) {
gibt Response.redirect(Standort, 301) zurück;
}
returniere neue Antwort(`Nicht gefunden: ${path}`, { status: 404 });
},
};
Diese Anpassungen und Erweiterungen erweitern die Funktionalität Ihres Massenumleitungssystems erheblich und machen es flexibler, leistungsfähiger und informativer. Jede dieser Funktionen kann basierend auf Ihren spezifischen Anforderungen und Anwendungsfällen weiter verfeinert und erweitert werden.
Zusammenfassung: Erstellen eines benutzerdefinierten Link-Shorteners mit Cloudflare Workers
In diesem Blogbeitrag haben wir untersucht, wie man mit Cloudflare Workers einen leistungsstarken und flexiblen benutzerdefinierten URL-Shortener erstellt. Diese Lösung bietet einen kostenlosen und effizienten Ansatz zum Erstellen von Kurzlinks in großem Umfang.
TL; DR:
- Cloudflare Workers bieten eine serverlose Plattform zur Implementierung benutzerdefinierter Umleitungslogik mit globaler Verteilung und geringer Latenz.
- Die richtige DNS-Konfiguration und Einrichtung der Worker-Routen sind für die Verbindung Ihrer benutzerdefinierten Domäne mit dem Worker von entscheidender Bedeutung.
- Ein einfacher JavaScript-basierter Worker kann komplexe Umleitungsszenarien effizient verarbeiten.
- Der Key-Value-Speicher (KV) von Cloudflare kann zum Erstellen dynamischer, leicht verwaltbarer Umleitungszuordnungen genutzt werden.
- Erweiterte Funktionen wie parametrisierte Weiterleitungen, Klickverfolgung, benutzerdefinierte Fehlerseiten, Ratenbegrenzung und A/B-Tests können innerhalb des Worker-Ökosystems implementiert werden.
- Dieses System bietet erhebliche Vorteile gegenüber herkömmlichen Umleitungsmethoden, einschließlich verbesserter Leistung, einfacherer Verwaltung und erhöhter Flexibilität.
Die von uns entwickelte Lösung bietet mehrere Vorteile:
- Skalierbarkeit: Bewältigt Millionen von Weiterleitungen ohne Leistungseinbußen.
- Flexibilität: Einfaches Hinzufügen, Ändern oder Entfernen von Weiterleitungen ohne Änderung der Kernlogik.
- Kennzahlen: Nutzt das globale Netzwerk von Cloudflare für schnelle Weiterleitungen weltweit.
- Maßgeschneidert: Ermöglicht erweiterte Funktionen wie Analysen und A/B-Tests.
- Kosteneffizienz: Nutzt eine serverlose Architektur und reduziert dadurch möglicherweise die Hosting-Kosten.
- Kostenlose Alternative zu beliebten Diensten wie Bit.ly oder Yourls zum Erstellen von Marken-Kurzlinks auf einer benutzerdefinierten Domäne.
Nachdem Sie nun die Leistungsfähigkeit und Flexibilität dieses auf Cloudflare Worker basierenden Umleitungssystems kennen, ist es an der Zeit, es in die Tat umzusetzen:
- Wenn Sie es noch nicht getan haben, registrieren Sie sich für ein Cloudflare-Konto und machen Sie sich mit der Workers-Plattform vertraut.
- Implementieren Sie dieses System für Ihre eigenen gebrandeten Kurzlinks oder Massenweiterleitungen.
- Experimentieren Sie mit den besprochenen erweiterten Funktionen, um das System an Ihre spezifischen Anforderungen anzupassen.
- Teilen Sie Ihre Erfahrungen oder stellen Sie Fragen im Kommentarbereich unten. Ihre Erkenntnisse könnten anderen in der Community helfen!
- Für fortgeschrittenere Anwendungsfälle oder benutzerdefinierte Implementierungen sollten Sie sich an einen Cloudflare Workers-Experten oder einen Beratungsdienst wenden.
Bleiben Sie neugierig, lernen Sie weiter und zögern Sie nicht, die Grenzen des Möglichen mit Tools wie Cloudflare Workers zu erweitern.
