Workers — backend trong một file

Mã chạy phía máy chủ, không cần máy chủ. Dựng Worker đầu tiên, phục vụ cả web tĩnh lẫn API, và hiểu giới hạn thật của nó.

Đây là bài mở ra Cấp 3. Từ đây app của bạn có phía máy chủ: lưu dữ liệu chung, đăng nhập thật, giữ khóa bí mật, gửi email.

Workers là gì, nói cho người không chuyên

Pages trả file có sẵn. Workers chạy mã của bạn mỗi khi có người gọi tới, trên máy chủ Cloudflare gần người dùng nhất.

Người dùng ở Thanh Hóa gọi https://app.cua-ban.com/api/don-hang
        │
        ▼
Cloudflare nhận tại điểm mạng gần nhất (Hà Nội / Singapore)
        │
        ▼
Mã của bạn chạy NGAY TẠI ĐÓ (vài milli-giây)
        │
        ▼
Trả kết quả

Không có máy chủ nào của bạn phải bật 24/7. Không có hóa đơn VPS. Không ai phải vá hệ điều hành. Không có chuyện "máy chủ đầy ổ cứng lúc 2 giờ sáng".

Cái giá của việc đó — và bạn phải biết trước:

Mô hình đúng trong đầu: một hàm, nhận một request, trả một response, và quên hết.

Worker đầu tiên

cd C:\NVAI\Claude
npm create cloudflare@latest app-don-hang

Chọn: Hello World example → Worker only → TypeScript hay JavaScript đều được (giáo trình dùng JavaScript cho dễ đọc) → Git: Yes → Deploy: No (ta deploy tay để hiểu).

Mở src/index.js, nó đại khái là:

export default {
  async fetch(request, env, ctx) {
    return new Response("Xin chao!");
  },
};

Ba tham số, học một lần dùng mãi:

• request — ai gọi, gọi đường nào, mang gì theo.
• env — bí mật và các "binding": cơ sở dữ liệu, kho tệp, biến cấu hình.
• ctx — điều khiển vòng đời (ctx.waitUntil — xem cảnh báo ở bài Cron).

Chạy thử tại máy:

npx wrangler dev

Mở http://localhost:8787. Sửa chữ trong file, lưu — nó tự nạp lại.

Đưa lên mạng:

npx wrangler deploy

Ra link kiểu app-don-hang.ten-ban.workers.dev. Đó là backend của bạn, đang chạy thật, miễn phí.

Định tuyến: một Worker, nhiều đường

Một Worker thường phục vụ cả web lẫn API. Mẫu định tuyến tối giản, dùng được cho app thật:

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    const p = url.pathname;

    // ---- API ----
    if (p.startsWith("/api/")) {
      try {
        if (p === "/api/don-hang" && request.method === "GET")  return await dsDonHang(request, env);
        if (p === "/api/don-hang" && request.method === "POST") return await themDonHang(request, env);
        return json({ loi: "Khong co duong nay" }, 404);
      } catch (e) {
        // Không bao giờ để lỗi lọt ra thành trang lỗi trắng của Cloudflare
        console.log("Loi API:", p, e.message);
        return json({ loi: "Loi he thong" }, 500);
      }
    }

    // ---- Trang web tĩnh ----
    return env.ASSETS.fetch(request);
  },
};

function json(obj, status = 200) {
  return new Response(JSON.stringify(obj), {
    status,
    headers: { "content-type": "application/json; charset=utf-8" },
  });
}

Bốn điểm trong 25 dòng này, đều là kinh nghiệm trả giá:

1. try/catch bọc cả nhánh API. Không có nó, một lỗi nhỏ trả về trang lỗi của Cloudflare và người dùng thấy màn hình lạ, còn bạn không biết lỗi gì.
2. Trả lỗi dạng JSON có cấu trúc, để phía trình duyệt hiện được thông báo tử tế.
3. charset=utf-8 trong header. Thiếu là chữ tiếng Việt vỡ ở một số trình duyệt.
4. Thông báo lỗi trả cho người dùng không tiết lộ chi tiết nội bộ — chi tiết đi vào console.log, bạn xem bằng wrangler tail.

Phục vụ web tĩnh từ Worker

Đây là cách dựng app thật: một Worker vừa trả HTML vừa có API. Trong wrangler.toml:

name = "app-don-hang"
main = "src/index.js"
compatibility_date = "2026-01-01"

[assets]
directory = "./public"
binding = "ASSETS"

Đặt index.html vào public/. Giờ https://app.../ trả trang web, https://app.../api/... chạy mã của bạn. Một tên miền, một project, không có chuyện CORS.

Xem log: wrangler tail

Đây là "Console" của phía máy chủ. Mở một cửa sổ riêng, để nó chạy trong lúc bạn bấm thử app:

npx wrangler tail --format=pretty

Mỗi request hiện một dòng, kèm mọi console.log và lỗi. Không có công cụ này thì phía máy chủ là một cái hộp đen.

Biến toàn cục và nhiều phiên bản chạy song song

Mã này trông đúng và là một cái bẫy kinh điển:

let soLuot = 0;                      // SAI nếu dùng để đếm thật

export default {
  async fetch(request, env) {
    soLuot++;
    return new Response("Luot thu " + soLuot);
  },
};

Cloudflare chạy mã của bạn trong nhiều bản độc lập, ở nhiều điểm mạng, và dọn chúng đi khi rảnh. Mỗi bản có soLuot riêng, bắt đầu từ 0. Con số bạn thấy là vô nghĩa.

Hệ quả nghiêm trọng hơn con số sai: mọi cơ chế "chỉ chạy mỗi 10 phút một lần" dựa trên biến toàn cục đều vỡ. Lúc tải cao, Cloudflare bung thêm bản mới, mỗi bản tưởng mình là lần đầu → việc định kỳ chạy dày hơn hàng chục lần. Chuyện này đã gây treo app thật.

Luật: cần nhớ gì giữa các lượt thì lưu vào D1 / KV / Durable Object, đừng tin biến trong bộ nhớ.

Giới hạn gói miễn phí — con số cần biết

Điểm hay bị hiểu sai: thời gian chờ không tính là CPU. Một request chờ D1 trả về 2 giây vẫn có thể chỉ dùng 3 ms CPU. Cái tốn CPU là tính toán: vòng lặp lớn, xử lý ảnh, mã hóa.

Hạn mức và giá đổi theo thời gian — kiểm lại tại developers.cloudflare.com/workers/platform/limits trước khi dựa vào con số nào.

Dựng một Cloudflare Worker trong thư mục này:

- Phục vụ web tĩnh từ ./public qua binding ASSETS.
- API dưới tiền tố /api/, chỉ 2 đường để bắt đầu:
  GET  /api/don-hang       → trả danh sách (tạm thời trả mảng gán cứng)
  POST /api/don-hang       → nhận {ten, sdt, mon, soLuong}, kiểm dữ liệu,
                             tạm thời chỉ console.log rồi trả {ok:true}
- Bọc try/catch cho cả nhánh API, lỗi trả JSON {loi:"..."}, không để lộ
  chi tiết nội bộ cho người dùng.
- Mọi response JSON có charset=utf-8.
- Chưa dùng cơ sở dữ liệu, chưa đăng nhập — sẽ thêm ở bước sau.
- wrangler.toml đầy đủ.

Xong rồi chạy `npx wrangler dev` và tự kiểm bằng curl cả hai đường,
báo cho tôi kết quả thật.