У цій публікації я збираюся поділитися з вами як ви можете створити свій власний власний засіб скорочення 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
- У налаштуваннях Cloudflare DNS ми додамо два нові записи 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.
- На бічній панелі перейдіть до розділу «Працівники».
- Натисніть «Створити службу», якщо це ваш перший працівник, або «Створити працівника», якщо у вас уже є робочі.
- Назвіть свого працівника:
- Виберіть описове ім’я для вашого Worker, наприклад «обробник масових перенаправлень».
- Натисніть «Створити службу», щоб перейти до редактора.
- Написання робочого сценарію:
- У редакторі замініть стандартний код сценарієм обробки перенаправлення:
експортувати за замовчуванням {
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.pathname);
let path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
if (url.hostname.includes('workers.dev')) {
шлях = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
}
console.log("Оброблений шлях:", шлях);
const location = redirectMap.get(path);
console.log("Місце перенаправлення:", розташування);
// Змініть на 301 для постійного перенаправлення
якщо (розташування) {
return Response.redirect(location, 302);
}
// Якщо запиту немає на карті, поверніть 404 або бажаний запасний варіант
return new Response(`Не знайдено: ${path}`, { status: 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.
- Налаштування робочих маршрутів:
- Після розгортання перейдіть на вкладку «Тригери» для вашого Worker.
- Додайте маршрут, який відповідає вашому домену, наприклад *recommends.link/*.
- Це гарантує, що всі запити до вашого домену обробляються цим працівником.
- Перевірка налаштувань:
- Спробуйте отримати доступ до кількох своїх шляхів переспрямування (наприклад, https://recommends.link/url-shortener-guide), щоб переконатися, що вони працюють належним чином.
- Перевірте робочі журнали на інформаційній панелі Cloudflare, щоб побачити вихід консолі та переконатися, що шляхи обробляються правильно.
Крок 4: додаткові налаштування (необов’язково)
Динамічні переадресації з Cloudflare KV
Щоб зробити нашу систему перенаправлення більш гнучкою та легшою в управлінні, ми можемо використовувати сховище Cloudflare KV (Key-Value) для зберігання наших перенаправлень:
Створіть простір імен KV:
- На інформаційній панелі Cloudflare перейдіть до Workers > KV. Натисніть «Create namespace» і назвіть його (наприклад, «REDIRECT_MAP»).
- Перейдіть до налаштувань Worker. У розділі «KV Namespace Bindings» додайте нову прив’язку. Виберіть свій простір імен KV і дайте йому назву змінної (наприклад, REDIRECTS).
експортувати за замовчуванням {
async fetch(request, env) {
const url = новий URL(request.url);
const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
const location = await env.REDIRECTS.get(path);
якщо (розташування) {
return Response.redirect(location, 301);
}
return new Response(`Не знайдено: ${path}`, { status: 404 });
},
}; Тепер ви можете додавати, оновлювати або видаляти перенаправлення, змінюючи сховище KV без зміни коду Worker.
Параметризовані переадресації
Дозволити динамічні параметри у ваших переадресаціях:
експортувати за замовчуванням {
async fetch(request, env) {
const url = новий URL(request.url);
const [шлях, ...params] = url.pathname.toLowerCase().replace(/^\//, '').split('/');
let location = await env.REDIRECTS.get(path);
якщо (розташування) {
// Замінити заповнювачі на фактичні параметри
params.forEach((параметр, індекс) => {
location = location.replace(`{${index}}`, param);
});
return Response.redirect(location, 301);
}
return new Response(`Не знайдено: ${path}`, { status: 404 });
},
}; З таким налаштуванням ви можете мати запис KV на зразок «product»: «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 location = await env.REDIRECTS.get(path);
якщо (розташування) {
// Реєстрація події перенаправлення
await env.REDIRECTS.put(`${path}_clicks`, (parseInt(await env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
return Response.redirect(location, 301);
}
return new Response(`Не знайдено: ${path}`, { status: 404 });
},
}; Користувацькі сторінки помилок
Замість звичайної текстової відповіді 404 поверніть спеціальну сторінку HTML:
const notFoundPage = `
Посилання не знайдено
body { font-family: Arial, sans-serif; вирівнювання тексту: центр; padding-top: 50px; }
Ой! Посилання не знайдено
Коротке посилання, яке ви шукаєте, не існує.
`;
// У вашій функції отримання:
return new Response(notFoundPage, {
статус: 404,
headers: { '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('Ліміт швидкості перевищено', { status: 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 location = Math.random() < 0.5 ? locationA : locationB;
return Response.redirect(location, 301);
}
// Повернення до звичайного переспрямування, якщо тест A/B не налаштовано
const location = await env.REDIRECTS.get(path);
якщо (розташування) {
return Response.redirect(location, 301);
}
return new Response(`Не знайдено: ${path}`, { status: 404 });
},
}; Ці налаштування та розширення додають значну функціональність вашій системі масового перенаправлення, роблячи її більш гнучкою, потужною та інформативною. Кожну з цих функцій можна вдосконалити та розширити відповідно до ваших конкретних потреб і випадків використання.
Підсумок: Створення користувацького скорочення посилань за допомогою Cloudflare Workers
У цьому дописі в блозі ми досліджували, як створити потужний і гнучкий настроюваний засіб скорочення URL-адрес за допомогою Cloudflare Workers. Це рішення пропонує безкоштовний та ефективний підхід до створення коротких посилань у масштабі.
TL; DR:
- Cloudflare Workers надають безсерверну платформу для реалізації спеціальної логіки перенаправлення з глобальним розподілом і низькою затримкою.
- Правильна конфігурація DNS і налаштування Worker Routes мають вирішальне значення для підключення вашого власного домену до Worker.
- Простий Worker на основі JavaScript може ефективно обробляти складні сценарії перенаправлення.
- Сховище Key-Value (KV) Cloudflare можна використовувати для створення динамічних, легко керованих карт перенаправлення.
- Розширені функції, як-от параметризоване переспрямування, відстеження кліків, користувацькі сторінки помилок, обмеження частоти та A/B-тестування, можна реалізувати в екосистемі Worker.
- Ця система має значні переваги перед традиційною методи перенаправлення, включаючи покращену продуктивність, легше керування та підвищену гнучкість.
Розроблене нами рішення пропонує кілька переваг:
- масштабованість: обробляє мільйони переадресацій без зниження продуктивності.
- Гнучкість: легко додавайте, змінюйте або видаляйте перенаправлення без зміни основної логіки.
- продуктивність: використовує глобальну мережу Cloudflare для швидкого перенаправлення по всьому світу.
- настройка: Дозволяє використовувати такі розширені функції, як аналітика та A/B-тестування.
- Економічна ефективність: використовує безсерверну архітектуру, потенційно знижуючи витрати на хостинг.
- Безкоштовна альтернатива на такі популярні сервіси, як Bit.ly або Ваші для створення фірмових коротких посилань на спеціальному домені.
Тепер, коли ви розумієте потужність і гнучкість цієї системи перенаправлення на основі Cloudflare Worker, настав час запустити її в дію:
- Якщо ви ще цього не зробили, зареєструйте обліковий запис Cloudflare і ознайомтеся з платформою Workers.
- Застосуйте цю систему для власних фірмових коротких посилань або групових перенаправлень.
- Експериментуйте з розширеними функціями, які ми обговорювали, щоб адаптувати систему до ваших конкретних потреб.
- Поділіться своїм досвідом або поставте запитання в розділі коментарів нижче. Ваші думки можуть допомогти іншим у спільноті!
- Для більш складних випадків використання або власних реалізацій зверніться до експерта Cloudflare Workers або до консультаційної служби.
Залишайтеся цікавими, продовжуйте навчатися та не соромтеся розширювати межі можливого за допомогою таких інструментів, як Cloudflare Workers.
