Raccourcisseur d'URL de domaine personnalisé gratuit (avec Cloudflare Workers)

Dans cet article, je vais partager avec vous comment créer votre propre raccourcisseur d'URL de domaine personnalisé à l'aide de Cloudflare Workers. Que vous soyez un développeur Web cherchant à ajouter un autre outil à votre ceinture, un propriétaire d'entreprise souhaitant personnaliser vos liens sans le prix élevé, ou simplement quelqu'un qui aime bricoler les technologies Web, ce guide étape par étape s'adresse à toi.

En tant que développeur Web et passionné de technologie, j'ai toujours été fasciné par les petites choses qui rendent Internet plus efficace et plus convivial. Un jour, alors que je partageais une URL particulièrement longue et lourde avec un collègue, je me suis retrouvé à souhaiter une manière simple et personnalisée de raccourcir les liens. Bien sûr, il existe de nombreux services de raccourcissement d’URL, mais je voulais quelque chose qui me ressemble davantage – quelque chose que je puisse personnaliser et contrôler.

C'est à ce moment-là que j'ai eu l'idée de créer mon propre raccourcisseur d'URL personnalisé à l'aide de Cloudflare Workers.. C’était comme trouver un trésor caché dans la vaste mer des technologies Web. Non seulement je pouvais raccourcir les URL, mais je pouvais le faire avec mon propre nom de domaine, gratuitement ! L’enthousiasme suscité par cette découverte m’a rappelé la première fois que j’ai déployé un site Web – cet élan d’autonomisation et de possibilités infinies.

Ce qui a rendu cette découverte encore plus excitante, c'est de réaliser qu'elle pouvait constituer une alternative fantastique et gratuite aux services populaires comme Bit.ly ou TinyURL pour créer des liens courts de marque sur un domaine personnalisé. De nombreuses entreprises et particuliers paient beaucoup d’argent pour ce type de fonctionnalités, mais voici un moyen d’obtenir le même résultat sans dépenser un centime.

Étape 1 : Enregistrez un nom de domaine (utilisez un domaine court)

La première étape de la création de votre raccourcisseur d'URL personnalisé consiste à enregistrer un nom de domaine. Ce sera la base de vos liens courts de marque, alors choisissez judicieusement !

Voici quelques conseils pour vous aider à sélectionner le domaine parfait :

Soyez bref: L’intérêt d’un raccourcisseur d’URL est de créer des liens concis. Recherchez des noms de domaine de 3 à 5 caractères si possible. Il peut s'agir d'une abréviation, d'un acronyme ou d'un mot accrocheur.
Rendez-le mémorable: Choisissez quelque chose de facile à retenir et à saisir. Cela permettra à vous et aux autres d’utiliser plus facilement vos liens raccourcis.
Considérez votre marque: Si vous l'utilisez pour une entreprise ou une marque personnelle, essayez d'aligner le domaine sur votre identité de marque existante.
Voir disponibilités: Les domaines courts et accrocheurs sont très demandés. Vous devrez peut-être faire preuve de créativité ou envisager d'autres domaines de premier niveau (TLD) tels que .io, .co ou .me si votre premier choix n'est pas disponible.
Pensez au TLD: Même si .com est populaire, n'hésitez pas à vous tourner vers les autres TLD. Certains, comme .link ou .click, pourraient être particulièrement adaptés à un raccourcisseur d'URL.

Voici quelques exemples pour vous inspirer :

abc.lien
aller.io
shrt.co
zap.moi

Une fois que vous avez choisi votre domaine, vous devrez l'acheter auprès d'un registraire de domaine. Certaines options populaires incluent :

Namecheap
GoDaddy
Cloudflare (Recommandé – ce qui est également très pratique puisque nous utiliserons Cloudflare Workers)

N'oubliez pas que même si le domaine coûte de l'argent, il s'agit d'un achat unique par an et le reste de la configuration de notre raccourcisseur d'URL sera gratuit à l'aide de Cloudflare Workers.

Conseil de pro : avant de finaliser votre achat, assurez-vous que le domaine n'est associé à aucun spam ou activité malveillante. Vous pouvez vérifier son historique à l'aide d'outils tels que Domain Tools ou Wayback Machine.

Avec votre tout nouveau domaine en main, vous êtes prêt à passer à l'étape suivante : configurer Cloudflare pour votre domaine. Mais nous aborderons cela dans la section suivante.

Étape 2 : Configurez les enregistrements DNS pour votre domaine

Maintenant que vous disposez de votre domaine, il est temps de configurer la configuration DNS. Cette étape est cruciale pour garantir que vos Cloudflare Workers fonctionnent correctement avec votre domaine nouvellement enregistré.

Passons en revue le processus :

1. Ajoutez votre domaine à Cloudflare

Si vous ne l'avez pas déjà fait, créer un compte Cloudflare gratuit.
Dans votre tableau de bord Cloudflare, cliquez sur « Ajouter un site » et saisissez votre nom de domaine.
Cloudflare recherchera les enregistrements DNS existants. Supprimez tous les enregistrements trouvés (sauf si vous utilisez également le domaine pour la messagerie électronique ou d'autres services importants, auquel cas conservez-les).

2. Mettre à jour les serveurs de noms (ignorez cette étape si votre domaine est enregistré auprès de Cloudflare)

Cloudflare vous fournira un ensemble de serveurs de noms.
Accédez au site Web de votre registraire de domaine et remplacez les serveurs de noms existants par ceux fournis par Cloudflare.
Cette étape peut prendre jusqu'à 24 heures pour se propager à l'échelle mondiale.

3. Configurer les enregistrements DNS

Dans vos paramètres DNS Cloudflare, nous ajouterons deux nouveaux enregistrements A.
Ajouter ce qui suit:

Type : A
Nom : @
Contenu: 192.0.2.1
TTL : Voiture
Statut du mandataire : Mandataire (nuage orange - très important)

Type : A
Nom : www
Contenu: 192.0.2.1
TTL : Voiture
Statut du mandataire : Mandataire (nuage orange - très important)

Cette IP 192.0.2.1 est une adresse « factice » spéciale. Il est réservé à la documentation et aux tests, ce qui le rend parfait pour nos besoins.

4. Activer le proxy Cloudflare

Assurez-vous que le statut du proxy (icône de nuage orange) est activé pour votre enregistrement DNS.
Cela permet à Cloudflare de proxy votre trafic et est nécessaire au fonctionnement de Cloudflare Workers.

5. Vérifier la configuration

Une fois le changement de serveur de noms propagé, Cloudflare affichera votre domaine comme « Actif ».
Vous pouvez le vérifier dans le tableau de bord Cloudflare.

Le point clé ici est que nous ne dirigeons pas votre domaine vers un véritable hébergement Web. L'adresse 192.0.2.1 n'est qu'un espace réservé. Votre Cloudflare Worker, que nous configurerons ensuite, interceptera toutes les requêtes adressées à votre domaine et gérera la logique de raccourcissement d'URL.

Conseil de pro : cette configuration signifie que vous n'avez pas besoin de payer ou de gérer un hébergement Web. Cloudflare Workers se chargera de tout le gros du travail, ce qui rendra cette solution non seulement gratuite, mais aussi incroyablement légère et facile à entretenir.

Une fois votre DNS correctement configuré, vous êtes maintenant prêt à passer à la partie la plus intéressante : configurer votre Cloudflare Worker pour gérer le raccourcissement d'URL.

Étape 3 : Création d'un travailleur Cloudflare

Maintenant que notre domaine est configuré dans Cloudflare, il est temps de créer le Worker qui gérera nos redirections. Cloudflare Workers fournit un environnement d'exécution sans serveur qui nous permet d'exécuter notre code en périphérie, à proximité de nos utilisateurs pour des performances optimales.

1. Créez un travailleur Cloudflare

Accéder à la section Travailleurs :
- Connectez-vous à votre tableau de bord Cloudflare.
- Accédez à la section « Travailleurs » dans la barre latérale.
- Cliquez sur « Créer un service » s'il s'agit de votre premier Worker, ou sur « Créer un Worker » si vous avez déjà des Workers existants.
Nommez votre travailleur :
- Choisissez un nom descriptif pour votre Worker, tel que « bulk-redirects-handler ».
- Cliquez sur « Créer un service » pour accéder à l'éditeur.
Rédaction du script de travail :
- Dans l'éditeur, remplacez le code par défaut par le script du gestionnaire de redirection :

export par défaut {
  récupération asynchrone (requête) {
    const redirectMap = nouvelle carte ([
      ["google", " https://www.google.com?subId1=google"],
      ["bing", "https://www.bing.com?subId1=bing"],
      // Ajoutez plus de redirections ici si nécessaire
    ]);

    const url = nouvelle URL (request.url);
    console.log("URL complète :", url.toString());
    console.log("Nom d'hôte :", url.nom d'hôte);
    console.log("Chemin :", url.chemin);

    let path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
    
    if (url.hostname.includes('workers.dev')) {
      chemin = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
    }
    
    console.log("Chemin traité :", chemin);
    
    const location = redirectMap.get(chemin);
    console.log("Emplacement de redirection :", emplacement);

// Passage à 301 pour la redirection permanente
    si (emplacement) {
      return Response.redirect (emplacement, 302);
    }
    
    // Si la demande ne figure pas dans la carte, renvoie un 404 ou votre solution de secours préférée
    return new Response(`Not Found: ${path}`, { status: 404 });
  },
};

Comprendre le script :
- Nous définissons un redirectionCarte qui contient nos chemins courts et leurs URL complètes correspondantes.

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

votreshorturl.com/google redirige vers -> https://www.google.com?subId1=google

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

yourshorturl.com/bing redirige vers -> https://www.bing.com?subId1=bing

Le script traite les demandes entrantes, extrait le chemin et vérifie s'il correspond à l'une de nos redirections définies.
Si une correspondance est trouvée, il renvoie un 302 (Redirection Temporaire) vers l'URL correspondante.
Si aucune correspondance n'est trouvée, il renvoie une réponse 404 Not Found.
Test du travailleur :
- Utilisez la fonctionnalité « Quick Edit » dans le tableau de bord Cloudflare pour apporter des modifications et tester votre Worker.
- Vous pouvez utiliser l'outil de test HTTP fourni pour simuler des requêtes et voir comment votre Worker répond.
Déploiement du Worker :
- Une fois que vous êtes satisfait de vos tests, cliquez sur « Enregistrer et déployer » pour faire vivre votre Worker.
Configuration des itinéraires des travailleurs :

Après le déploiement, accédez à l'onglet « Déclencheurs » de votre Worker.
Ajoutez un itinéraire qui correspond à votre domaine, tel que *recommends.link/*.
Cela garantit que toutes les demandes adressées à votre domaine sont traitées par ce Worker.
Vérification de la configuration :
- Essayez d'accéder à quelques-uns de vos chemins de redirection (par exemple, https://recommends.link/url-shortener-guide) pour garantir qu'ils fonctionnent comme prévu.
- Vérifiez les journaux des travailleurs dans votre tableau de bord Cloudflare pour voir la sortie de la console et vérifiez que les chemins sont traités correctement.

Étape 4 : Plus de personnalisations (facultatif)

Redirections dynamiques avec Cloudflare KV

Pour rendre notre système de redirection plus flexible et plus facile à gérer, nous pouvons utiliser le stockage Cloudflare KV (Key-Value) pour stocker nos redirections :

Créez un espace de noms KV :

Dans votre tableau de bord Cloudflare, accédez à Workers > KV. Cliquez sur « Créer un espace de noms » et nommez-le (par exemple « REDIRECT_MAP »).

Liez l'espace de noms KV à votre Worker :

Accédez aux paramètres de votre Worker. Sous « Liaisons d’espace de noms KV », ajoutez une nouvelle liaison. Choisissez votre espace de noms KV et donnez-lui un nom de variable (par exemple, REDIRECTS).

Modifiez le script Worker pour utiliser KV :

   export par défaut {
     async fetch(requête, env) {
       const url = nouvelle URL (request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const location = wait env.REDIRECTS.get(path);
       
       si (emplacement) {
         return Response.redirect (emplacement, 301);
       }
       
       return new Response(`Not Found: ${path}`, { status: 404 });
     },
   };

Vous pouvez désormais ajouter, mettre à jour ou supprimer des redirections en modifiant le magasin KV sans changer le code Worker.

Redirections paramétrées

Autorisez les paramètres dynamiques dans vos redirections :

   export par défaut {
     async fetch(requête, env) {
       const url = nouvelle URL (request.url);
       const [chemin, ...params] = url.pathname.toLowerCase().replace(/^\//, '').split('/');
       
       let location = wait env.REDIRECTS.get(path);
       
       si (emplacement) {
         // Remplace les espaces réservés par les paramètres réels
         params.forEach((param, index) => {
           location = location.replace(`{${index}}`, param);
         });
         return Response.redirect (emplacement, 301);
       }
       
       return new Response(`Not Found: ${path}`, { status: 404 });
     },
   };

Avec cette configuration, vous pourriez avoir une entrée KV comme « produit » : « https://mystore.com/item/{0}/details » et l'utiliser comme yourshortlink.com/product/12345.

Suivi des clics et analyses

Implémentez des analyses de base en enregistrant les événements de redirection :

   export par défaut {
     async fetch(requête, env) {
       const url = nouvelle URL (request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const location = wait env.REDIRECTS.get(path);
       
       si (emplacement) {
         // Enregistre l'événement de redirection
         wait env.REDIRECTS.put(`${path}_clicks`, (parseInt(await env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
         return Response.redirect (emplacement, 301);
       }
       
       return new Response(`Not Found: ${path}`, { status: 404 });
     },
   };

Pages d'erreur personnalisées

Au lieu d'une réponse 404 en texte brut, renvoyez une page HTML personnalisée :

   const notFoundPage = `
   
   
   
     
     
     Lien introuvable
     <style>

       corps { famille de polices : Arial, sans-serif ; alignement du texte : centre ; rembourrage supérieur : 50 px ; }
     </style>

   
   
     Oups ! Lien introuvable
     Le lien court que vous recherchez n'existe pas.
   
   
   `;

   // Dans votre fonction fetch :
   renvoyer une nouvelle réponse (notFoundPage, { 
     statut : 404,
     en-têtes : { 'Content-Type' : 'text/html' }
   });

Limitation du débit

Mettez en œuvre une limitation du débit de base pour éviter les abus :

   export par défaut {
     async fetch(requête, 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) { // Limite de 100 requêtes par minute
         return new Response('Limite de débit dépassée', { status: 429 });
       }
       
       wait env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});
       
       // Reste de votre logique de redirection ici
     },
   };

Test A / B

Implémentez des tests A/B simples pour vos redirections :

   export par défaut {
     async fetch(requête, env) {
       const url = nouvelle URL (request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const locationA = wait env.REDIRECTS.get(`${path}_A`);
       const locationB = wait env.REDIRECTS.get(`${path}_B`);
       
       si (emplacementA && emplacementB) {
         emplacement const = Math.random() < 0.5 ? emplacementA : emplacementB;
         return Response.redirect (emplacement, 301);
       }
       
       // Retour à la redirection normale si le test A/B n'est pas configuré
       const location = wait env.REDIRECTS.get(path);
       si (emplacement) {
         return Response.redirect (emplacement, 301);
       }
       
       return new Response(`Not Found: ${path}`, { status: 404 });
     },
   };

Ces personnalisations et extensions ajoutent des fonctionnalités importantes à votre système de redirection groupée, le rendant plus flexible, puissant et informatif. Chacune de ces fonctionnalités peut être affinée et étendue en fonction de vos besoins spécifiques et de vos cas d'utilisation.

Résumé : Création d'un raccourcisseur de lien personnalisé avec Cloudflare Workers

Tout au long de cet article de blog, nous avons exploré comment créer un raccourcisseur d'URL personnalisé puissant et flexible à l'aide de Cloudflare Workers. Cette solution offre une approche gratuite et efficace pour créer des liens courts à grande échelle.

TL; DR:

Cloudflare Workers fournit une plate-forme sans serveur pour implémenter une logique de redirection personnalisée avec une distribution mondiale et une faible latence.
Une configuration DNS appropriée et la configuration des routes de travail sont cruciales pour connecter votre domaine personnalisé au travailleur.
Un simple Worker basé sur JavaScript peut gérer efficacement des scénarios de redirection complexes.
Le stockage Key-Value (KV) de Cloudflare peut être exploité pour créer des cartes de redirection dynamiques et faciles à gérer.
Des fonctionnalités avancées telles que les redirections paramétrées, le suivi des clics, les pages d'erreur personnalisées, la limitation du débit et les tests A/B peuvent être mises en œuvre au sein de l'écosystème Worker.
Ce système offre des avantages significatifs par rapport au système traditionnel méthodes de redirection, notamment des performances améliorées, une gestion plus simple et une flexibilité accrue.

La solution que nous avons construite offre plusieurs avantages :

Évolutivité: Gère des millions de redirections sans dégradation des performances.
Flexibilité: Ajoutez, modifiez ou supprimez facilement des redirections sans changer la logique de base.
Performance: exploite le réseau mondial de Cloudflare pour des redirections rapides dans le monde entier.
Personnalisation: permet des fonctionnalités avancées telles que l’analyse et les tests A/B.
Rapport coût-efficacité: Utilise une architecture sans serveur, réduisant potentiellement les coûts d'hébergement.
Alternative gratuite aux services populaires comme Bit.ly ou Yourls pour créer des liens courts de marque sur un domaine personnalisé.

Maintenant que vous comprenez la puissance et la flexibilité de ce système de redirection basé sur Cloudflare Worker, il est temps de le mettre en action :

Si vous ne l'avez pas déjà fait, créez un compte Cloudflare et familiarisez-vous avec la plateforme Workers.
Implémentez ce système pour vos propres liens courts de marque ou redirections groupées.
Expérimentez avec les fonctionnalités avancées dont nous avons parlé pour adapter le système à vos besoins spécifiques.
Partagez vos expériences ou posez des questions dans la section commentaires ci-dessous. Vos idées pourraient aider les autres membres de la communauté !
Pour des cas d'utilisation plus avancés ou des implémentations personnalisées, envisagez de contacter un expert ou un service de conseil Cloudflare Workers.

Restez curieux, continuez à apprendre et n'hésitez pas à repousser les limites du possible avec des outils comme Cloudflare Workers.

Étape 1 : Enregistrez un nom de domaine (utilisez un domaine court)

Étape 2 : Configurez les enregistrements DNS pour votre domaine

Étape 3 : Création d'un travailleur Cloudflare

Étape 4 : Plus de personnalisations (facultatif)

Redirections dynamiques avec Cloudflare KV

Redirections paramétrées

Suivi des clics et analyses

Pages d'erreur personnalisées

Limitation du débit

Test A / B

Résumé : Création d'un raccourcisseur de lien personnalisé avec Cloudflare Workers

A propos

Matt Ahlgren

Pages

Favoris des visiteurs

Outils et ressources

Créez un raccourcisseur d'URL de domaine personnalisé gratuit (avec Cloudflare Workers)

Étape 1 : Enregistrez un nom de domaine (utilisez un domaine court)

Étape 2 : Configurez les enregistrements DNS pour votre domaine

Étape 3 : Création d'un travailleur Cloudflare

Étape 4 : Plus de personnalisations (facultatif)

Redirections dynamiques avec Cloudflare KV

Redirections paramétrées

Suivi des clics et analyses

Pages d'erreur personnalisées

Limitation du débit

Test A / B

Résumé : Création d'un raccourcisseur de lien personnalisé avec Cloudflare Workers

Articles Similaires

A propos

Matt Ahlgren

Pages

Favoris des visiteurs

Outils et ressources