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.

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

npx wrangler pages project create chuyenchon-web --production-branch main   # lần đầu
npx wrangler pages deploy dist --project-name chuyenchon-web

Trong dashboard Cloudflare Pages → Custom domains, thêm www.chuyenchon.com và chuyển hướng chuyenchon.com sang www bằng một Redirect Rule.

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 pages project create chuyenchon-docs --production-branch main   # lần đầu
npx wrangler pages deploy .vitepress/dist --project-name chuyenchon-docs

Thêm custom domain docs.chuyenchon.com trong dashboard của project đó.

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.