Cloudflare Pages — Xây Dựng "Mặt Tiền" Cho Ứng Dụng (Frontend Hosting) 🏠¶
Cloudflare Pages Thực Chất Là Gì?¶
Hãy tưởng tượng Cloudflare Pages như một tủ trưng bày khổng lồ. Nhiệm vụ của nó là chứa các file giao diện web của bạn (HTML, CSS, JavaScript, hình ảnh) và copy chúng ra hơn 200 máy chủ (data centers) trên toàn thế giới.
Đặc điểm lớn nhất: Nó hoàn toàn không có máy chủ xử lý (serverless). Nó chỉ làm đúng một việc là đưa giao diện đến tay người dùng thật nhanh. Còn việc tính toán, xử lý logic (như tính tiền, đăng nhập) thì để anh bạn Cloudflare Workers lo.
Tại Sao Lại Chọn Pages Mà Không Phải Vercel Hay Netlify? 🤔¶
Nếu bạn từng nghe qua Vercel hay Netlify, thì đây là bảng so sánh sương sương:
| Tiêu chí | Cloudflare Pages | Vercel | Netlify |
|---|---|---|---|
| Băng thông (Lượt tải) | Không giới hạn (Thả ga) 🚀 | 100GB/tháng | 100GB/tháng |
| Số lần đẩy code (Builds) | 500 lần/tháng | 6000 phút/tháng | 300 phút/tháng |
| Gắn tên miền riêng | ✅ Miễn phí | ✅ Miễn phí | ✅ Miễn phí |
| Chơi chung với Database D1 | Mượt mà như người nhà | ❌ Khó khăn | ❌ Khó khăn |
| Chơi chung với Workers | Cùng hệ sinh thái | ❌ | ❌ |
Lý do "chốt hạ": Vì chúng ta đang dùng "combo" của Cloudflare (Pages làm giao diện, Workers làm não bộ, D1 làm kho dữ liệu). Dùng chung một nhà thì chúng tự hiểu nhau, bạn không cần phải cài đặt bảo mật hay chìa khóa lằng nhằng như khi dùng chéo các nền tảng.
Đẩy Web Lên Mạng (Deploy) 🚀¶
Lần Đầu Tiên (Tạo Dự Án)¶
Mở Terminal và gõ:
cd web
# Đóng gói code lại cho gọn nhẹ
npm run build
# Đẩy cục code vừa đóng gói (nằm trong thư mục dist) lên mạng
wrangler pages deploy dist --project-name quythuchi
# → Nó sẽ tự tạo một dự án tên "quythuchi" cho bạn
# → Code được bơm lên mạng lưới của Cloudflare
# → Xong xuôi nó sẽ quăng cho bạn cái link xịn xò: [https://quythuchi.pages.dev](https://quythuchi.pages.dev)
Những Lần Cập Nhật Sau¶
Đơn giản hóa đi, chỉ cần 1 dòng:
Chế Độ Rảnh Tay (Tự động qua Github)¶
Nếu bạn lười gõ lệnh, hãy cho nó tự động hóa:
- Vào Web quản lý của Cloudflare (Dashboard) → Pages → Chọn Connect to Git.
- Chọn kho chứa code (Repository) của bạn trên Github/Gitlab.
- Chỗ câu lệnh build (Build command) điền:
npm run build - Chỗ thư mục đầu ra (Build output) điền:
dist
→ Từ giờ, cứ mỗi lần bạn tải code mới lên Github, Cloudflare sẽ tự động biết ý và cập nhật lại trang web cho bạn. Quá nhàn!
Dẫn Đường Cho Web (SPA Routing và _redirects) 🚦¶
Vấn đề: Ứng dụng React của chúng ta là dạng SPA (Chỉ có duy nhất một file index.html). Nếu người dùng đang lướt web mà F5 (tải lại trang) ở cái link https://quythuchi.pages.dev/group/abc123, Cloudflare sẽ đi tìm cái file tên là abc123.html để hiển thị. Tìm không thấy, nó sẽ báo lỗi 404 to đùng!
Cách giải quyết:
Bạn cần ném cho Cloudflare một mảnh giấy chỉ đường (file _redirects), dặn nó là: "Ê, gặp đường link nào lạ thì cứ ném về trang chủ index.html cho tôi, thằng React bên trong sẽ tự biết cách chuyển đường".
Cách làm: Tạo file _redirects trong thư mục web/public:
(Số 200 nghĩa là: Báo cho trình duyệt biết mọi thứ vẫn Ổn, đừng đổi tên link trên thanh địa chỉ).
Gắn Tên Miền Đẹp (Custom Domain) 🏷️¶
Dùng link đuôi .pages.dev nghe hơi phèn? Lắp tên miền xịn vào thôi (ví dụ quythuchi.com):
- Vào Cloudflare Dashboard → Pages → Chọn dự án của bạn → Custom domains.
- Gõ tên miền bạn đã mua vào.
- Nếu tên miền bạn mua cũng quản lý bởi Cloudflare luôn thì nó tự làm mọi thứ trong vòng 1 nốt nhạc.
- Chứng chỉ bảo mật (ổ khóa SSL xanh xanh ở góc trình duyệt) cũng được Cloudflare tự cấp và tự gia hạn miễn phí.
Tính Năng Xem Trước (Preview Deployments) 👀¶
Mỗi khi bạn thử đẩy một đoạn code mới, Cloudflare không ném nó thẳng lên trang chính ngay đâu. Nó sẽ tạo ra một cái link "nháp" (Preview URL) để bạn xem thử:
Trang chính cho khách xem: [https://quythuchi.pages.dev](https://quythuchi.pages.dev)
Trang nháp cho bạn test: [https://abc123.quythuchi.pages.dev](https://abc123.quythuchi.pages.dev)
Test thấy ngon lành cành đào rồi mới chốt!
Biến Môi Trường (Environment Variables) 🔐¶
Đây là nơi bạn khai báo các đường link kết nối:
Vào Cloudflare Dashboard → Pages → Chọn dự án → Settings → Environment variables:
VITE_API_URL = [https://group-accounting-api.ttakashinn.workers.dev](https://group-accounting-api.ttakashinn.workers.dev)
VITE_TURNSTILE_SITE_KEY = 0x4AAA...
LƯU Ý CỰC KỲ QUAN TRỌNG VỀ CHỮ VITE_
Chỉ những biến nào bắt đầu bằng VITE_ thì React mới nhìn thấy và gom vào code giao diện. Giao diện thì ai cũng xem được. NÊN NHỚ: Tuyệt đối KHÔNG BAO GIỜ để chìa khóa bí mật (Secret keys, mật khẩu) ở đây nhé. Bị lộ ráng chịu!
Tại Sao Web Chạy Trên Pages Lại Nhanh Như Gió? ⚡¶
1. Chọn đường chim bay (Argo Smart Routing)¶
Cloudflare như một anh tài xế rành đường, biết chỗ nào đang tắc đường trên mạng (congestion) để đi đường vòng ngắn nhất đưa web đến tay người dùng.
2. Tiêu chuẩn mới nhất (HTTP/3 + QUIC)¶
Pages xài công nghệ truyền tải mới nhất (HTTP/3), giúp tải trang mượt mà ngay cả khi bạn xài 3G chập chờn trên điện thoại.
3. Trí nhớ siêu phàm (Caching)¶
Những file code khó hiểu có cái đuôi loằng ngoằng (ví dụ index-Bx7k9mNp.js) sẽ được Cloudflare nhớ (cache) hẳn 1 năm. Lần sau vào web không cần tải lại cục này nữa. Còn file khung index.html thì nó không bao giờ nhớ, để lỡ bạn có đổi giao diện thì khách sẽ luôn thấy cái mới nhất.
4. Báo trước để chuẩn bị (Early Hints)¶
Vừa mới kết nối vào web, server đã gửi ngay một "danh sách đi chợ" báo cho trình duyệt biết: "Ê tao đang tải trang nè, mày tranh thủ đi lấy cái ảnh A, file màu sắc B sẵn đi cho nhanh".
Tóm Lại: Pages và Workers — Khi Nào Xài Trò Gì? 🤹¶
Đừng nhầm lẫn vai trò của hai anh em nhà này nhé:
| Nhiệm vụ | Cloudflare Pages (Mặt tiền) | Cloudflare Workers (Não bộ) |
|---|---|---|
| Hiển thị giao diện, hình ảnh | ✅ Trùm mảng này | ❌ Đừng bắt nó làm |
| Xử lý tính toán, đăng nhập | ❌ Không biết làm | ✅ Bao thầu hết |
| Gọi vào cơ sở dữ liệu | Qua đường vòng | ✅ Chọc thẳng vào luôn |
| Câu lệnh đẩy code | wrangler pages deploy |
wrangler deploy |
Chốt lại cho dự án này: Chúng ta xài Pages để tải giao diện React (Mặt tiền), và Workers để nhận/xử lý các yêu cầu từ mặt tiền gửi xuống (Não bộ).