Gumawa ng Libreng Custom na Domain URL Shortener (kasama ang Cloudflare Workers)

Sa post na ito, ibabahagi ko sa iyo kung paano ka makakagawa ng sarili mong custom na domain URL shortener gamit ang Cloudflare Workers. Ikaw man ay isang web developer na naghahanap upang magdagdag ng isa pang tool sa iyong sinturon, isang may-ari ng negosyo na gustong i-brand ang iyong mga link nang walang mabigat na tag ng presyo, o isang taong mahilig makipag-usap sa mga teknolohiya sa web, ang step-by-step na gabay na ito ay para sa ikaw.

Bilang isang web developer at tech enthusiast, palagi akong nabighani sa maliliit na bagay na ginagawang mas mahusay at madaling gamitin ang internet. Isang araw, habang nagbabahagi ng isang partikular na mahaba at mahirap gamitin na URL sa isang kasamahan, nakita ko ang aking sarili na nagnanais ng isang simple, personalized na paraan upang paikliin ang mga link. Oo naman, maraming serbisyo sa pag-ikli ng URL doon, ngunit gusto ko ang isang bagay na mas "ako" - isang bagay na maaari kong i-customize at kontrolin.

Noon ako natitisod sa ideya ng paggawa ng sarili kong custom na URL shortener gamit ang Cloudflare Workers. Ito ay tulad ng paghahanap ng isang nakatagong kayamanan sa malawak na dagat ng mga teknolohiya sa web. Hindi ko lang maiikli ang mga URL, ngunit magagawa ko ito gamit ang sarili kong domain name, nang libre! Ang kasabikan ng pagtuklas na ito ay nagpaalala sa akin ng unang pagkakataon na nag-deploy ako ng isang website – ang pagmamadali ng empowerment at walang katapusang mga posibilidad.

Ang higit na nakapagpapasiglang sa pagtuklas na ito ay napagtanto na maaari itong magsilbi bilang isang kamangha-manghang, libreng alternatibo sa mga sikat na serbisyo tulad ng Bit.ly o TinyURL para sa paggawa ng mga branded na maikling link sa isang custom na domain. Maraming mga negosyo at indibidwal ang nagbabayad ng magandang pera para sa ganitong uri ng functionality, ngunit narito ang isang paraan upang makamit ang parehong resulta nang hindi gumagasta ng isang barya.

Hakbang 1: Magrehistro ng Domain Name (Gumamit ng Maikling Domain)

Ang unang hakbang sa paggawa ng iyong custom na URL shortener ay ang pagrehistro ng domain name. Ito ang magiging pundasyon ng iyong mga branded na maikling link, kaya pumili nang matalino!

Narito ang ilang tip upang matulungan kang piliin ang perpektong domain:

1. Panatilihin itong maikli: Ang buong punto ng isang URL shortener ay ang lumikha ng mga maiikling link. Maghanap ng mga domain name na may 3-5 character kung maaari. Ito ay maaaring isang abbreviation, acronym, o isang nakakaakit na salita.
2. Gawin itong hindi malilimutan: Pumili ng isang bagay na madaling matandaan at i-type. Gagawin nitong mas madali para sa iyo at sa iba na gamitin ang iyong mga pinaikling link.
3. Isaalang-alang ang iyong tatak: Kung ginagamit mo ito para sa isang negosyo o personal na brand, subukang ihanay ang domain sa iyong umiiral na pagkakakilanlan ng brand.
4. Tingnan ang availability: Ang maikli, kaakit-akit na mga domain ay mataas ang demand. Maaaring kailanganin mong maging malikhain o isaalang-alang ang mga alternatibong top-level domain (TLDs) tulad ng .io, .co, o .me kung hindi available ang iyong unang pagpipilian.
5. Isipin ang TLD: Habang sikat ang .com, huwag mahiya sa ibang mga TLD. Ang ilan, tulad ng .link o .click, ay maaaring partikular na angkop para sa isang URL shortener.

Narito ang ilang mga halimbawa upang magbigay ng inspirasyon sa iyo:

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

Kapag napili mo na ang iyong domain, kakailanganin mong bilhin ito mula sa isang domain registrar. Ang ilang mga tanyag na opsyon ay kinabibilangan ng:

• Namecheap
• GoDaddy
• CloudFlare (Inirerekomenda – na napakaginhawa rin dahil gagamit kami ng Cloudflare Workers)

Tandaan, habang ang domain ay nagkakahalaga ng pera, ito ay isang beses na pagbili bawat taon, at ang natitirang bahagi ng aming URL shortener setup ay magiging libre gamit ang Cloudflare Workers.

Pro tip: Bago i-finalize ang iyong pagbili, tiyaking hindi nauugnay ang domain sa anumang spam o nakakahamak na aktibidad. Maaari mong suriin ang kasaysayan nito gamit ang mga tool tulad ng Domain Tools o Wayback Machine.

Habang hawak ang iyong makintab na bagong domain, handa ka nang magpatuloy sa susunod na hakbang: pag-set up ng Cloudflare para sa iyong domain. Ngunit tatalakayin natin iyon sa susunod na seksyon.

Hakbang 2: I-configure ang Mga DNS Record para sa Iyong Domain

Ngayong nasa iyo na ang iyong domain, oras na para i-set up ang configuration ng DNS. Ang hakbang na ito ay mahalaga para sa pagtiyak na gumagana nang tama ang iyong Cloudflare Workers sa iyong bagong rehistradong domain.

Maglakad tayo sa proseso:

1. Idagdag ang Iyong Domain sa Cloudflare

• Kung hindi mo pa nagagawa, lumikha ng isang libreng Cloudflare account.
• Sa iyong Cloudflare dashboard, i-click ang “Magdagdag ng Site” at ilagay ang iyong domain name.
• Ii-scan ng Cloudflare ang mga kasalukuyang tala ng DNS. Tanggalin ang anumang mga talaang mahahanap nito (maliban kung ginagamit mo rin ang domain para sa email o iba pang mahahalagang serbisyo, kung saan, panatilihin ang mga iyon).

2. I-update ang Mga Nameserver (Huwag pansinin ang hakbang na ito kung nakarehistro ang iyong domain sa Cloudflare)

• Bibigyan ka ng Cloudflare ng isang hanay ng mga nameserver.
• Pumunta sa website ng iyong domain registrar at palitan ang mga kasalukuyang nameserver ng mga ibinigay ng Cloudflare.
• Ang hakbang na ito ay maaaring tumagal ng hanggang 24 na oras upang ipalaganap sa buong mundo.

3. I-configure ang DNS Records

• Sa iyong mga setting ng Cloudflare DNS, magdaragdag kami ng dalawang bagong A record.
• Idagdag ang sumusunod:

Uri: A
pangalan: @
Nilalaman: 192.0.2.1
TTL: Auto
Katayuan ng proxy: Proxied (orange na ulap - napakahalaga)

Uri: A
pangalan: www
Nilalaman: 192.0.2.1
TTL: Auto
Katayuan ng proxy: Proxied (orange na ulap - napakahalaga)

Ang 192.0.2.1 IP na ito ay isang espesyal na "dummy" na address. Ito ay nakalaan para sa dokumentasyon at pagsubok, na ginagawang perpekto para sa aming mga pangangailangan.

4. Paganahin ang Cloudflare Proxy

• Tiyaking naka-enable ang proxy status (orange cloud icon) para sa iyong DNS record.
• Nagbibigay-daan ito sa Cloudflare na i-proxy ang iyong trapiko at kinakailangan para gumana ang Cloudflare Workers.

5. I-verify ang Configuration

• Kapag napalaganap na ang pagbabago ng nameserver, ipapakita ng Cloudflare ang iyong domain bilang "Aktibo."
• Maaari mong i-verify ito sa Cloudflare dashboard.

Ang pangunahing punto dito ay hindi namin itinuturo ang iyong domain sa anumang aktwal na web hosting. Ang 192.0.2.1 address ay isang placeholder lamang. Ang iyong Cloudflare Worker, na susunod naming ise-set up, ay hahadlang sa lahat ng kahilingan sa iyong domain at hahawak sa lohika ng pagpapaikli ng URL.

Pro Tip: Ang setup na ito ay nangangahulugan na hindi mo kailangang magbayad para sa o pamahalaan ang anumang web hosting. Aasikasuhin ng Cloudflare Workers ang lahat ng mabibigat na pag-aangat, na ginagawang hindi lamang libre ang solusyong ito kundi napakagaan din at madaling mapanatili.

Sa wastong pag-configure ng iyong DNS, handa ka na ngayong magpatuloy sa kapana-panabik na bahagi – ang pagse-set up ng iyong Cloudflare Worker upang pangasiwaan ang pagpapaikli ng URL.

Hakbang 3: Paglikha ng isang Cloudflare Worker

Ngayong na-configure na namin ang aming domain sa Cloudflare, oras na para gawin ang Manggagawa na hahawak sa aming mga pag-redirect. Nagbibigay ang Cloudflare Workers ng isang serverless execution environment na nagbibigay-daan sa amin na patakbuhin ang aming code sa gilid, malapit sa aming mga user para sa pinakamainam na performance.

1. Gumawa ng Cloudflare Worker

• Pag-access sa Seksyon ng Mga Manggagawa:
  • Mag-log in sa iyong Cloudflare dashboard.
  • Mag-navigate sa seksyong "Mga Manggagawa" mula sa sidebar.
  • Mag-click sa "Gumawa ng Serbisyo" kung ito ang iyong unang Manggagawa, o "Gumawa ng Manggagawa" kung mayroon ka nang mga kasalukuyang Manggagawa.
• Pangalanan ang Iyong Manggagawa:
  • Pumili ng mapaglarawang pangalan para sa iyong Manggagawa, gaya ng “bulk-redirects-handler”.
  • I-click ang "Gumawa ng Serbisyo" upang magpatuloy sa editor.
• Pagsusulat ng Worker Script:
  • Sa editor, palitan ang default na code ng script ng redirect handler:

default na pag-export {
  async fetch(kahilingan) {
    const redirectMap = bagong Mapa([
      ["google"," https://www.google.com?subId1=google"],
      ["bing", "https://www.bing.com?subId1=bing"],
      // Magdagdag ng higit pang mga pag-redirect dito kung kinakailangan
    ]);

    const url = bagong URL(request.url);
    console.log("Buong URL:", url.toString());
    console.log("Hostname:", url.hostname);
    console.log("Pathname:", url.pathname);

    let path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
    
    if (url.hostname.includes('workers.dev')) {
      path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
    }
    
    console.log("Naprosesong landas:", landas);
    
    const location = redirectMap.get(path);
    console.log("Lokasyon ng pag-redirect:", lokasyon);

// Baguhin sa 301 para sa Permanenteng pag-redirect
    kung (lokasyon) {
      return Response.redirect(lokasyon, 302);
    }
    
    // Kung wala sa mapa ang kahilingan, magbalik ng 404 o ang iyong ginustong fallback
    return new Response(`Not Found: ${path}`, { status: 404 });
  },
};

• Pag-unawa sa Script:
  • Tinutukoy namin ang a redirectMap na naglalaman ng aming mga maiikling landas at ang mga katumbas na buong URL ng mga ito.

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

yourshorturl.com/google nagre-redirect sa -> https://www.google.com?subId1=google

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

yourshorturl.com/bing redirects to -> https://www.bing.com?subId1=bing

• Pinoproseso ng script ang mga papasok na kahilingan, kinukuha ang path, at sinusuri kung tumutugma ito sa alinman sa aming tinukoy na mga pag-redirect.
• Kung may nakitang tugma, nagbabalik ito ng 302 (Temporary Redirect) sa kaukulang URL.
• Kung walang nakitang tugma, nagbabalik ito ng 404 Not Found na tugon.
• Pagsubok sa Manggagawa:
  • Gamitin ang feature na "Mabilis na Pag-edit" sa Cloudflare dashboard para gumawa ng mga pagbabago at subukan ang iyong Manggagawa.
  • Maaari mong gamitin ang ibinigay na tool sa pagsubok ng HTTP upang gayahin ang mga kahilingan at makita kung paano tumugon ang iyong Manggagawa.
• Pag-deploy ng Manggagawa:
  • Kapag nasiyahan ka na sa iyong mga pagsubok, i-click ang “I-save at I-deploy” upang gawing live ang iyong Manggagawa.
• Pag-set up ng Mga Ruta ng Manggagawa:

• Pagkatapos mag-deploy, pumunta sa tab na "Mga Trigger" para sa iyong Manggagawa.
• Magdagdag ng rutang tumutugma sa iyong domain, gaya ng *recommends.link/*.
• Tinitiyak nito na ang lahat ng kahilingan sa iyong domain ay pinangangasiwaan ng Manggagawa na ito.
• Pag-verify ng Setup:
  • Subukang i-access ang ilan sa iyong mga redirect path (hal., https://recommends.link/url-shortener-guide) upang matiyak na gumagana ang mga ito gaya ng inaasahan.
  • Tingnan ang Workers Logs sa iyong Cloudflare dashboard para makita ang console output at i-verify na ang mga path ay pinoproseso nang tama.

Hakbang 4: Higit pang Mga Pag-customize (Opsyonal)

Mga Dynamic na Pag-redirect gamit ang Cloudflare KV

Upang gawing mas flexible at mas madaling pamahalaan ang aming sistema ng pag-redirect, maaari naming gamitin ang storage ng Cloudflare KV (Key-Value) upang iimbak ang aming mga pag-redirect:

Lumikha ng KV Namespace:

• Sa iyong Cloudflare dashboard, pumunta sa Workers > KV. I-click ang “Gumawa ng namespace” at pangalanan ito (hal., “REDIRECT_MAP”).

Itali ang KV Namespace sa iyong Manggagawa:

• Pumunta sa mga setting ng iyong Manggagawa. Sa ilalim ng “KV Namespace Bindings”, magdagdag ng bagong binding. Piliin ang iyong KV namespace at bigyan ito ng variable na pangalan (hal., REDIRECTS).

Baguhin ang script ng Worker para magamit ang KV:

   default na pag-export {
     async fetch(kahilingan, env) {
       const url = bagong URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       lokasyon ng const = naghihintay sa env.REDIRECTS.get(path);
       
       kung (lokasyon) {
         return Response.redirect(lokasyon, 301);
       }
       
       return new Response(`Not Found: ${path}`, { status: 404 });
     },
   };

Maaari ka na ngayong magdagdag, mag-update, o mag-alis ng mga pag-redirect sa pamamagitan ng pagbabago sa KV store nang hindi binabago ang Worker code.

Mga Parameterized na Pag-redirect

Payagan ang mga dynamic na parameter sa iyong mga pag-redirect:

   default na pag-export {
     async fetch(kahilingan, env) {
       const url = bagong URL(request.url);
       const [path, ...params] = url.pathname.toLowerCase().replace(/^\//, '').split('/');
       
       hayaan ang lokasyon = hintayin ang env.REDIRECTS.get(path);
       
       kung (lokasyon) {
         // Palitan ang mga placeholder ng aktwal na mga parameter
         params.forEach((param, index) => {
           lokasyon = location.replace(`{${index}}`, param);
         });
         return Response.redirect(lokasyon, 301);
       }
       
       return new Response(`Not Found: ${path}`, { status: 404 });
     },
   };

Sa setup na ito, maaari kang magkaroon ng KV entry tulad ng “product” : “https://mystore.com/item/{0}/details” at gamitin ito bilang yourshortlink.com/product/12345.

I-click ang Pagsubaybay at Analytics

Ipatupad ang pangunahing analytics sa pamamagitan ng pag-log ng mga kaganapan sa pag-redirect:

   default na pag-export {
     async fetch(kahilingan, env) {
       const url = bagong URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       lokasyon ng const = naghihintay sa env.REDIRECTS.get(path);
       
       kung (lokasyon) {
         // I-log ang kaganapan sa pag-redirect
         maghintay sa env.REDIRECTS.put(`${path}_clicks`, (parseInt(wait env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
         return Response.redirect(lokasyon, 301);
       }
       
       return new Response(`Not Found: ${path}`, { status: 404 });
     },
   };

Mga Custom na Pahina ng Error

Sa halip na isang plain text 404 na tugon, magbalik ng custom na HTML page:

   const notFoundPage = `
   
   
   
     
     
     Hindi Nahanap ang Link
     
       body { font-family: Arial, sans-serif; text-align: center; padding-top: 50px; }
     
   
   
     Oops! Hindi Nahanap ang Link
     Ang maikling link na iyong hinahanap ay wala.
   
   
   `;

   // Sa iyong fetch function:
   ibalik ang bagong Tugon(notFoundPage, { 
     katayuan: 404,
     mga header: { 'Content-Type': 'text/html' }
   });

rate Paglilimita

Ipatupad ang pangunahing paglilimita sa rate upang maiwasan ang pang-aabuso:

   default na pag-export {
     async fetch(kahilingan, env) {
       const ip = request.headers.get('CF-Connecting-IP');
       const rateLimitKey = `ratelimit:${ip}`;
       const currentRequests = parseInt(naghihintay sa env.REDIRECTS.get(rateLimitKey) || '0');
       
       if (currentRequests > 100) { // 100 kahilingan kada minutong limitasyon
         return new Response('Nalampasan ang limitasyon sa rate', { status: 429 });
       }
       
       maghintay sa env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});
       
       // Ang natitirang bahagi ng iyong redirect logic dito
     },
   };

A / B Testing

Magpatupad ng simpleng pagsubok sa A/B para sa iyong mga pag-redirect:

   default na pag-export {
     async fetch(kahilingan, env) {
       const url = bagong URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const locationA = naghihintay env.REDIRECTS.get(`${path}_A`);
       const locationB = naghihintay env.REDIRECTS.get(`${path}_B`);
       
       kung (lokasyonA && lokasyonB) {
         const location = Math.random() < 0.5 ? lokasyonA: lokasyonB;
         return Response.redirect(lokasyon, 301);
       }
       
       // Fallback sa normal na pag-redirect kung hindi naka-set up ang A/B test
       lokasyon ng const = naghihintay sa env.REDIRECTS.get(path);
       kung (lokasyon) {
         return Response.redirect(lokasyon, 301);
       }
       
       return new Response(`Not Found: ${path}`, { status: 404 });
     },
   };

Ang mga pagpapasadya at pagpapalawak na ito ay nagdaragdag ng makabuluhang pagpapagana sa iyong sistema ng maramihang pag-redirect, na ginagawa itong mas flexible, malakas, at nagbibigay-kaalaman. Ang bawat isa sa mga tampok na ito ay maaaring higit pang pinuhin at palawakin batay sa iyong mga partikular na pangangailangan at mga kaso ng paggamit.

Buod: Paggawa ng Custom na Link Shortener sa Cloudflare Workers

Sa buong post sa blog na ito, ginalugad namin kung paano lumikha ng isang malakas at flexible na custom na URL shortener gamit ang Cloudflare Workers. Ang solusyon na ito ay nag-aalok ng libre at mahusay na diskarte sa paglikha ng mga maikling link sa sukat.

TL; DR:

1. Nagbibigay ang Cloudflare Workers ng walang server na platform para sa pagpapatupad ng custom na redirect logic na may pandaigdigang pamamahagi at mababang latency.
2. Ang wastong configuration ng DNS at pag-setup ng Mga Ruta ng Manggagawa ay mahalaga para sa pagkonekta ng iyong custom na domain sa Manggagawa.
3. Ang isang simpleng Worker na nakabatay sa JavaScript ay maaaring pangasiwaan nang mahusay ang mga kumplikadong senaryo sa pag-redirect.
4. Maaaring gamitin ang imbakan ng Key-Value (KV) ng Cloudflare upang lumikha ng mga dynamic, madaling mapamahalaan na mga mapa sa pag-redirect.
5. Maaaring ipatupad ang mga advanced na feature tulad ng mga naka-parameter na pag-redirect, pagsubaybay sa pag-click, custom na pahina ng error, paglilimita sa rate, at pagsubok sa A/B sa loob ng ecosystem ng Manggagawa.
6. Ang sistemang ito ay nag-aalok ng makabuluhang mga pakinabang kaysa sa tradisyonal mga paraan ng pag-redirect, kabilang ang pinahusay na pagganap, mas madaling pamamahala, at pinahusay na kakayahang umangkop.

Ang solusyon na aming binuo ay nag-aalok ng ilang mga benepisyo:

• Kakayahang sumukat: Pinangangasiwaan ang milyun-milyong pag-redirect nang walang pagkasira ng pagganap.
• flexibility: Madaling magdagdag, magbago, o mag-alis ng mga pag-redirect nang hindi binabago ang pangunahing lohika.
• pagganap: Ginagamit ang pandaigdigang network ng Cloudflare para sa mabilis na pag-redirect sa buong mundo.
• Pag-customize: Nagbibigay-daan para sa mga advanced na feature tulad ng analytics at A/B testing.
• Pagiging epektibo ng gastos: Gumagamit ng walang server na arkitektura, na posibleng mabawasan ang mga gastos sa pagho-host.
• Libreng alternatibo sa mga sikat na serbisyo tulad ng Bit.ly o Yourls para sa paggawa ng mga branded na maikling link sa isang custom na domain.

Ngayong nauunawaan mo na ang kapangyarihan at flexibility ng sistema ng pag-redirect na nakabatay sa Cloudflare Worker na ito, oras na para gawin ito:

1. Kung hindi mo pa nagagawa, mag-sign up para sa isang Cloudflare account at gawing pamilyar ang iyong sarili sa platform ng Workers.
2. Ipatupad ang system na ito para sa sarili mong branded na maikling link o maramihang pag-redirect.
3. Mag-eksperimento sa mga advanced na feature na aming tinalakay upang maiangkop ang system sa iyong mga partikular na pangangailangan.
4. Ibahagi ang iyong mga karanasan o magtanong sa seksyon ng mga komento sa ibaba. Ang iyong mga insight ay maaaring makatulong sa iba sa komunidad!
5. Para sa mas advanced na mga kaso ng paggamit o custom na pagpapatupad, isaalang-alang ang pakikipag-ugnayan sa isang eksperto sa Cloudflare Workers o serbisyo sa pagkonsulta.

Manatiling mausisa, patuloy na matuto, at huwag mag-atubiling itulak ang mga hangganan ng kung ano ang posible gamit ang mga tool tulad ng Cloudflare Workers.