|
| Hướng dẫn cách tạo Short Link bằng CloudFlare Worker cho Plus UI 3.0 |
Chào các bạn! 👋 Hôm nay mình sẽ hướng dẫn cách tạo Short Link sử dụng Cloudflare Worker cho Plus UI 3.0. Giải pháp này không chỉ miễn phí mà còn cực kỳ hiệu quả với độ trễ thấp. Let's dive in! 🚀
Tại sao chọn Cloudflare Worker?
- Miễn phí với 100,000 request/ngày
- Độ trễ cực thấp nhờ edge network của Cloudflare
- Không cần server riêng
- Dễ dàng tích hợp với KV Storage
- Bảo mật cao
Hướng dẫn tạo Shortlink trên Plus UI 3.0
Hướng dẫn này sẽ có 2 phần chính, phần đầu là tạo trang Shortlink và sau đó là tạo Shortlink API với CloudFlare Worker. Việc tạo trang shortlink sẽ chỉ áp dụng chính đối với Plus UI 3.0, tuy nhiên cũng có thể được áp dụng với bất kì website nào khác đi kèm với sự tùy chỉnh của CSS. Trước khi bắt đầu, bạn có thể xem qua tool hoặc demo sau nhé
Shortlink Tool Xem bản demoWarning!
Trong bài viết này, mình có sử dụng CloudFlare để quản lý DNS, source code cũng để phục vụ điều đó.
Nếu như bạn không dùng CloudFlare để quản lý, thì cần thêm 1 chút thay đổi nhổ về script trong page và worker nhé.
Nếu như bạn không biết nên sửa như thế nào, thì comment cho mình biết nhé, mình sẽ hỗ trợ hết mình.
Tạo trang Shortlink
Trước tiên, hãy tạo một trang blogger, hoặc cũng có thể là một bài đăng, đoạn code sau đều hoạt động tốt. Hãy làm theo các bước sau:
- Trong chế độ xem trình soạn thảo trang, nhấp vào biểu tượng ở góc dưới bên trái của tiêu đề.
- Hai tùy chọn sẽ xuất hiện: HTML view and Compose view.
- Lựa chọn 'HTML View'.
- Sao chép và dán đoạn mã sau
<div class="inF" data-message="A valid URL is required."> <input type='text' name='originalShortLink' id='originalShortLink' placeholder=' '/> <label for='originalShortLink'>Enter Link here</label> </div> <div class="inF"> <input type='text' name='shortenLink' id='shortenLink' readonly="" placeholder=' '/> <label for='shortenLink'>Shorten Link</label> </div> <button class="ciB" id="shortLinkButton">Shorten Link</button> <button class="ciB hidden" id="shortLinkCopy">Copy</button> <button class="ciB hidden" id="shortLinkView">View</button> <button class="ciB hidden" id="shortLinkClear">Clear</button> <script defer> /*<![CDATA[*/ const settings={shortLinkApiEndpoint:"/api/shorten",successShortLinkNotif:"<i class='icon check'></i>Link is shortened, Click on Copy",blankShortLinkNotif:"<i class='icon warn'></i>Enter link to short!",invalidLinkNotif:"<i class='icon warn'></i>Please enter a valid URL!",copyNotification:"<i class='icon clipboard'></i>Copied to clipboard!"},originalShortLink=document.getElementById("originalShortLink"),shortenLink=document.getElementById("shortenLink"),shortLinkButton=document.getElementById("shortLinkButton"),shortLinkCopy=document.getElementById("shortLinkCopy"),shortLinkView=document.getElementById("shortLinkView"),shortLinkClear=document.getElementById("shortLinkClear");function makeAbsoluteUrl(t){return`${getBaseUrl()}${t}`}async function shortenURL(t){try{let i=await fetch(makeAbsoluteUrl(settings.shortLinkApiEndpoint),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({url:t})});if(!i.ok){let n=await i.text();throw Error(n)}return(await i.json()).shortUrl}catch(e){throw e}}shortLinkButton.addEventListener("click",async()=>{let t=originalShortLink.value.trim();if(!t){PU.tNtf(settings.blankShortLinkNotif);return}if(!isValidURL(t)){PU.tNtf(settings.invalidLinkNotif);return}try{shortLinkButton.disabled=!0,shortLinkButton.textContent="Processing...";let i=await shortenURL(t);shortenLink.value=i,shortLinkCopy.classList.remove("hidden"),shortLinkView.classList.remove("hidden"),shortLinkClear.classList.remove("hidden"),shortLinkView.onclick=function(){window.open(i,"_blank")},PU.tNtf(settings.successShortLinkNotif)}catch(n){PU.tNtf(n.message)}finally{shortLinkButton.disabled=!1,shortLinkButton.textContent="Shorten Link"}}),shortLinkCopy.addEventListener("click",async()=>{try{await navigator.clipboard.writeText(shortenLink.value)}catch(t){let i=getSelection();i.removeAllRanges(),shortenLink.select(),document.execCommand("copy"),i.removeAllRanges()}PU.tNtf(settings.copyNotification)}),shortLinkClear.addEventListener("click",async()=>{originalShortLink.value="",shortenLink.value="",shortLinkCopy.classList.add("hidden"),shortLinkView.classList.add("hidden"),shortLinkClear.classList.add("hidden")}); /*]]>*/ </script> - Bạn nên thêm đoạn mô tả trang phía trên biểu mẫu nhé.
Tạo Shortlink API với CloudFlare Worker
Đầu tiên, bạn cần:
- Đăng ký tài khoản tại cloudflare.com
- Tạo Worker mới trong mục "Workers & Pages"
- Tạo KV Namespace để lưu trữ các short link
Code cho Worker
export default {
async fetch(request, env) {
const url = new URL(request.url);
const path = url.pathname;
// Shortlink
if (path === '/api/shorten') {
const body = await request.json();
if (!body.url) {
return new Response('Missing URL in request body', {
status: 400,
headers: {'Content-Type': 'application/json'}
});
}
if (!isValidURL(body.url)) {
return new Response('URL is invalid', {
status: 400,
headers: {'Content-Type': 'application/json'}
});
}
// create random short code
const shortCode = generateShortCode(6);
// Save to KV storage
await env.NOCOEM.put(shortCode, body.url);
// return short URL
const shortUrl = `${url.origin}/s/${shortCode}`;
return new Response(JSON.stringify({
shortUrl,
originalUrl: body.url,
shortCode
}), {
headers: {'Content-Type': 'application/json'}
});
}
// Try to get short link
if (path.startsWith('/s/')) {
const matches = path.split("/")
const shortCode = matches[2];
if (shortCode) {
// get original URL từ KV storage
const originalUrl = await env.NOCOEM.get(shortCode);
if (originalUrl) {
// Redirect đến original URL
return Response.redirect(originalUrl, 301);
}
}
}
return Response.redirect(env.BLOGGER.url + path);
}
}
function isValidURL(str) {
try {
new URL(str);
return true;
} catch (err) {
return false;
}
}
function generateShortCode(length = 6) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result;
}Thêm domain và route cho Worker
- Truy cập màn hình Settings của Worker
- Tại mục Domains & Routes thực hiện thêm Route mới
- Tại Zone, lựa chọn domain của bạn, thêm route cho POST API với format như sau:
*.your-domain/api/shorten - Thêm route với để thực hiện redirect:
*.your-domain/s/*
Cập nhật biến môi trường cho Worker
- Truy cập màn hình Settings của Worker
- Tại mục Variables and Secrets thực hiện tạo biến môi trường mới
- Chọn Type: Json, Name: BLOGGER, Value:
{"url":"https://www.thuandv.top"}(thay bằng blogger url của bạn)
Tạo ứng dụng lưu trữ dữ liệu KV
- Tại drop down của Workers & Pages lựa chọn KV
- Click button Create namespace, nhập tên namespace bạn muốn tạo, tên này sẽ được sử dụng trong worker.js. Ở đây của mình là NOCOEM
Hoàn thành!
Kết quả
Ta sẽ được một form như sau
Lời kết
Vậy là chúng ta đã hoàn thành việc tạo Short Link Service sử dụng Cloudflare Worker cho Plus UI 3.0! 🎉
Một số ý tưởng phát triển thêm:
- Tạo dashboard quản lý links
- Thêm tính năng authentication
- Tích hợp với các service analytics
- Tạo API để quản lý links hàng loạt
Hi vọng bài hướng dẫn này giúp ích cho các bạn! Nếu có thắc mắc gì, đừng ngại comment bên dưới nhé! Chúc các bạn code vui!
