Triển khai

Ba sản phẩm triển khai độc lập: API Worker, website và tài liệu.

Chuẩn bị một lần

npx wrangler login

Tên miền chuyenchon.com phải đã nằm trong tài khoản Cloudflare (đã trỏ nameserver).

1. Cơ sở dữ liệu D1

cd chuyenchon.com/apps/api
npx wrangler d1 create chuyenchon

Chép database_id in ra vào wrangler.toml, thay chỗ REPLACE_WITH_D1_DATABASE_ID.

pnpm db:migrate:remote   # chạy migration trên D1 thật
pnpm db:seed:remote      # nạp dữ liệu mẫu (bỏ qua nếu đã có dữ liệu thật)

2. API Gateway

cd chuyenchon.com/apps/api
npx wrangler secret put ADMIN_TOKEN     # dán một chuỗi ngẫu nhiên dài
pnpm deploy

Sau lần deploy đầu, mở khối routes trong wrangler.toml:

routes = [
  { pattern = "api.chuyenchon.com", custom_domain = true }
]

rồi pnpm deploy lại. Cloudflare tự tạo bản ghi DNS và cấp chứng chỉ.

Kiểm tra:

curl https://api.chuyenchon.com/health

3. Website

Bước build gọi API thật để prerender, nên API phải hoạt động trước.

Website chạy dưới dạng Worker phục vụ tài sản tĩnh (khai báo [assets] trong apps/web/wrangler.toml) thay vì Cloudflare Pages — nhờ vậy wrangler deploy tự tạo bản ghi DNS và chứng chỉ cho custom domain, không cần thao tác dashboard.

cd chuyenchon.com/apps/web
VITE_API_BASE=https://api.chuyenchon.com \
VITE_SITE_URL=https://www.chuyenchon.com \
pnpm build

npx wrangler deploy

wrangler.toml đã khai báo hai custom domain www.chuyenchon.com và chuyenchon.com; SPA fallback do not_found_handling = "single-page-application" đảm nhiệm (dự án không dùng file _redirects).

Kiểm tra sau khi deploy

curl -s https://www.chuyenchon.com/truong/chuyen-khtn | grep '<title>'
curl -s https://www.chuyenchon.com/sitemap.xml | head

Nếu tiêu đề là tiêu đề trang chủ thay vì tên trường, nghĩa là trang chưa được prerender — kiểm tra log của bước build.

4. Tài liệu

cd docs.chuyenchon.com
pnpm build
npx wrangler deploy

Tài liệu cũng là Worker tài sản tĩnh; custom domain docs.chuyenchon.com khai báo sẵn trong docs.chuyenchon.com/wrangler.toml.

Thứ tự triển khai

Luôn theo thứ tự D1 → API → Web. Website build ngược lên API, nên deploy web trước khi API sẵn sàng sẽ cho ra các trang tĩnh rỗng dữ liệu.

CORS

Khi đổi tên miền, cập nhật ALLOWED_ORIGINS trong apps/api/wrangler.toml rồi deploy lại Worker. Quên bước này thì website tải được HTML tĩnh nhưng mọi thao tác cần dữ liệu mới sẽ im lặng thất bại.