Бесплатный инструмент сокращения 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 популярен, не бойтесь других доменов верхнего уровня. Некоторые из них, например .link или .click, могут особенно подойти для сокращения URL-адресов.

Вот несколько примеров, которые могут вас вдохновить:

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

После того, как вы выбрали домен, вам необходимо приобрести его у регистратора доменов. Некоторые популярные варианты включают в себя:

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
Срок жизни: Авто
Статус прокси: Прокси (оранжевое облако – очень важно)

Тип:  A
Имя: WWW
Содержание: 192.0.2.1
Срок жизни: Авто
Статус прокси: Прокси (оранжевое облако – очень важно)

Этот IP-адрес 192.0.2.1 является специальным «фиктивным» адресом. Он зарезервирован для документации и тестирования, что делает его идеальным для наших нужд.

4. Включите прокси-сервер Cloudflare.

Убедитесь, что для вашей записи DNS включен статус прокси (значок оранжевого облака).
Это позволяет Cloudflare проксировать ваш трафик и необходимо для работы Cloudflare Workers.

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

Как только изменение сервера имен будет распространено, Cloudflare отобразит ваш домен как «Активный».
Вы можете проверить это на панели управления Cloudflare.

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

Совет для профессионалов: эта настройка означает, что вам не нужно платить за какой-либо веб-хостинг или управлять им. Cloudflare Workers возьмет на себя всю тяжелую работу, что делает это решение не только бесплатным, но и невероятно легким и простым в обслуживании.

После правильной настройки DNS вы готовы перейти к самой интересной части — настройке Cloudflare Worker для обработки сокращения URL-адресов.

Шаг 3. Создание работника Cloudflare

Теперь, когда наш домен настроен в Cloudflare, пришло время создать Worker, который будет обрабатывать наши перенаправления. Cloudflare Workers предоставляют бессерверную среду выполнения, которая позволяет нам запускать наш код на периферии, рядом с нашими пользователями, для достижения оптимальной производительности.

1. Создайте работника Cloudflare

Доступ к разделу «Рабочие»:
- Войдите в свою панель инструментов Cloudflare.
- Перейдите в раздел «Рабочие» на боковой панели.
- Нажмите «Создать сервис», если это ваш первый работник, или «Создать работника», если у вас уже есть существующие работники.
Назовите своего работника:
- Выберите описательное имя для вашего Worker, например «обработчик массовых перенаправлений».
- Нажмите «Создать сервис», чтобы перейти в редактор.
Написание рабочего сценария:
- В редакторе замените код по умолчанию на скрипт-обработчик редиректа:

экспорт по умолчанию {
  асинхронная выборка(запрос) {
    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.hostname);
    console.log("Путь:", url.pathname);

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

// Изменение на 301 для постоянного перенаправления
    если (местоположение) {
      вернуть Response.redirect(местоположение, 302);
    }
    
    // Если запроса нет на карте, верните 404 или предпочитаемый вами запасной вариант
    return new Response(`Не найден: ${path}`, {status: 404});
  },
};

Понимание сценария:
- Мы определяем перенаправлениеКарта который содержит наши короткие пути и соответствующие им полные 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.
Настройка рабочих маршрутов:

После развертывания перейдите на вкладку «Триггеры» для вашего Worker.
Добавьте маршрут, соответствующий вашему домену, например *рекомендует.ссылка/*.
Это гарантирует, что все запросы к вашему домену обрабатываются этим Worker.
Проверка настройки:
- Попробуйте получить доступ к нескольким путям перенаправления (например, https://recommends.link/url-shortener-guide), чтобы убедиться, что они работают должным образом.
- Проверьте журналы рабочих процессов на панели управления Cloudflare, чтобы увидеть выходные данные консоли и убедиться, что пути обрабатываются правильно.

Шаг 4. Дополнительные настройки (необязательно)

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

Чтобы сделать нашу систему перенаправления более гибкой и простой в управлении, мы можем использовать хранилище Cloudflare KV (Key-Value) для хранения наших перенаправлений:

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

На панели управления Cloudflare перейдите в Workers > KV. Нажмите «Создать пространство имен» и назовите его (например, «REDIRECT_MAP»).

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

Перейдите в настройки вашего работника. В разделе «Привязки пространства имен KV» добавьте новую привязку. Выберите пространство имен KV и присвойте ему имя переменной (например, REDIRECTS).

Измените сценарий Worker для использования KV:

   экспорт по умолчанию {
     асинхронная выборка(запрос, окружение) {
       const URL = новый URL (request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const location = await env.REDIRECTS.get(path);
       
       если (местоположение) {
         вернуть Response.redirect(местоположение, 301);
       }
       
       return new Response(`Не найден: ${path}`, {status: 404});
     },
   };

Теперь вы можете добавлять, обновлять или удалять перенаправления, изменяя хранилище KV, не меняя код Worker.

Параметризованные перенаправления

Разрешите использование динамических параметров в ваших перенаправлениях:

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

При такой настройке вы можете иметь запись KV, например «product»: «https://mystore.com/item/{0}/details», и использовать ее как yourshortlink.com/product/12345.

Нажмите «Отслеживание и аналитика».

Внедрите базовую аналитику, регистрируя события перенаправления:

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

Пользовательские страницы ошибок

Вместо обычного текстового ответа 404 верните пользовательскую HTML-страницу:

   const notFoundPage = `
   
   
   
     
     
     Ссылка не найдена
     
       тело {семейство шрифтов: Arial, без засечек; выравнивание текста: по центру; отступ-верх: 50 пикселей; }
     
   
   
     Упс! Ссылка не найдена
     Короткая ссылка, которую вы ищете, не существует.
   
   
   `;

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

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

Внедрите базовое ограничение скорости, чтобы предотвратить злоупотребления:

   экспорт по умолчанию {
     асинхронная выборка(запрос, окружение) {
       const ip = request.headers.get('CF-Connecting-IP');
       constrateLimitKey = `ratelimit:${ip}`;
       const currentRequests = parseInt(await env.REDIRECTS.get(rateLimitKey) || '0');
       
       if (currentRequests > 100) { // лимит 100 запросов в минуту
         return new Response('Превышен лимит скорости', {status: 429 });
       }
       
       ждут env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});
       
       // Остальная часть вашей логики перенаправления здесь
     },
   };

Тестирование А / Б

Внедрите простое A/B-тестирование для ваших перенаправлений:

   экспорт по умолчанию {
     асинхронная выборка(запрос, окружение) {
       const URL = новый 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 (locationA && locationB) {
         const location = Math.random() <0.5? местоположение А: местоположение Б;
         вернуть Response.redirect(местоположение, 301);
       }
       
       // Возврат к обычному перенаправлению, если A/B-тест не настроен
       const location = await env.REDIRECTS.get(path);
       если (местоположение) {
         вернуть Response.redirect(местоположение, 301);
       }
       
       return new Response(`Не найден: ${path}`, {status: 404});
     },
   };

Эти настройки и расширения добавляют значительную функциональность вашей системе массовой переадресации, делая ее более гибкой, мощной и информативной. Каждую из этих функций можно дополнительно усовершенствовать и расширить в зависимости от ваших конкретных потребностей и вариантов использования.

Краткое описание: Создание настраиваемого средства сокращения ссылок с помощью Cloudflare Workers

В этом посте мы рассмотрели, как создать мощный и гибкий инструмент сокращения URL-адресов с помощью Cloudflare Workers. Это решение предлагает бесплатный и эффективный подход к созданию коротких ссылок в большом масштабе.

TL; DR:

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

Решение, которое мы создали, предлагает несколько преимуществ:

Масштабируемость: обрабатывает миллионы перенаправлений без снижения производительности.
Трансформируемость: Легко добавляйте, изменяйте или удаляйте перенаправления без изменения базовой логики.
эффективности: использует глобальную сеть Cloudflare для быстрой переадресации по всему миру.
Адаптация люстры: обеспечивает расширенные функции, такие как аналитика и A/B-тестирование.
Экономическая эффективность: использует бессерверную архитектуру, что потенциально снижает затраты на хостинг.
Бесплатная альтернатива к популярным сервисам, таким как Bit.ly или Yourls для создания фирменных коротких ссылок на личном домене.

Теперь, когда вы понимаете мощь и гибкость этой системы перенаправления на основе Cloudflare Worker, пришло время применить ее:

Если вы еще этого не сделали, зарегистрируйте учетную запись Cloudflare и ознакомьтесь с платформой Workers.
Внедрите эту систему для собственных фирменных коротких ссылок или массовых перенаправлений.
Поэкспериментируйте с расширенными функциями, которые мы обсуждали, чтобы адаптировать систему к вашим конкретным потребностям.
Поделитесь своим опытом или задайте вопросы в разделе комментариев ниже. Ваши идеи могут помочь другим членам сообщества!
Для более сложных вариантов использования или индивидуальных реализаций рассмотрите возможность обращения к эксперту Cloudflare Workers или в консультационную службу.

Сохраняйте любопытство, продолжайте учиться и без колебаний расширяйте границы возможного с помощью таких инструментов, как Cloudflare Workers.

Шаг 1. Зарегистрируйте доменное имя (используйте короткий домен)

Шаг 2. Настройте DNS-записи для вашего домена

Шаг 3. Создание работника Cloudflare

Шаг 4. Дополнительные настройки (необязательно)

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

Параметризованные перенаправления

Нажмите «Отслеживание и аналитика».

Пользовательские страницы ошибок

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

Тестирование А / Б

Краткое описание: Создание настраиваемого средства сокращения ссылок с помощью Cloudflare Workers

Об авторе

Мэтт Альгрен

Страницы

Избранное посетителей

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

Создайте бесплатный инструмент сокращения URL-адресов собственного домена (с помощью Cloudflare Workers)

Шаг 1. Зарегистрируйте доменное имя (используйте короткий домен)

Шаг 2. Настройте DNS-записи для вашего домена

Шаг 3. Создание работника Cloudflare

Шаг 4. Дополнительные настройки (необязательно)

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

Параметризованные перенаправления

Нажмите «Отслеживание и аналитика».

Пользовательские страницы ошибок

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

Тестирование А / Б

Краткое описание: Создание настраиваемого средства сокращения ссылок с помощью Cloudflare Workers

Похожие сообщения

Об авторе

Мэтт Альгрен

Страницы

Избранное посетителей

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