Sơ đồ Vibe Stack — tám lớp

Toàn bộ hệ thống trên một trang: từ lúc khách gõ tên miền đến lúc góp ý của họ thành việc trong backlog. Bài này là tấm bản đồ bạn sẽ mở lại nhiều lần.

Bốn bài trước nói vì sao. Bài này cho bạn hình. Tám lớp dưới đây là toàn bộ những gì bạn sẽ dựng trong 90 ngày — và mọi bài sau đều nằm ở một ô nào đó trong sơ đồ này.

Đọc sơ đồ theo đường đi của một lượt truy cập

Sáu bước, mỗi bước một lớp:

1. Khách gõ tên miền → DNS trả về địa chỉ. (Lớp 1 — Tên miền & DNS)
2. Cloudflare nhận tại điểm mạng gần nhất, bật HTTPS, lọc tấn công, trả file đã nằm sẵn trong bộ đệm nếu có.
3. Pages trả giao diện; nếu cần dữ liệu thì trình duyệt gọi tiếp một đường /api/….
4. Workers chạy mã của bạn — kiểm quyền, đọc/ghi dữ liệu. (Lớp 2 — Workers)
5. Workers đọc/ghi D1, Durable Objects hoặc R2 rồi trả kết quả. (Lớp 3 — D1, KV & R2)
6. Người dùng thấy kết quả. Toàn bộ chặng này thường mất 30–300 ms.

Và đường đi của một thay đổi thì ngược lại, qua lớp 4: bạn ra yêu cầu → AI viết → commit lên GitHub → Pull Request → test → link preview → bạn duyệt → Cloudflare nhận bản mới.

Bản rút gọn — đọc được trên điện thoại

Ba luật nằm ngoài mọi ô

Sơ đồ có ba dòng chữ nhỏ, và chúng quan trọng hơn vẻ ngoài:

AI chỉ đề xuất, người duyệt rồi mới deploy. · Khóa bí mật không để trong mã. · Lỗi thì rollback ngay.

Ba luật này là ranh giới của cả giáo trình:

• Luật 1 — không có đường nào từ AI đi thẳng ra bản thật. Mọi thay đổi phải qua cổng kiểm soát ở lớp 4. Đây là lý do bài GitHub Actions dựng cổng duyệt, và lý do quy trình preview → test → deploy là bài dài nhất Cấp 5.
• Luật 2 — AI không giữ khóa. Khóa nằm ở lớp 6, trong Secrets, không nằm trong mã nguồn mà AI đọc được. Bí mật và token.
• Luật 3 — hỏng thì khôi phục trước, điều tra sau. Một lệnh rollback, rồi mới đi tìm nguyên nhân. Người mới hay làm ngược và kéo dài thời gian app chết.

Phân vai ở lớp 5 — xanh và vàng

Lớp 5 là lớp duy nhất nói về con người. Nó chia việc thành hai loại, và cách chia này là kết luận từ thực tế, không phải quan điểm:

• AI làm tốt — giao thẳng, bạn chỉ duyệt kết quả
• Cần chuyên gia — AI làm được 70%, 30% còn lại phải có người biết nghề

"Chuyên gia" ở đây không nhất thiết là người khác. Phần lớn người đọc giáo trình này sẽ trở thành chuyên gia ở ba ô vàng — đó chính là nội dung Cấp 3 đến Cấp 5. Bài sau mổ kỹ từng ô.

AI Router — ô tùy chọn, và vì sao nó đáng nghĩ tới

Trong sơ đồ, AI Router là ô duy nhất ghi "tùy chọn". Nó là lớp điều phối: thay vì bạn tự chuyển tay việc giữa Cloudflare, nơi viết mã, GitHub, vận hành và phản hồi, có một chỗ đứng giữa làm việc đó.

Hai dòng chữ nhỏ dưới ô đó mới là phần quan trọng:

Đổi nhà AI được · AI dừng vẫn làm tay được.

Đây là nguyên tắc chống phụ thuộc, và nó đáng giá hơn bản thân cái router:

• Đừng để quy trình của bạn chỉ chạy được với một nhà cung cấp AI. Mã nguồn nằm trên GitHub, hạ tầng ở Cloudflare, luật nằm trong CLAUDE.md dạng chữ — cả ba đều đọc được bằng mắt người. Hôm nào đổi công cụ AI, bạn mang chúng đi theo.
• Mọi việc AI làm phải có đường làm tay tương đương. Deploy bằng một lệnh wrangler, không phải bằng một nút bấm chỉ tồn tại trong một công cụ. Test có script chạy được từ dòng lệnh. Nếu ngày mai không còn AI, app của bạn vẫn vận hành được — chậm hơn, nhưng không chết.

Với người mới: bỏ qua ô này. Nó chỉ đáng dựng khi bạn đã có nhiều app và thấy mình lặp lại cùng một chuỗi thao tác hằng ngày — tức là từ Cấp 6.

Đọc wrangler.toml, package.json và cấu hình deploy của project này,
rồi liệt kê thành bảng 8 lớp theo đúng khuôn dưới đây. Với mỗi lớp,
ghi: đang dùng gì (tên thật trong cấu hình), hay CHƯA CÓ.

1 Truy cập (tên miền, DNS, HTTPS, CDN, WAF)
2 Hạ tầng (Pages / Workers)
3 Lưu trữ (D1 / Durable Objects / R2 / KV)
4 Phát triển (repo, PR, CI, link preview, luật riêng)
5 Phân vai (ai làm phần nào)
6 Vận hành (đăng nhập, khóa bí mật, giám sát, sao lưu)
7 Chất lượng (Web Vitals, SEO, analytics, dễ truy cập)
8 Phản hồi (chỗ nhận lỗi và góp ý)

Chỉ ghi những gì ĐỌC ĐƯỢC trong cấu hình. Không đoán, không khuyên.