Deploy app bằng Claude Code lên Vercel & Cloudflare (2026)

Deploy app bằng Claude Code là gì? Nó tự deploy được không?

Nếu bạn vừa dùng Claude Code build xong một app Next.js hay một trang tĩnh và giờ muốn đưa nó lên mạng, tin tốt là: bạn không cần rời khỏi terminal. Deploy app bằng Claude Code đơn giản là để nó chạy các lệnh shell thay bạn - cài CLI của nền tảng, đăng nhập, chạy build, đẩy code lên, rồi đọc log để phát hiện và sửa lỗi theo vòng lặp.

Điểm mấu chốt: Claude Code chạy được lệnh terminal thật. Nó không mô phỏng. Khi bạn bảo "deploy dự án này lên Vercel", nó thực sự gọi vercel --prod, chờ kết quả, và nếu build fail thì đọc thông báo lỗi rồi đề xuất fix. Đây chính là thứ khiến quy trình khác hẳn việc copy-paste lệnh từ một bài blog. Nếu bạn còn mới với công cụ này, xem trước Claude Code là gì để nắm cơ chế chạy lệnh trong sandbox.

Nhưng nó KHÔNG "tự deploy" theo nghĩa ma thuật. Có ba việc con người vẫn phải làm:

• Bạn cần tài khoản Vercel hoặc Cloudflare (đăng ký free được).
• Lần đầu, bước xác thực (login) thường mở trình duyệt để bạn bấm xác nhận - Claude Code không thay bạn đăng nhập tài khoản.
• Bạn quyết định nền tảng, tên miền, biến môi trường - AI gợi ý được nhưng bạn là người chốt.

Nói ngắn gọn: AI lo phần thao tác lặp đi lặp lại và phần đọc log khó chịu; bạn lo phần quyết định và tài khoản. Sự phân vai này quan trọng để không kỳ vọng sai.

Vì sao cách này đáng dùng thay vì tự deploy tay? Ba lý do thực tế. Thứ nhất, bạn không phải nhớ lệnh của từng nền tảng - cú pháp vercel và wrangler khác nhau, và cả hai đều đổi khá nhanh. Thứ hai, vòng lặp sửa lỗi ngắn hơn: khi build fail, AI đọc log ngay tại chỗ thay vì bạn phải copy lỗi đi tìm trên mạng. Thứ ba, ngữ cảnh được giữ nguyên - Claude Code đang ở cùng thư mục vừa build app nên nó hiểu cấu trúc project, biết framework nào, output nằm ở đâu. Đó là khác biệt lớn so với việc dán lệnh từ một hướng dẫn không biết gì về code của bạn.

Chuẩn bị trước khi deploy (checklist)

Deploy trơn tru hay không phần lớn quyết định ở khâu chuẩn bị. Trước khi bảo Claude Code đẩy app lên production, xác nhận đủ các mục sau:

• ✓ Repo git sạch: đã commit, không còn thay đổi lửng lơ. Nếu chưa quen phần này, xem quy trình git với Claude Code.
• ✓ npm run build chạy được ở máy bạn. Đây là điều kiện số một. Build fail ở local thì chắc chắn fail trên server - đừng deploy để "thử xem sao".
• ✓ Biết rõ framework: Next.js, Vite/React, hay static HTML. Nền tảng và lệnh deploy khác nhau tùy loại.
• ✓ Có tài khoản Vercel hoặc Cloudflare.
• ✓ .gitignore đã chặn .env và các file khóa. Kiểm tra kỹ dòng này.

Cảnh báo bảo mật: Đừng để Claude Code commit .env hay API key lên git. Trước khi cho nó chạy git add -A, hãy chắc chắn .gitignore có .env và .env.local. Secret nên nạp qua dashboard nền tảng hoặc wrangler secret, không nằm trong code.

Nếu app của bạn có phần server (route API, database), bạn cũng nên đọc viết backend và API bằng Claude Code để hiểu app cần biến môi trường nào trước khi lên production. Chuẩn bị đủ danh sách này thì phần deploy phía dưới thường chỉ mất vài phút.

Cách 1 - Deploy lên Vercel bằng Claude Code

Vercel là lựa chọn mượt nhất cho app Next.js và các app SSR: nhiều thứ gần như "click là xong". Dưới đây là quy trình bằng CLI mà bạn có thể để Claude Code chạy từng bước:

1. Cài Vercel CLI: npm i -g vercel
2. Đăng nhập: vercel login - lệnh này mở trình duyệt để bạn xác thực (bước bạn tự làm).
3. Liên kết dự án: vercel link - nối thư mục hiện tại với một project trên Vercel.
4. Tạo bản preview: chạy vercel (không cờ) để build ra một URL preview và kiểm tra trước.
5. Thiết lập biến môi trường: qua dashboard Vercel hoặc vercel env add TÊN_BIẾN.
6. Đẩy lên production: vercel --prod.

Trong Claude Code, bạn không cần gõ từng lệnh trên. Một prompt như thế này là đủ:

Deploy dự án này lên Vercel. Chạy vercel link trước,
tạo một bản preview để mình kiểm tra, rồi hỏi mình
trước khi chạy vercel --prod. Nếu build fail thì đọc
log và đề xuất cách sửa.

Claude Code sẽ chạy chuỗi lệnh, dừng lại ở bản preview cho bạn xem, và chỉ đẩy production khi bạn duyệt. Nếu build fail, nó đọc output lỗi và sửa - đây là lúc việc "AI đọc log" tiết kiệm thời gian rõ rệt.

Surface mới 2026: Vercel có plugin Claude Code chính thức và một Vercel MCP connector giúp Claude Code thao tác với Vercel gọn hơn (quản lý project, đọc deployment). Nếu bạn deploy Vercel thường xuyên, hai thứ này đáng thử.

Với Next.js/SSR, ưu điểm lớn của Vercel là bạn hầu như không phải cấu hình runtime - framework được nhận diện tự động, "chỉ việc deploy". Server Components, API routes, middleware đều chạy mà không cần adapter. Đổi lại, chi phí có thể tăng nhanh khi traffic lớn (xem bảng so sánh phía dưới).

Mẹo dùng preview đúng cách: luôn chạy vercel (bản preview) trước khi --prod. Bản preview có URL riêng, dùng đúng code bạn sắp lên production nhưng không ảnh hưởng người dùng thật. Bạn mở URL đó, bấm thử vài luồng chính, rồi mới cho Claude Code đẩy production. Thói quen này rẻ mà cứu bạn khỏi việc đẩy một bản hỏng lên domain chính.

Cách 2 - Deploy lên Cloudflare bằng Claude Code (Pages & Workers)

Cloudflare hợp khi bạn muốn rẻ, chạy ở edge, hoặc cần full-stack với Workers (KV, D1, R2). Công cụ chính là wrangler. Các bước:

1. Cài Wrangler: npm i -g wrangler (hoặc dùng nhanh npx wrangler).
2. Đăng nhập: wrangler login - mở trình duyệt để xác thực.
3. Build app: npm run build để tạo thư mục output.
4. Deploy Pages: wrangler pages deploy <thư-mục-build> (ví dụ dist với Vite, hoặc thư mục build tương ứng framework).
5. Đặt secret: wrangler secret put TÊN_SECRET hoặc qua dashboard - không hardcode trong code.
6. Gắn domain + SSL: thêm custom domain trong dashboard; Cloudflare cấp SSL tự động.

Prompt mẫu cho Claude Code:

Build app này rồi deploy lên Cloudflare Pages bằng wrangler.
Sau khi deploy xong, cho mình xem URL .pages.dev để kiểm tra.
Nhắc mình những secret nào cần đặt bằng wrangler secret put.

Cạm bẫy Next.js trên Cloudflare (đọc kỹ): Next.js không chạy thẳng trên Cloudflare Pages/Workers như trên Vercel. Bạn cần một lớp adapter:

• @cloudflare/next-on-pages - adapter build Next.js cho Cloudflare Pages, chạy trên edge runtime.
• OpenNext (@opennextjs/cloudflare) - hướng mới hơn, hỗ trợ Node runtime của Workers tốt hơn cho các app Next.js phức tạp. Xem tài liệu OpenNext cho Cloudflare.

Cả hai thường yêu cầu bật Node compatibility flag (nodejs_compat) trong cấu hình. Nếu bỏ qua bước này, bạn sẽ gặp lỗi runtime khó hiểu - đây chính là chỗ các bài hướng dẫn chỉ nói về Vercel bỏ sót. Bạn có thể bảo Claude Code: "app này là Next.js, hãy dùng OpenNext để deploy lên Cloudflare và bật nodejs_compat giúp mình".

Cloudflare cũng có tài liệu agent-setup cho Claude Code mô tả cách kết nối AI agent với hạ tầng Cloudflare. Với logic động (database, cache, lưu file), dùng Workers cùng KV/D1/R2 thay vì cố nhồi mọi thứ vào Pages tĩnh: KV cho key-value nhanh, D1 là database SQL, R2 là object storage kiểu S3 nhưng không tính phí egress. Bạn có thể bảo Claude Code tạo binding tới các dịch vụ này trong wrangler.toml rồi viết code đọc/ghi tương ứng.

So với Vercel, đánh đổi ở Cloudflare là cấu hình nhiều hơn một chút nhưng linh hoạt và rẻ hơn khi scale. Nếu app chỉ là static/SPA thì gần như không có đánh đổi - Pages nhận thư mục build và phục vụ ở edge ngay. Chỉ khi lên Next.js SSR bạn mới cảm nhận rõ độ phức tạp của adapter.

Vercel hay Cloudflare? Bảng chọn nền tảng

Không có "nền tảng tốt nhất", chỉ có nền tảng hợp với loại app của bạn. Bảng dưới đây giúp chọn nhanh theo loại project mà Claude Code sinh ra:

Chốt nhanh: Vercel cho trải nghiệm Next.js mượt nhất và ít phải nghĩ; Cloudflare cho chi phí thấp, edge, và full-stack với Workers. Cả hai đều có free tier đủ dùng cho app cá nhân hoặc side project. Nếu chưa chắc, bắt đầu với free tier của cả hai và để Claude Code deploy thử lên từng nền tảng rồi so sánh.

Xử lý lỗi deploy thường gặp

Deploy hiếm khi xuôi chèo mát mái ngay lần đầu. Điểm mạnh của Claude Code là đọc log deploy rồi sửa theo vòng lặp - bạn dán lỗi hoặc bảo nó "đọc output vừa rồi và sửa". Dưới đây là các lỗi hay gặp và cách xử lý:

• Build fail lần đầu. Thường do thiếu dependency hoặc sai script build. Bảo Claude Code: "đọc log build vừa fail, tìm dep thiếu hoặc script sai trong package.json rồi sửa". Đây là lỗi phổ biến nhất và cũng dễ fix nhất.
• Thiếu biến môi trường → app deploy được nhưng trắng trang hoặc lỗi 500. Kiểm tra biến đã đặt trên dashboard chưa; nhớ rằng biến local trong .env KHÔNG tự lên server.
• Next.js lỗi edge runtime trên Cloudflare. Dấu hiệu: lỗi kiểu "module not found" hoặc API Node không tồn tại. Cách sửa: dùng @cloudflare/next-on-pages hoặc OpenNext và bật nodejs_compat (xem mục Cloudflare ở trên).
• Node version mismatch. Local dùng Node 20 nhưng server mặc định khác → build khác kết quả. Khai báo version trong cấu hình project hoặc package.json (engines).
• Lỡ commit secret. Nếu API key đã bị đẩy lên git, rotate (thu hồi và tạo lại) key ngay lập tức - xóa commit là chưa đủ vì key đã lộ trong lịch sử. Sau đó đưa secret vào dashboard/wrangler secret cho đúng chỗ.

Nếu bạn gặp lỗi ngay trong phiên Claude Code (chứ không phải phía nền tảng), tham khảo thêm các lỗi Claude Code thường gặp. Mẹo chung: đừng deploy lại mù quáng - luôn để AI đọc log cụ thể trước khi sửa.

Tự động deploy: git push → live (CI/CD & preview)

Deploy thủ công bằng CLI tốt cho lần đầu, nhưng về lâu dài bạn muốn mỗi lần git push là tự động lên live. Cả Vercel và Cloudflare Pages đều hỗ trợ nối trực tiếp với repo GitHub:

• Kết nối repo trong dashboard nền tảng → mỗi push lên nhánh chính sẽ auto-deploy production.
• Preview deployment = QA thật. Mỗi pull request tạo một URL preview riêng để bạn (hoặc reviewer) kiểm tra trước khi merge. Đây là bước QA gần như miễn phí, đừng bỏ.
• Rollback một lệnh. Nếu bản mới hỏng, quay về bản trước gần như tức thì trong dashboard - không cần hoảng.

Bạn có thể bảo Claude Code viết luôn file cấu hình: vercel.json cho Vercel, wrangler.toml cho Cloudflare, hoặc một workflow GitHub Actions nếu muốn kiểm soát chi tiết pipeline. Kết hợp với quy trình git với Claude Code, bạn có một vòng phát triển gọn: code → push → preview → merge → live.

Deploy nhanh hơn bằng skill dựng sẵn (ak-deploy)

Thay vì nhớ và gõ từng lệnh vercel/wrangler, bạn có thể dùng skill deploy dựng sẵn. ak-deploy tự nhận diện target deploy từ config dự án hoặc file docs/deployment.md - hỗ trợ Vercel, Cloudflare, Netlify, Railway, Fly.io và nhiều nền tảng khác - nên thường bạn chỉ cần một câu "deploy app này" là nó tự chọn đúng luồng. Với hạ tầng nặng hơn (Cloudflare Workers/R2/D1, Docker, Kubernetes), có ak-devops lo phần đó.

Các skill này nằm trong Engineer Kit (có skill ak-deploy) - một phần của bộ kit AgentKit cho Claude Code (giảm 20% qua link) (agentkit.best, dùng CLI ak). Nói rõ để tránh nhầm: đây là AgentKit gói skill/agent cho Claude Code, khác hoàn toàn với OpenAI AgentKit. Engineer Kit có giá $99 (trang không nêu phí định kỳ), kèm cập nhật trọn đời và money-back guarantee. Muốn hiểu skill trong Claude Code hoạt động ra sao trước, xem skill trong Claude Code là gì.

Câu hỏi thường gặp (FAQ)

Claude Code có tự deploy được không?

Có, Claude Code chạy được lệnh terminal thật nên nó thực thi vercel/wrangler giúp bạn: cài CLI, build, deploy, đọc log sửa lỗi. Nhưng bạn vẫn cần tài khoản Vercel/Cloudflare và tự bước xác thực đăng nhập lần đầu.

Vercel hay Cloudflare rẻ hơn, có free được không?

Cả hai đều có free tier đủ cho app cá nhân và side project. Cloudflare thường rẻ hơn khi traffic lớn và cho app static/edge; Vercel mượt hơn cho Next.js/SSR. Kiểm tra trang pricing để biết giới hạn cụ thể trước khi scale.

Deploy Next.js lên Cloudflare cần gì?

Next.js không chạy thẳng trên Cloudflare. Bạn cần adapter @cloudflare/next-on-pages hoặc OpenNext (@opennextjs/cloudflare), và thường phải bật Node compatibility flag (nodejs_compat). Trên Vercel thì không cần bước này.

Claude Code có làm lộ secret không?

Chỉ khi bạn để nó commit .env/API key lên git. Phòng tránh: thêm .env vào .gitignore, nạp secret qua dashboard hoặc wrangler secret put. Nếu lỡ lộ key, hãy rotate (tạo lại) key ngay vì nó đã nằm trong lịch sử git.

Deploy static HTML nhanh nhất bằng cách nào?

Với site tĩnh, nhanh nhất là wrangler pages deploy <thư-mục> lên Cloudflare Pages, hoặc chạy vercel ở thư mục project. Bảo Claude Code chạy lệnh và trả URL live cho bạn kiểm tra.

Rollback khi bản mới hỏng thế nào?

Cả Vercel và Cloudflare Pages đều cho rollback về bản deploy trước ngay trong dashboard, gần như tức thì. Vì mỗi deploy là một bản bất biến riêng nên quay lui rất an toàn - không cần build lại.

Kết luận & bước tiếp theo

Deploy app bằng Claude Code rút gọn thành một nguyên tắc: để AI chạy lệnh và đọc log, còn bạn quyết định nền tảng và tài khoản. Chọn Vercel cho Next.js/DX mượt, chọn Cloudflare cho rẻ và edge/full-stack. Chuẩn bị repo sạch, build chạy được ở local, và chặn secret khỏi git là bạn đã tránh 80% rắc rối.

Bước tiếp theo: nếu app có phần server, xem viết backend và API bằng Claude Code; muốn tự động hóa push-là-live, xem quy trình git với Claude Code.