Безплатен персонализиран инструмент за съкращаване на URL адреси на домейни (с Cloudflare Workers)

В тази публикация ще споделя с вас как можете да създадете свой собствен персонализиран инструмент за съкращаване на URL адреси на домейн с помощта на Cloudflare Workers. Независимо дали сте уеб програмист, който иска да добави още един инструмент към колана си, собственик на бизнес, който иска да брандира връзките си без високата цена, или просто някой, който обича да се занимава с уеб технологии, това ръководство стъпка по стъпка е за вие.

Като уеб разработчик и технологичен ентусиаст, винаги съм бил очарован от малките неща, които правят интернет по-ефективен и удобен за потребителя. Един ден, докато споделях особено дълъг и тромав URL адрес с колега, открих, че искам прост, персонализиран начин за съкращаване на връзки. Разбира се, има много услуги за съкращаване на URL адреси, но исках нещо, което да се чувства повече „аз“ – нещо, което мога да персонализирам и контролирам.

Тогава се натъкнах на идеята да създам свой собствен персонализиран URL съкратител с помощта на Cloudflare Workers. Беше като да намериш скрито съкровище в необятното море от уеб технологии. Не само бих могъл да съкратя URL адресите, но мога да го направя със собственото си име на домейн, безплатно! Вълнението от това откритие ми напомни за първия път, когато разположих уебсайт – този прилив на овластяване и безкрайни възможности.

Това, което направи това откритие още по-вълнуващо, беше осъзнаването, че то може да служи като фантастична, безплатна алтернатива на популярни услуги като Bit.ly или TinyURL за създаване на брандирани кратки връзки в потребителски домейн. Много фирми и физически лица плащат добри пари за този вид функционалност, но ето начин да постигнете същия резултат, без да харчите и стотинка.

Стъпка 1: Регистрирайте име на домейн (използвайте кратък домейн)

Първата стъпка в създаването на вашата персонализирана програма за съкращаване на URL адреси е да регистрирате име на домейн. Това ще бъде основата на вашите брандирани кратки връзки, така че избирайте разумно!

Ето няколко съвета, които ще ви помогнат да изберете перфектния домейн:

Дръжте го кратко: Целият смисъл на съкращаващия URL адрес е да създава кратки връзки. Потърсете имена на домейни с 3-5 знака, ако е възможно. Това може да е съкращение, акроним или закачлива дума.
Направете го запомнящо се: Изберете нещо лесно за запомняне и въведете. Това ще улесни вас и другите да използват вашите съкратени връзки.
Помислете за вашата марка: Ако използвате това за бизнес или лична марка, опитайте се да приведете домейна в съответствие със съществуващата идентичност на марката.
Провери наличността: Кратките, закачливи домейни са много търсени. Може да се наложи да проявите творчество или да обмислите алтернативни домейни от първо ниво (TLD) като .io, .co или .me, ако първият ви избор не е наличен.
Помислете за TLD: Докато .com е популярен, не се отклонявайте от други TLD. Някои, като .link или .click, могат да бъдат особено подходящи за съкращаване на URL адреси.

Ето няколко примера, които да ви вдъхновят:

abc.link
go.io
shrt.co
зап.ме

След като изберете вашия домейн, ще трябва да го закупите от регистратор на домейни. Някои популярни опции включват:

Namecheap
GoDaddy
Cloudflare (Препоръчва се – което също е много удобно, тъй като ще използваме Cloudflare Workers)

Не забравяйте, че въпреки че домейнът ще струва пари, това е еднократна покупка на година, а останалата част от нашата настройка за съкращаване на URL адреси ще бъде безплатна с помощта на Cloudflare Workers.

Професионален съвет: Преди да финализирате покупката си, уверете се, че домейнът не е свързан със спам или злонамерена дейност. Можете да проверите неговата история с помощта на инструменти като Domain Tools или Wayback Machine.

С вашия лъскав нов домейн в ръка, вие сте готови да преминете към следващата стъпка: настройка на Cloudflare за вашия домейн. Но ще разгледаме това в следващия раздел.

Стъпка 2: Конфигурирайте DNS записи за вашия домейн

След като вече имате своя домейн, е време да настроите DNS конфигурацията. Тази стъпка е от решаващо значение за гарантиране, че вашите Cloudflare Workers функционират правилно с вашия новорегистриран домейн.

Нека преминем през процеса:

1. Добавете своя домейн към Cloudflare

Ако още не сте го направили, създайте безплатен акаунт в Cloudflare.
В таблото за управление на Cloudflare щракнете върху „Добавяне на сайт“ и въведете името на вашия домейн.
Cloudflare ще сканира за съществуващи DNS записи. Изтрийте всички записи, които открие (освен ако не използвате домейна и за имейл или други важни услуги, в който случай ги запазете).

2. Актуализирайте сървърите на имена (игнорирайте тази стъпка, ако вашият домейн е регистриран в Cloudflare)

Cloudflare ще ви предостави набор от сървъри за имена.
Отидете на уебсайта на вашия регистратор на домейни и заменете съществуващите сървъри за имена с тези, предоставени от Cloudflare.
Тази стъпка може да отнеме до 24 часа, за да се разпространи в световен мащаб.

3. Конфигурирайте DNS записи

Във вашите DNS настройки на Cloudflare ще добавим два нови A записа.
Добавете следното:

Тип: A
Име: @
Съдържание: 192.0.2.1
TTL: Автоматичен
Състояние на проксито: Проксиран (оранжев облак - много важно)

Тип: A
Име: WWW
Съдържание: 192.0.2.1
TTL: Автоматичен
Състояние на проксито: Проксиран (оранжев облак - много важно)

Този IP адрес 192.0.2.1 е специален „фиктивен“ адрес. Той е запазен за документиране и тестване, което го прави идеален за нашите нужди.

4. Активирайте Cloudflare Proxy

Уверете се, че състоянието на прокси сървъра (оранжева икона на облак) е активирано за вашия DNS запис.
Това позволява на Cloudflare да прокси вашия трафик и е необходимо за работата на Cloudflare Workers.

5. Проверете конфигурацията

След като промяната на сървъра за имена се разпространи, Cloudflare ще покаже вашия домейн като „Активен“.
Можете да проверите това в таблото за управление на Cloudflare.

Ключовият момент тук е, че ние не насочваме вашия домейн към действителен уеб хостинг. Адресът 192.0.2.1 е просто контейнер. Вашият Cloudflare Worker, който ще настроим след това, ще прихваща всички заявки към вашия домейн и ще обработва логиката за съкращаване на URL адреси.

Професионален съвет: Тази настройка означава, че не е необходимо да плащате или управлявате уеб хостинг. Cloudflare Workers ще се справят с цялото тежко повдигане, правейки това решение не само безплатно, но и невероятно леко и лесно за поддръжка.

С вашия DNS правилно конфигуриран, вече сте готови да преминете към вълнуващата част – настройка на вашия Cloudflare Worker да се справя със съкращаването на URL адреси.

Стъпка 3: Създаване на Cloudflare Worker

Сега, след като нашият домейн е конфигуриран в Cloudflare, е време да създадем Worker, който ще обработва нашите пренасочвания. Cloudflare Workers предоставя среда за изпълнение без сървър, която ни позволява да изпълняваме нашия код на ръба, близо до нашите потребители за оптимална производителност.

1. Създайте Cloudflare Worker

Достъп до секцията за работници:
- Влезте в таблото за управление на Cloudflare.
- Придвижете се до секцията „Работници“ от страничната лента.
- Щракнете върху „Създаване на услуга“, ако това е вашият първи работник, или „Създаване на работник“, ако вече имате съществуващи работници.
Име на вашия работник:
- Изберете описателно име за вашия работник, като например „обработчик на групови пренасочвания“.
- Щракнете върху „Създаване на услуга“, за да продължите към редактора.
Писане на работния скрипт:
- В редактора заменете кода по подразбиране със скрипта за обработка на пренасочване:

експортиране по подразбиране {
  async fetch(request) {
    const redirectMap = нова карта([
      ["google“, „https://www.google.com?subId1=google"],
      ["bing", "https://www.bing.com?subId1=bing"],
      // Добавете още пренасочвания тук, ако е необходимо
    ]);

    const url = нов URL(request.url);
    console.log("Пълен URL адрес:", url.toString());
    console.log("Име на хост:", url.име на хост);
    console.log("Име на път:", url.име на път);

    нека path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
    
    if (url.hostname.includes('workers.dev')) {
      път = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
    }
    
    console.log("Обработен път:", път);
    
    const местоположение = redirectMap.get(path);
    console.log("Пренасочване на местоположение:", местоположение);

// Промяна на 301 за постоянно пренасочване
    ако (местоположение) {
      връщане Response.redirect(location, 302);
    }
    
    // Ако заявката не е в картата, върнете 404 или предпочитания резервен вариант
    върне нов отговор (`Не е намерен: ${path}`, {статус: 404});
  },
};

Разбиране на скрипта:
- Ние определяме a redirectMap който съдържа нашите кратки пътища и съответните им пълни URL адреси.

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

yourshorturl.com/google пренасочва към -> https://www.google.com?subId1=google

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

yourshorturl.com/bing пренасочва към -> https://www.bing.com?subId1=bing

Скриптът обработва входящи заявки, извлича пътя и проверява дали съвпада с някое от нашите дефинирани пренасочвания.
Ако бъде намерено съвпадение, то връща 302 (временно пренасочване) към съответния URL адрес.
Ако не бъде намерено съвпадение, той връща отговор 404 Not Found.
Тестване на работника:
- Използвайте функцията „Бързо редактиране“ в таблото за управление на Cloudflare, за да направите промени и да тествате вашия Worker.
- Можете да използвате предоставения инструмент за HTTP тестване, за да симулирате заявки и да видите как вашият Worker отговаря.
Разгръщане на работника:
- След като сте доволни от вашите тестове, щракнете върху „Запазване и внедряване“, за да активирате вашия Worker.
Настройване на работни маршрути:

След внедряването отидете на раздела „Задействания“ за вашия Работник.
Добавете маршрут, който съответства на вашия домейн, като напр *recommends.link/*.
Това гарантира, че всички заявки към вашия домейн се обработват от този работник.
Проверка на настройката:
- Опитайте да получите достъп до няколко от пътищата си за пренасочване (напр. https://recommends.link/url-shortener-guide), за да сте сигурни, че работят според очакванията.
- Проверете работните регистрационни файлове във вашето табло за управление на Cloudflare, за да видите изхода на конзолата и да се уверите, че пътищата се обработват правилно.

Стъпка 4: Още персонализации (по избор)

Динамични пренасочвания с Cloudflare KV

За да направим нашата система за пренасочване по-гъвкава и по-лесна за управление, можем да използваме Cloudflare KV (Key-Value) съхранение, за да съхраняваме нашите пренасочвания:

Създайте пространство от имена на KV:

Във вашето табло за управление на Cloudflare отидете на Работници > KV. Щракнете върху „Създаване на пространство от имена“ и го наименувайте (напр. „REDIRECT_MAP“).

Свържете KV пространството от имена към вашия Worker:

Отидете до настройките на вашия работник. Под „KV Namespace Bindings“ добавете ново свързване. Изберете вашето пространство от имена на KV и му дайте име на променлива (напр. REDIRECTS).

Променете работния скрипт, за да използвате KV:

   експортиране по подразбиране {
     async fetch(request, env) {
       const url = нов URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const местоположение = изчакайте env.REDIRECTS.get(път);
       
       ако (местоположение) {
         връщане Response.redirect(location, 301);
       }
       
       върне нов отговор (`Не е намерен: ${path}`, {статус: 404});
     },
   };

Вече можете да добавяте, актуализирате или премахвате пренасочвания, като модифицирате KV магазина, без да променяте работния код.

Параметризирани пренасочвания

Позволете динамични параметри във вашите пренасочвания:

   експортиране по подразбиране {
     async fetch(request, env) {
       const url = нов URL(request.url);
       const [path, ...params] = url.pathname.toLowerCase().replace(/^\//, '').split('/');
       
       нека местоположение = изчакване env.REDIRECTS.get(path);
       
       ако (местоположение) {
         // Замяна на контейнери с действителни параметри
         params.forEach((param, index) => {
           местоположение = местоположение.replace(`{${index}}`, param);
         });
         връщане Response.redirect(location, 301);
       }
       
       върне нов отговор (`Не е намерен: ${path}`, {статус: 404});
     },
   };

С тази настройка можете да имате KV запис като „продукт“: „https://mystore.com/item/{0}/details“ и да го използвате като yourshortlink.com/product/12345.

Кликнете върху Проследяване и анализ

Приложете основен анализ чрез регистриране на събития за пренасочване:

   експортиране по подразбиране {
     async fetch(request, env) {
       const url = нов URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const местоположение = изчакайте env.REDIRECTS.get(път);
       
       ако (местоположение) {
         // Регистрирайте събитието за пренасочване
         await env.REDIRECTS.put(`${path}_clicks`, (parseInt(await env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
         връщане Response.redirect(location, 301);
       }
       
       върне нов отговор (`Не е намерен: ${path}`, {статус: 404});
     },
   };

Персонализирани страници за грешки

Вместо обикновен текстов отговор 404, върнете персонализирана HTML страница:

   const notFoundPage = `
   
   
   
     
     
     Връзката не е намерена
     
       тяло { font-family: Arial, sans-serif; подравняване на текст: център; padding-top: 50px; }
     
   
   
     Опа! Връзката не е намерена
     Кратката връзка, която търсите, не съществува.
   
   
   `;

   // Във вашата функция за извличане:
   върне нов отговор(notFoundPage, { 
     статус: 404,
     заглавки: { 'Content-Type': 'text/html' }
   });

ограничаване на скоростта

Приложете основно ограничаване на скоростта, за да предотвратите злоупотреба:

   експортиране по подразбиране {
     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 заявки на минута
         return new Response('Превишено ограничение на скоростта', {статус: 429});
       }
       
       await env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});
       
       // Останалата част от вашата логика за пренасочване тук
     },
   };

A / B Тестване

Приложете просто A/B тестване за вашите пренасочвания:

   експортиране по подразбиране {
     async fetch(request, env) {
       const url = нов URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const locationA = изчакайте env.REDIRECTS.get(`${path}_A`);
       const locationB = изчакайте env.REDIRECTS.get(`${path}_B`);
       
       if (locationA && locationB) {
         const местоположение = Math.random() < 0.5? местоположениеA : местоположениеB;
         връщане Response.redirect(location, 301);
       }
       
       // Връщане към нормално пренасочване, ако A/B тестът не е настроен
       const местоположение = изчакайте env.REDIRECTS.get(път);
       ако (местоположение) {
         връщане Response.redirect(location, 301);
       }
       
       върне нов отговор (`Не е намерен: ${path}`, {статус: 404});
     },
   };

Тези персонализации и разширения добавят значителна функционалност към вашата система за масово пренасочване, правейки я по-гъвкава, мощна и информативна. Всяка от тези функции може да бъде допълнително усъвършенствана и разширена въз основа на вашите специфични нужди и случаи на употреба.

Резюме: Създаване на персонализиран инструмент за съкращаване на връзки с Cloudflare Workers

В тази публикация в блога проучихме как да създадем мощен и гъвкав персонализиран инструмент за съкращаване на URL адреси с помощта на Cloudflare Workers. Това решение предлага безплатен и ефективен подход за създаване на кратки връзки в мащаб.

TL; DR:

Cloudflare Workers предоставят платформа без сървър за внедряване на персонализирана логика за пренасочване с глобално разпространение и ниска латентност.
Правилната DNS конфигурация и настройката на Worker Routes са от решаващо значение за свързването на вашия персонализиран домейн към Worker.
Прост базиран на JavaScript Worker може да обработва ефективно сложни сценарии за пренасочване.
Съхранение Key-Value (KV) на Cloudflare може да се използва за създаване на динамични, лесно управляеми карти за пренасочване.
Разширени функции като параметризирани пренасочвания, проследяване на кликвания, персонализирани страници за грешка, ограничаване на скоростта и A/B тестване могат да бъдат внедрени в екосистемата Worker.
Тази система предлага значителни предимства пред традиционната методи за пренасочване, включително подобрена производителност, по-лесно управление и подобрена гъвкавост.

Създаденото от нас решение предлага няколко предимства:

скалируемост: Обработва милиони пренасочвания без влошаване на производителността.
Гъвкавост: Лесно добавяне, модифициране или премахване на пренасочвания, без да променяте основната логика.
Производителност: Използва глобалната мрежа на Cloudflare за бързи пренасочвания по целия свят.
Персонализиране: Позволява разширени функции като анализ и A/B тестване.
Ефективност на разходите: Използва архитектура без сървър, което потенциално намалява разходите за хостинг.
Безплатна алтернатива към популярни услуги като Bit.ly или Yourls за създаване на брандирани кратки връзки в потребителски домейн.

Сега, след като разбирате силата и гъвкавостта на тази базирана на Cloudflare Worker система за пренасочване, е време да я приложите в действие:

Ако все още не сте го направили, регистрирайте акаунт в Cloudflare и се запознайте с платформата Workers.
Внедрете тази система за вашите собствени брандирани кратки връзки или групови пренасочвания.
Експериментирайте с разширените функции, които обсъдихме, за да приспособите системата към вашите специфични нужди.
Споделете своя опит или задайте въпроси в секцията за коментари по-долу. Вашите прозрения могат да помогнат на другите в общността!
За по-усъвършенствани случаи на използване или персонализирани реализации, обмислете да се свържете с експерт или консултантска услуга на Cloudflare Workers.

Останете любопитни, продължавайте да учите и не се колебайте да надхвърлите границите на възможното с инструменти като Cloudflare Workers.

Стъпка 1: Регистрирайте име на домейн (използвайте кратък домейн)

Стъпка 2: Конфигурирайте DNS записи за вашия домейн

Стъпка 3: Създаване на Cloudflare Worker

Стъпка 4: Още персонализации (по избор)

Динамични пренасочвания с Cloudflare KV

Параметризирани пренасочвания

Кликнете върху Проследяване и анализ

Персонализирани страници за грешки

ограничаване на скоростта

A / B Тестване

Резюме: Създаване на персонализиран инструмент за съкращаване на връзки с Cloudflare Workers

За автора

Мат Алгрен

Pages

Любими посетители

Инструменти и ресурси

Създайте безплатен персонализиран инструмент за съкращаване на URL адреси на домейни (с Cloudflare Workers)

Стъпка 1: Регистрирайте име на домейн (използвайте кратък домейн)

Стъпка 2: Конфигурирайте DNS записи за вашия домейн

Стъпка 3: Създаване на Cloudflare Worker

Стъпка 4: Още персонализации (по избор)

Динамични пренасочвания с Cloudflare KV

Параметризирани пренасочвания

Кликнете върху Проследяване и анализ

Персонализирани страници за грешки

ограничаване на скоростта

A / B Тестване

Резюме: Създаване на персонализиран инструмент за съкращаване на връзки с Cloudflare Workers

Подобни публикации

За автора

Мат Алгрен

Pages

Любими посетители

Инструменти и ресурси