Bức Tranh Toàn Cảnh (Tổng Quan Kiến Trúc) 🗺️¶

Mục tiêu: Sau khi đọc xong phần này, bạn sẽ hiểu hệ thống của chúng ta hoạt động ra sao, tại sao lại chọn những công cụ này, và đủ tự tin để tự ráp một ứng dụng tương tự từ đầu. Đừng lo nếu có từ lạ, chúng ta sẽ đi từng bước!

Bức Tranh Tổng Thể 🖼️¶

Dự án group-accounting (Quản lý quỹ nhóm) này có một điểm rất xịn: Nó chạy hoàn toàn trên mạng lưới Edge của Cloudflare — nghĩa là chúng ta "bái bai" các máy chủ (server) truyền thống phải cắm điện chạy ù ù 24/7.

Tưởng tượng nó hoạt động thế này:

Người dùng (Trình duyệt của bạn)
        │
        │  Vào web (HTTPS)
        ▼
┌─────────────────────────────────────┐
│    Cloudflare Pages (Kho chứa Web)  │
│    Chỉ chứa file HTML/JS (React)    │
│    quythuchi.pages.dev              │
└──────────────┬──────────────────────┘
               │  Cần dữ liệu? Xin API (fetch)
               ▼
┌─────────────────────────────────────┐
│   Cloudflare Workers (Bộ não xử lý) │
│   Dùng Hono Framework cho lẹ        │
│   group-accounting-api.workers.dev  │
└──────────────┬──────────────────────┘
               │  Hỏi cơ sở dữ liệu
               ▼
┌─────────────────────────────────────┐
│      Cloudflare D1 (Kho Dữ Liệu)    │
│      Lưu bằng SQLite siêu nhẹ       │
│      group-accounting-db            │
└─────────────────────────────────────┘

Câu chuyện của một cú click (Luồng Request Cơ Bản)¶

Bạn mở trình duyệt gõ địa chỉ web → Cloudflare Pages ném ngay cho bạn bộ khung trang web (đã được đóng gói sẵn).
Trang web (viết bằng React) thức dậy, tìm xem bạn có giữ "thẻ bài" (JWT) trong máy không để biết bạn đã đăng nhập chưa.
Trang web cần lấy số dư quỹ? Nó gọi fetch() lên Bộ não (Worker API) và giơ thẻ bài ra: "Ê, cho xin dữ liệu, tôi có thẻ này!".
Worker cầm thẻ kiểm tra xem đúng đồ thật không, nếu OK thì chui vào Kho dữ liệu (D1) moi thông tin ra, gói thành chuẩn JSON gọn gàng rồi trả về.
Trang web nhận được dữ liệu, tô vẽ lên màn hình cho bạn xem. Vậy là xong!

Tại Sao Lại Chọn Bộ Công Cụ Này? 🤔¶

Đây là phần quan trọng nhất. Thử so sánh cách làm truyền thống với cách của chúng ta nhé:

Kiểu Truyền Thống (Thuê máy chủ VPS + Node.js)¶

User → Cổng bảo vệ (Nginx) → Máy chủ (Node.js) → Kho dữ liệu (PostgreSQL)
                                    ↑
                           Tốn $5-20/tháng thuê nhà
                      (Phải tự trông coi, quét dọn, bảo vệ)

Nỗi khổ:

Bạn phải trả tiền thuê hàng tháng dù web chả có ma nào vào.
Phải tự học cách cài đặt bảo mật, chứng chỉ SSL, phần mềm duy trì server.
Lỡ server bị sập và khởi động lại thì mất thời gian chờ (cold start).
Tự nhiên web nổi tiếng, 10 ngàn người vào cùng lúc → Sập server vì không gánh nổi.
Phải tự lo copy (backup) dữ liệu đề phòng mất mát.

Kiểu Cloudflare (Dự án này đang dùng)¶

User → Trạm xử lý Cloudflare ở gần user nhất (Edge) → Kho dữ liệu D1
                  ↑
          Chỉ tính tiền khi có người dùng
          Được xài chùa (Free): 100,000 lượt/ngày

Sướng ở đâu:

Cực kỳ rộng rãi cho túi tiền: Miễn phí 100k lượt gọi/ngày, cho hẳn 1GB lưu dữ liệu.
Không lo quản lý (Zero DevOps): Cloudflare lo hết từ máy móc đến bảo mật. Bạn chỉ việc tập trung viết code.
Nhanh như điện: Bạn ở VN thì code chạy ở trạm VN, bạn ở Mỹ thì code chạy ở trạm Mỹ.
Tự động giãn nở: 1 người hay 10 ngàn người vào cùng lúc thì hệ thống tự động phình to ra để gánh, không lo bị sập.
Đẩy code lên mạng (Deploy) siêu dễ: Gõ đúng một lệnh wrangler deploy là xong.

Đánh đổi (Cái gì cũng có giá của nó):

Thời gian xử lý bị giới hạn (CPU time ≤ 10ms/request nếu xài gói Free).
Không làm được mấy trò chờ đợi lâu (như render video nặng, tính toán phức tạp).
D1 (SQLite) rất tốt, nhưng nếu dự án đòi hỏi phức tạp cực độ thì người ta vẫn sẽ cần cơ sở dữ liệu xịn sò hơn như PostgreSQL.
Trót yêu rồi thì bạn hơi khó chuyển nhà sang nền tảng khác ngoài Cloudflare.

Chốt lại

Bộ công cụ này là "chân ái" cho các dự án làm thêm (side project), startup mới khởi nghiệp, hoặc ứng dụng có lượng traffic vừa phải — nơi mà tiết kiệm công sức và chi phí là ưu tiên hàng đầu!

Đội Hình Ra Sân (Tech Stack Map) ⚽¶

Tầng (Layer)	Công cụ	Vai trò (Giải thích dân dã)
Bộ não Backend	Cloudflare Workers	Nơi chạy code xử lý trên môi trường edge
Khung Backend	Hono v4	Chia tuyến đường (router) cho API siêu nhẹ, siêu nhanh
Kho dữ liệu	Cloudflare D1 (SQLite)	Nơi lưu trữ thông tin mượt mà
Bảo mật / Xác thực	JWT + PBKDF2	Làm thẻ thông hành (JWT) và băm nát mật khẩu để bảo vệ user
Chống Bot	Cloudflare Turnstile	Đánh dấu "Tôi không phải người máy" để chống bị spam
Nơi để Frontend	Cloudflare Pages	Nơi chứa file giao diện web của bạn
Đóng gói code	Vite + SWC	Gom code, dịch code cực nhanh cho trình duyệt đọc
Dựng Giao diện	React 18	Vẽ các nút bấm, danh sách lên màn hình
Ngôn ngữ	TypeScript	Cảnh báo lỗi sai ngay lúc bạn đang gõ code
Chuyển trang	React Router v6	Bấm link qua lại mà không bị tải lại cả trang web
Lấy Dữ liệu	TanStack Query v5	Gọi API, tự động lưu đệm (cache) cho những lần sau
Lưu trạng thái	Zustand	Nhớ tạm những thứ như: Đang mở tab nào, đã đăng nhập chưa
Trang trí (CSS)	Tailwind CSS v3	Tô màu, chỉnh kích thước siêu tốc bằng các class có sẵn
Công cụ lệnh	Wrangler	Gõ lệnh để đẩy code lên server của Cloudflare

Khi Nào Thì Nên "Bê" Nguyên Đội Hình Này Đi Chỗ Khác? ⚖️¶

Tiêu chí	Quất luôn (Phù hợp)	Quay xe (Không phù hợp)
Lượng người dùng	Dưới 1 triệu lượt gọi/tháng	Siêu to khổng lồ (Sẽ bắt đầu tốn tiền)
Đội ngũ	Làm một mình hoặc team nhỏ (1-5 người)	Team rất lớn, cần quy trình kiến trúc cực chuẩn
Tiền bạc	Ngân sách bằng 0 đến rất eo hẹp	Tiền không thành vấn đề, cần server xịn đảm bảo 99.99% không sập
Dữ liệu	Lưu trữ đơn giản (Đọc/Thêm/Sửa/Xóa)	Dữ liệu chằng chịt, cần dùng nhiều tính năng phức tạp của SQL
Xử lý	Chạy chớp nhoáng, trả kết quả liền	Công việc tính toán rườm rà, chạy ngầm hàng giờ liền
Hệ sinh thái	Thoải mái với việc dính chặt với Cloudflare	Muốn linh hoạt: nay dùng cloud này, mai bưng sang cloud khác

Tóm lại: Lựa chọn này sinh ra để dành cho: Các dự án cá nhân, làm thử nghiệm (MVP), startup giai đoạn đầu, công cụ nội bộ — những nơi bạn muốn làm nhanh, chạy nhanh mà túi tiền vẫn nguyên vẹn!