أنشئ موقعًا مجانيًا لتقصير عناوين URL للنطاق المخصص (مع عمال Cloudflare)

في هذه التدوينة سأشارككم كيف يمكنك إنشاء مُختصر URL للنطاق المخصص الخاص بك باستخدام Cloudflare Workers. سواء كنت مطور ويب يتطلع إلى إضافة أداة أخرى إلى حزامك، أو مالك شركة ترغب في وضع علامة تجارية على روابطك دون دفع ثمن باهظ، أو مجرد شخص يحب التلاعب بتقنيات الويب، فإن هذا الدليل خطوة بخطوة مخصص لك أنت.

باعتباري مطور ويب ومتحمسًا للتكنولوجيا، كنت دائمًا مفتونًا بالأشياء الصغيرة التي تجعل الإنترنت أكثر كفاءة وسهولة في الاستخدام. في أحد الأيام، أثناء مشاركة عنوان URL طويل وغير عملي مع أحد زملائي، وجدت نفسي أرغب في الحصول على طريقة بسيطة وشخصية لاختصار الروابط. بالتأكيد، هناك الكثير من خدمات تقصير عناوين URL، ولكني أردت شيئًا يشعرني بشخصيتي أكثر - شيء يمكنني تخصيصه والتحكم فيه.

وذلك عندما عثرت على فكرة إنشاء أداة تقصير عناوين URL المخصصة الخاصة بي باستخدام Cloudflare Workers. كان الأمر أشبه بالعثور على كنز مخفي في بحر تقنيات الويب الواسع. لا يمكنني فقط اختصار عناوين URL، بل يمكنني فعل ذلك باستخدام اسم النطاق الخاص بي مجانًا! ذكّرتني إثارة هذا الاكتشاف بالمرة الأولى التي قمت فيها بنشر موقع على شبكة الإنترنت - ذلك الاندفاع من التمكين والإمكانيات التي لا نهاية لها.

ما جعل هذا الاكتشاف أكثر إثارة هو إدراك أنه يمكن أن يكون بمثابة بديل رائع ومجاني للخدمات الشائعة مثل Bit.ly أو TinyURL لإنشاء روابط قصيرة ذات علامة تجارية على نطاق مخصص. تدفع العديد من الشركات والأفراد أموالاً جيدة مقابل هذا النوع من الوظائف، ولكن إليك طريقة لتحقيق نفس النتيجة دون إنفاق سنت واحد.

الخطوة 1: تسجيل اسم المجال (استخدم نطاقًا قصيرًا)

الخطوة الأولى في إنشاء أداة تقصير عناوين URL المخصصة هي تسجيل اسم النطاق. سيكون هذا هو الأساس للروابط القصيرة التي تحمل علامتك التجارية، لذا اختر بحكمة!

فيما يلي بعض النصائح لمساعدتك في اختيار النطاق المثالي:

1. اختصر: الهدف الأساسي من أداة تقصير عناوين URL هو إنشاء روابط مختصرة. ابحث عن أسماء النطاقات المكونة من 3-5 أحرف إن أمكن. يمكن أن يكون هذا اختصارًا أو اختصارًا أو كلمة جذابة.
2. اجعلها لا تنسى: اختر شيئًا يسهل تذكره وكتابته. سيؤدي ذلك إلى تسهيل استخدام الروابط المختصرة لك وللآخرين.
3. فكر في علامتك التجارية: إذا كنت تستخدم هذا لعلامة تجارية أو شخصية، فحاول مواءمة المجال مع هوية علامتك التجارية الحالية.
4. التحقق من الصلاحية: النطاقات القصيرة والجذابة مطلوبة بشدة. قد تحتاج إلى الإبداع أو التفكير في نطاقات المستوى الأعلى البديلة (TLDs) مثل .io أو .co أو .me إذا لم يكن خيارك الأول متاحًا.
5. فكر في TLD: على الرغم من أن .com يحظى بشعبية كبيرة، فلا تخجل من نطاقات TLD الأخرى. قد يكون بعضها، مثل .link أو .click، مناسبًا بشكل خاص لمختصر عناوين URL.

فيما يلي بعض الأمثلة لإلهامك:

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

بمجرد اختيار النطاق الخاص بك، ستحتاج إلى شرائه من مسجل النطاق. تشمل بعض الخيارات الشائعة ما يلي:

• Namecheap
• GoDaddy أو
• كلودفلاري (موصى به - وهو أيضًا مناسب جدًا لأننا سنستخدم 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
الاسم: شبكة الاتصالات العالمية
المحتوى: 192.0.2.1
TTL: السيارات
حالة الوكيل: وكيل (السحابة البرتقالية - مهم جداً)

عنوان IP 192.0.2.1 هذا هو عنوان "وهمي" خاص. إنه مخصص للتوثيق والاختبار، مما يجعله مثاليًا لاحتياجاتنا.

4. تمكين وكيل Cloudflare

• تأكد من تمكين حالة الوكيل (رمز السحابة البرتقالية) لسجل DNS الخاص بك.
• يسمح هذا لـ Cloudflare بتوكيل حركة المرور الخاصة بك وهو ضروري لكي يعمل Cloudflare Workers.

5. التحقق من التكوين

• بمجرد نشر تغيير خادم الأسماء، ستعرض Cloudflare نطاقك على أنه "نشط".
• يمكنك التحقق من ذلك في لوحة تحكم Cloudflare.

النقطة الأساسية هنا هي أننا لا نوجه نطاقك إلى أي استضافة ويب فعلية. العنوان 192.0.2.1 هو مجرد عنصر نائب. سيقوم عامل Cloudflare، الذي سنقوم بإعداده بعد ذلك، باعتراض جميع الطلبات الواردة إلى نطاقك والتعامل مع منطق تقصير عنوان URL.

نصيحة احترافية: يعني هذا الإعداد أنك لست بحاجة إلى الدفع مقابل أي استضافة ويب أو إدارتها. سيتعامل عمال Cloudflare مع جميع الأحمال الثقيلة، مما يجعل هذا الحل ليس مجانيًا فحسب، بل أيضًا خفيف الوزن بشكل لا يصدق وسهل الصيانة.

بعد تكوين DNS الخاص بك بشكل صحيح، أنت الآن جاهز للانتقال إلى الجزء المثير – إعداد Cloudflare Worker للتعامل مع تقصير عنوان URL.

الخطوة 3: إنشاء عامل Cloudflare

الآن بعد أن قمنا بتكوين المجال الخاص بنا في Cloudflare، فقد حان الوقت لإنشاء العامل الذي سيتعامل مع عمليات إعادة التوجيه الخاصة بنا. يوفر عمال Cloudflare بيئة تنفيذ بدون خادم تسمح لنا بتشغيل التعليمات البرمجية الخاصة بنا على الحافة، بالقرب من مستخدمينا للحصول على الأداء الأمثل.

1. قم بإنشاء عامل Cloudflare

• الدخول إلى قسم العمال:
  • سجّل الدخول إلى لوحة معلومات Cloudflare.
  • انتقل إلى قسم "العاملون" من الشريط الجانبي.
  • انقر فوق "إنشاء خدمة" إذا كان هذا هو العامل الأول لديك، أو "إنشاء عامل" إذا كان لديك بالفعل عمال موجودون.
• قم بتسمية العامل الخاص بك:
  • اختر اسمًا وصفيًا للعامل الخاص بك، مثل "معالج عمليات إعادة التوجيه المجمعة".
  • انقر فوق "إنشاء خدمة" للمتابعة إلى المحرر.
• كتابة السيناريو العامل:
  • في المحرر، استبدل الكود الافتراضي بالبرنامج النصي لمعالج إعادة التوجيه:

تصدير الافتراضي {
  جلب غير متزامن (طلب) {
    const redirectMap = خريطة جديدة([
      ["google"،" https://www.google.com?subId1=google"] ،
      ["bing"، "https://www.bing.com?subId1=bing"]،
      // أضف المزيد من عمليات إعادة التوجيه هنا حسب الحاجة
    ]) ؛

    const url = new URL(request.url);
    console.log("عنوان URL الكامل:"، url.toString());
    console.log("اسم المضيف:"، url.hostname);
    console.log("اسم المسار:"، url.pathname);

    Let path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
    
    إذا (url.hostname.includes('workers.dev')) {
      المسار = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
    }
    
    console.log("المسار الذي تمت معالجته:"، المسار)؛
    
    موقع ثابت = redirectMap.get(path);
    console.log("إعادة توجيه الموقع:"، location);

// التغيير إلى 301 لإعادة التوجيه الدائم
    إذا (الموقع) {
      إرجاع الاستجابة. إعادة التوجيه (الموقع، 302)؛
    }
    
    // إذا لم يكن الطلب موجودًا في الخريطة، فقم بإرجاع 404 أو البديل المفضل لديك
    إرجاع استجابة جديدة(`لم يتم العثور على: ${path}`, { الحالة: 404 });
  },
};

• فهم البرنامج النصي:
  • نحدد أ 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 لإجراء التغييرات واختبار العامل الخاص بك.
  • يمكنك استخدام أداة اختبار HTTP المتوفرة لمحاكاة الطلبات ومعرفة كيفية استجابة العامل لديك.
• نشر العامل:
  • بمجرد أن تصبح راضيًا عن اختباراتك، انقر فوق "حفظ ونشر" لتفعيل العامل الخاص بك.
• إعداد مسارات العمال:

• بعد النشر، انتقل إلى علامة التبويب "المشغلات" الخاصة بالعامل لديك.
• أضف طريقًا يتوافق مع نطاقك، مثل *يوصي بالرابط/*.
• وهذا يضمن معالجة جميع الطلبات المقدمة إلى المجال الخاص بك بواسطة هذا العامل.
• التحقق من الإعداد:
  • حاول الوصول إلى عدد قليل من مسارات إعادة التوجيه الخاصة بك (على سبيل المثال، https://recommends.link/url-shortener-guide) للتأكد من أنهم يعملون كما هو متوقع.
  • تحقق من سجلات العمال في لوحة تحكم Cloudflare الخاصة بك لرؤية مخرجات وحدة التحكم والتحقق من معالجة المسارات بشكل صحيح.

الخطوة 4: المزيد من التخصيصات (اختياري)

عمليات إعادة التوجيه الديناميكية باستخدام Cloudflare KV

لجعل نظام إعادة التوجيه الخاص بنا أكثر مرونة وأسهل في الإدارة، يمكننا استخدام تخزين Cloudflare KV (قيمة المفتاح) لتخزين عمليات إعادة التوجيه الخاصة بنا:

إنشاء مساحة اسم KV:

• في لوحة تحكم Cloudflare، انتقل إلى Workers > KV. انقر فوق "إنشاء مساحة اسم" وقم بتسميتها (على سبيل المثال، "REDIRECT_MAP").

ربط مساحة الاسم KV بالعامل الخاص بك:

• انتقل إلى إعدادات العامل. ضمن "KV Namespace Bindings"، قم بإضافة رابط جديد. اختر مساحة اسم KV الخاصة بك وأعطها اسمًا متغيرًا (على سبيل المثال، عمليات إعادة التوجيه).

قم بتعديل البرنامج النصي للعامل لاستخدام KV:

   تصدير الافتراضي {
     جلب غير متزامن (طلب، بيئة) {
       const url = new URL(request.url);
       مسار ثابت = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       موقع ثابت = انتظار env.REDIRECTS.get(path);
       
       إذا (الموقع) {
         إرجاع الاستجابة. إعادة التوجيه (الموقع، 301)؛
       }
       
       إرجاع استجابة جديدة(`لم يتم العثور على: ${path}`, { الحالة: 404 });
     },
   };

يمكنك الآن إضافة عمليات إعادة التوجيه أو تحديثها أو إزالتها عن طريق تعديل متجر KV دون تغيير رمز العامل.

عمليات إعادة التوجيه ذات المعلمات

السماح بالمعلمات الديناميكية في عمليات إعادة التوجيه الخاصة بك:

   تصدير الافتراضي {
     جلب غير متزامن (طلب، بيئة) {
       const url = new URL(request.url);
       const [path, ...params] = url.pathname.toLowerCase().replace(/^\//, '').split('/');
       
       دع الموقع = ينتظر env.REDIRECTS.get(path);
       
       إذا (الموقع) {
         // استبدل العناصر النائبة بالمعلمات الفعلية
         params.forEach((param,index) => {
           location = location.replace(`{${index}}`, param);
         })؛
         إرجاع الاستجابة. إعادة التوجيه (الموقع، 301)؛
       }
       
       إرجاع استجابة جديدة(`لم يتم العثور على: ${path}`, { الحالة: 404 });
     },
   };

باستخدام هذا الإعداد، يمكن أن يكون لديك إدخال KV مثل "product" : "https://mystore.com/item/{0}/details" واستخدامه كـ yourshortlink.com/product/12345.

انقر فوق التتبع والتحليلات

تنفيذ التحليلات الأساسية عن طريق تسجيل أحداث إعادة التوجيه:

   تصدير الافتراضي {
     جلب غير متزامن (طلب، بيئة) {
       const url = new URL(request.url);
       مسار ثابت = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       موقع ثابت = انتظار env.REDIRECTS.get(path);
       
       إذا (الموقع) {
         // سجل حدث إعادة التوجيه
         في انتظار env.REDIRECTS.put(`${path}_clicks`, (parseInt(await env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
         إرجاع الاستجابة. إعادة التوجيه (الموقع، 301)؛
       }
       
       إرجاع استجابة جديدة(`لم يتم العثور على: ${path}`, { الحالة: 404 });
     },
   };

صفحات خطأ مخصصة

بدلاً من الاستجابة بنص عادي 404، قم بإرجاع صفحة HTML مخصصة:

   const notFoundPage = `
   
   
   
     
     
     لم يتم العثور على الرابط
     <style></style>
       الجسم { عائلة الخط: Arial، sans-serif؛ محاذاة النص: مركز؛ الحشو العلوي: 50 بكسل؛ }
     </style>

   
   
     أُووبس! لم يتم العثور على الرابط
     الرابط القصير الذي تبحث عنه غير موجود.
   
   
   `;

   // في وظيفة الجلب الخاصة بك:
   إرجاع استجابة جديدة (notFoundPage، { 
     الحالة: 404،
     الرؤوس: { "نوع المحتوى": "نص/html" }
   })؛

معدل الحد

تنفيذ تحديد المعدل الأساسي لمنع إساءة الاستخدام:

   تصدير الافتراضي {
     جلب غير متزامن (طلب، بيئة) {
       const ip = request.headers.get('CF-Connecting-IP');
       constrateLimitKey = `ratelimit:${ip}`;
       const currentRequests = parseInt(await env.REDIRECTS.get(rateLimitKey) || '0');
       
       إذا (currentRequests > 100) {// حد 100 طلب في الدقيقة
         إرجاع استجابة جديدة ("تم تجاوز حد السعر"، { الحالة: 429 })؛
       }
       
       انتظار env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});
       
       // بقية منطق إعادة التوجيه الخاص بك هنا
     },
   };

A اختبار / B

قم بتنفيذ اختبار A/B بسيط لعمليات إعادة التوجيه الخاصة بك:

   تصدير الافتراضي {
     جلب غير متزامن (طلب، بيئة) {
       const url = new URL(request.url);
       مسار ثابت = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       موقع ثابت A = انتظار env.REDIRECTS.get(`${path}_A`);
       موقع ثابت B = انتظار env.REDIRECTS.get(`${path}_B`);
       
       إذا (الموقع أ && الموقع ب) {
         موقع ثابت = Math.random() < 0.5؟ الموقع أ: الموقع ب؛
         إرجاع الاستجابة. إعادة التوجيه (الموقع، 301)؛
       }
       
       // الرجوع إلى إعادة التوجيه العادية إذا لم يتم إعداد اختبار أ/ب
       موقع ثابت = انتظار env.REDIRECTS.get(path);
       إذا (الموقع) {
         إرجاع الاستجابة. إعادة التوجيه (الموقع، 301)؛
       }
       
       إرجاع استجابة جديدة(`لم يتم العثور على: ${path}`, { الحالة: 404 });
     },
   };

تضيف هذه التخصيصات والتوسعات وظائف مهمة إلى نظام إعادة التوجيه المجمع لديك، مما يجعله أكثر مرونة وقوة وغنيًا بالمعلومات. يمكن تحسين وتوسيع كل من هذه الميزات بشكل أكبر بناءً على احتياجاتك وحالات الاستخدام الخاصة بك.

ملخص: إنشاء أداة تقصير الروابط المخصصة باستخدام عمال Cloudflare

خلال منشور المدونة هذا، اكتشفنا كيفية إنشاء أداة تقصير عناوين URL مخصصة قوية ومرنة باستخدام Cloudflare Workers. يقدم هذا الحل طريقة مجانية وفعالة لإنشاء روابط قصيرة على نطاق واسع.

TL؛ DR:

1. يوفر Cloudflare Workers نظامًا أساسيًا بدون خادم لتنفيذ منطق إعادة التوجيه المخصص مع التوزيع العالمي وزمن الوصول المنخفض.
2. يعد تكوين DNS المناسب وإعداد مسارات العمل أمرًا ضروريًا لتوصيل المجال المخصص الخاص بك بالعامل.
3. يمكن للعامل البسيط المستند إلى JavaScript التعامل مع سيناريوهات إعادة التوجيه المعقدة بكفاءة.
4. يمكن الاستفادة من تخزين القيمة الرئيسية (KV) الخاص بـ Cloudflare لإنشاء خرائط إعادة توجيه ديناميكية يمكن التحكم فيها بسهولة.
5. يمكن تنفيذ الميزات المتقدمة مثل عمليات إعادة التوجيه ذات المعلمات، وتتبع النقرات، وصفحات الأخطاء المخصصة، وتحديد المعدل، واختبار A/B ضمن النظام البيئي العامل.
6. يوفر هذا النظام مزايا كبيرة مقارنة بالنظام التقليدي طرق إعادة التوجيه، بما في ذلك الأداء المحسن والإدارة الأسهل والمرونة المحسنة.

يقدم الحل الذي بنيناه العديد من الفوائد:

• التدرجية: يتعامل مع الملايين من عمليات إعادة التوجيه دون تدهور الأداء.
• مرونة: يمكنك إضافة عمليات إعادة التوجيه أو تعديلها أو إزالتها بسهولة دون تغيير المنطق الأساسي.
• الأداء: يستفيد من شبكة Cloudflare العالمية لعمليات إعادة التوجيه السريعة في جميع أنحاء العالم.
• تخصيص: يسمح بميزات متقدمة مثل التحليلات واختبار A/B.
• الفعالية من حيث التكلفة: يستخدم بنية بدون خادم، مما قد يؤدي إلى تقليل تكاليف الاستضافة.
• بديل مجاني إلى الخدمات الشائعة مثل Bit.ly أو Yourls لإنشاء روابط قصيرة ذات علامة تجارية على مجال مخصص.

الآن بعد أن فهمت قوة ومرونة نظام إعادة التوجيه المستند إلى Cloudflare Worker، فقد حان الوقت لوضعه موضع التنفيذ:

1. إذا لم تكن قد قمت بذلك بالفعل، قم بالتسجيل للحصول على حساب Cloudflare والتعرف على منصة العمال.
2. قم بتنفيذ هذا النظام للروابط القصيرة ذات العلامات التجارية الخاصة بك أو عمليات إعادة التوجيه المجمعة.
3. قم بتجربة الميزات المتقدمة التي ناقشناها لتخصيص النظام ليناسب احتياجاتك الخاصة.
4. شارك تجاربك أو اطرح الأسئلة في قسم التعليقات أدناه. أفكارك يمكن أن تساعد الآخرين في المجتمع!
5. لمزيد من حالات الاستخدام المتقدمة أو عمليات التنفيذ المخصصة، فكر في التواصل مع أحد خبراء Cloudflare Workers أو الخدمة الاستشارية.

كن فضوليًا، واستمر في التعلم، ولا تتردد في تجاوز حدود ما هو ممكن باستخدام أدوات مثل Cloudflare Workers.