Trước đây, khi nghĩ đến việc deploy website đầy đủ (frontend và backend), tôi luôn mặc định chọn VPS phù hợp, cài đặt các dịch vụ cần thiết, rồi cấu hình tên miền. Kiến trúc này gần như là lựa chọn tự động trong đầu tôi, tôi không có và cũng không nghĩ tới phương án nào khác.
Gần đây, công việc yêu cầu tôi tìm giải pháp cho các website đơn giản nhưng cần tốc độ tải nhanh. Nên tôi đã tìm hiểu về các phương pháp để tối ưu tốc độ tải, may mắn trong lúc đó tôi thấy được vài serverless services hiện đại nên đã xem qua thử. Kết quả tôi chọn Cloudflare Workers để thử nghiệm trên blog này vì hệ sinh thái đầy đủ của nó và một phần vì tôi có thiện cảm với nền tảng này.
Dịch vụ serverless đã có khá lâu, nhưng nhược điểm chung là thời gian cold start quá dài nên trước đây chúng không phù hợp để tạo ra các website động, điều này đã mặc định trong đầu tôi khi có công việc liên quan đến triển khai website. Lần này quay lại tìm hiểu bất ngờ lớn nhất tôi nhận được là có vài dịch vụ serverless hiện này có cold start là… 0 giây, đây là điều làm tôi thấy hứng thú nhất và cũng làm thay đổi hoàn toàn suy nghĩ của tôi trước đó.
Nếu hồi trước các website nằm trên VPS, bây giờ nó sẽ nằm trên “cạnh” (edge) với Cloudflare Workers. Request của người dùng không còn phải đi qua Cloudflare rồi mới đến VPS, mà được xử lý ngay tại Cloudflare và trả về cho người dùng, điều này làm tốc độ tải trang tăng lên khá nhiều. Blog này có yêu cầu đơn giản: tốc độ cao và khả năng xử lý backend cho các API. Ví dụ như tính năng comment bạn thấy dưới bài viết này cần API để lưu và truy xuất dữ liệu từ D1 - là dịch vụ CSDL SQL của Cloudflare, hoặc tính năng tìm kiếm full-text cho các bài viết mà tôi có ý định triển khai cũng cần một api để làm việc giống vậy, tất nhiên CSDL sẽ khác với D1.
Trải nghiệm công nghệ mới luôn kích thích tôi nên tôi quyết định lần này sẽ tiếp tục thử công nghệ mới. Tôi đã nghe nhiều về các framework SSR hiện đại như Next.js và Nuxt.js nhưng chưa từng làm website hoàn chỉnh nào với chúng. Lần này tôi quyết định tìm framework SSR hiện đại nhưng phải đơn giản hơn nên Astro là lựa chọn không thể phù hợp hơn cho blog này.
Trong Astro, việc tạo một page mới chỉ cần tạo file *.astro với nội dung đơn giản như sau:
---
// src/index.astro
const pageTitle = "javascript ở đây"
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>{pageTitle}</title>
</head>
<body>
<a href="/">Trang chủ</a>
</body>
</html>Còn nếu muốn thếm một api endpoint chỉ cần tạo file *.ts với nội dung:
// src/api/comments.ts
import type { APIRoute } from 'astro';
export const GET: APIRoute = async ({ request }) => {
try {
const comments = getPostComments(new URL(request.url).searchParams.get('post-slug'));
return new Response(
JSON.stringify({ comments }),
{ headers: { 'Content-Type': 'application/json' } }
);
} catch (error: any) {
return new Response(
JSON.stringify({ error: 'Failed to fetch comments', message: error?.message }),
{ status: 500, headers: { 'Content-Type': 'application/json' } }
);
}
};Khi có thay đổi hoặc viết bài mới tôi chỉ cần push code lên gitlab, cloudflare workers sẽ tự động clone source mới về build và deploy. Mọi thứ rất đơn giản.
Kết quả là website bạn đang thấy đây được xây dựng bằng Astro framework chạy trên nền tảng edge computing là Cloudflare Workers. Website không còn nằm trên VPS, và request không còn phải đi qua Cloudflare rồi mới đến backend vì bây giờ backend đã nằm ngay trên Cloudflare. Khác với trước kia là tôi biết rõ website mình nằm ở đâu, giờ tôi chỉ biết nó nằm trên Cloudflare, còn instance được tạo ra ở đâu phụ thuộc vào vị trí truy cập của người dùng.
Việc xây dựng website này là một phần nghiên cứu công nghệ để hỗ trợ cho công việc của tôi. Thật may lần này tôi đã bội thu vì nó đã hoàn toàn thay đổi suy nghĩ của tôi về cách triển khai website truyền thống, mở ra cho tôi một hướng khác hoàn toàn.
Bình luận