Setup Vibe Coding: Cài Node.js, Git, Wrangler Để Deploy Cloudflare

Muốn vibe coding một web app rồi đẩy lên Cloudflare với chi phí hạ tầng ban đầu 0đ? Trước khi dán một prompt dài cho AI, hãy chuẩn bị Node.js, Git, tài khoản Cloudflare và Wrangler. Nếu thiếu các phần này, AI có thể viết xong giao diện nhưng không chạy được build, không tạo được database hoặc deploy nhầm môi trường.

Đây là bài 1 trong bộ hướng dẫn tạo web fullstack bằng AI với Cloudflare. Bạn sẽ kiểm tra được công cụ trên máy và quyền triển khai. Sau đó chuyển sang bài 2: lấy prompt tạo web fullstack và deploy Cloudflare.

Vibe coding với Cloudflare: cần hiểu gì trước khi bắt đầu?

Vibe coding là cách mô tả yêu cầu bằng ngôn ngữ tự nhiên để AI hỗ trợ viết và sửa chương trình. Bạn vẫn cần đọc kết quả, chạy kiểm tra và quyết định những thao tác liên quan đến dữ liệu, quyền truy cập hoặc thanh toán. Một trang có nút bấm đẹp chưa đồng nghĩa với ứng dụng đã lưu được dữ liệu.

Trong bộ bài này, Cloudflare đôi khi được gọi tắt là CLF. Kiến trúc của prompt gồm:

Thành phần	Công nghệ	Vai trò
Giao diện	React, TypeScript, Vite, Tailwind CSS	Màn hình người dùng và trang quản trị
Hosting frontend	Cloudflare Pages	Phân phối thư mục build của giao diện
Backend	Cloudflare Workers và Hono	Xác thực, kiểm tra dữ liệu, xử lý API
Database	Cloudflare D1	Lưu dữ liệu có cấu trúc
File upload	Cloudflare R2, nếu cần	Lưu ảnh hoặc tài liệu

Trình duyệt gọi API Worker; Worker truy cập D1 và R2 qua binding. Không đưa mật khẩu database hoặc khóa bí mật vào mã frontend. Nếu chưa rõ vai trò từng dịch vụ, đọc thêm Cloudflare Workers và Pages khác nhau thế nào của AD2T hoặc dùng tài liệu Cloudflare Pages làm nguồn đối chiếu trực tiếp.

Deploy web 0đ có điều kiện gì?

“0đ” trong bài nghĩa là có thể bắt đầu với các hạn mức miễn phí phù hợp, không phải mọi ứng dụng đều miễn phí mãi mãi. Công cụ AI, tên miền riêng, email, thanh toán và dịch vụ bên ngoài có thể phát sinh phí riêng.

Dịch vụ	Hạn mức miễn phí tham khảo	Điều cần kiểm tra
Pages	500 build mỗi tháng ở gói Free	Tránh push liên tục chỉ để sửa từng chữ
Workers	100.000 request/ngày; CPU có giới hạn riêng	Một người dùng có thể tạo nhiều request
D1	5 triệu hàng đọc/ngày, 100.000 hàng ghi/ngày; tổng lưu trữ 5 GB	Hàng quét bởi truy vấn cũng ảnh hưởng quota
R2 Standard	10 GB-month lưu trữ/tháng trong free tier, kèm hạn mức thao tác	Upload/download và loại lưu trữ có cách tính khác nhau

Đối chiếu ngày 19/10/2026 từ Pages limits, Workers pricing, D1 pricing và R2 pricing. Hạn mức có thể thay đổi. Kiểm tra mục Billing/Usage của tài khoản trước khi bật thêm dịch vụ; việc R2 có free tier không có nghĩa mọi tài khoản đều bỏ qua bước kích hoạt thanh toán.

Một portfolio tĩnh chỉ cần Pages. Web có đăng nhập và lưu dữ liệu mới cần API và database. Chưa có upload thì chưa cần R2. Đây là cách giảm chi phí thực tế hơn việc bật tất cả dịch vụ ngay từ đầu.

Bước 1: cài Node.js và kiểm tra npm

Cài Node.js từ nodejs.org. Chọn bản LTS đáp ứng phiên bản Vite bạn sử dụng; xem yêu cầu Node hiện tại trong Vite Getting Started.

Mở terminal mới sau khi cài và chạy:

node --version
npm --version

Cả hai lệnh phải trả về số phiên bản. Nếu Windows báo không nhận diện lệnh, đóng rồi mở lại terminal và kiểm tra Node đã được thêm vào PATH. Không tiếp tục yêu cầu AI deploy khi máy chưa chạy được npm.

Bạn không cần cài Vite hoặc Hono global. Các thư viện của dự án nên được quản lý trong package.json và lockfile để máy cá nhân và hệ thống build cài cùng bộ dependency.

Bước 2: cài Git và tạo thư mục dự án

Cài Git từ git-scm.com, sau đó kiểm tra:

git --version
mkdir my-cloudflare-web
cd my-cloudflare-web
git init

Thay tên thư mục cho đúng dự án, dùng thư mục mới và không đặt chồng lên dự án production đang chạy. Trước khi nhờ AI sửa code đang có, hãy xem git status và tạo một mốc lưu thay đổi thích hợp.

Git giúp xem AI đã sửa file nào và quay lại một phiên bản code trước đó. Quay lại code không tự hoàn tác dữ liệu database, vì vậy vẫn phải có kế hoạch migration và sao lưu riêng.

Nếu sẽ dùng GitHub để Pages tự deploy, tạo repository thuộc quyền quản lý của bạn. Chưa cần push thư mục rỗng; chỉ push sau khi có mã nguồn, .gitignore và đã kiểm tra không đưa secret lên Git.

Bước 3: đăng nhập Cloudflare bằng Wrangler

Tạo hoặc đăng nhập tài khoản tại Cloudflare dashboard. Trong terminal, kiểm tra công cụ rồi đăng nhập:

npx wrangler@latest --version
npx wrangler@latest login
npx wrangler@latest whoami

Lệnh login mở luồng xác thực của Cloudflare trong trình duyệt. Chỉ chấp thuận cho đúng tài khoản và công cụ bạn đang dùng. Sau đó whoami phải cho biết bạn đã đăng nhập được; không dán API token, mật khẩu hay nội dung file credential vào cuộc trò chuyện với AI.

Khi bắt đầu dự án thật, cài Wrangler vào devDependencies và giữ lockfile; dùng phiên bản trong dự án để việc deploy có thể tái hiện được. Lệnh @latest ở trên phục vụ kiểm tra môi trường ban đầu.

Bước 4: chuẩn bị AI IDE và quyền terminal

Mở đúng thư mục my-cloudflare-web bằng công cụ AI có thể đọc/sửa file và chạy terminal. Nếu công cụ chỉ trả lời bằng văn bản, bạn vẫn dùng được prompt nhưng phải tự chạy các bước cài đặt và deploy.

Trước khi giao toàn bộ dự án, yêu cầu AI thực hiện một kiểm tra nhỏ:

Chỉ kiểm tra môi trường hiện tại, chưa tạo tài nguyên hoặc deploy:
1. Xác nhận thư mục làm việc và các file đang có.
2. Kiểm tra Node.js, npm, Git và Wrangler.
3. Kiểm tra đăng nhập Cloudflare bằng công cụ chính thức.
4. Báo phần đã xác minh và phần còn thiếu.
Không đọc hoặc in token, không sửa database, không kích hoạt trả phí.

Bạn cần thấy kết quả thực tế từ công cụ, không chỉ câu “mọi thứ đã sẵn sàng”. Đây cũng là cách phát hiện trường hợp AI đang thao tác nhầm thư mục hoặc chưa có quyền chạy lệnh.

Bước 5: chốt chức năng trước khi lấy prompt

Viết ngắn gọn ba phần: ai sử dụng web, họ làm việc gì và dữ liệu nào phải được lưu. Ví dụ cho một cửa hàng nhỏ:

Tên dự án: Sổ đơn mini
Người dùng: chủ cửa hàng và nhân viên
Chức năng: đăng nhập, quản lý sản phẩm, tạo đơn, xem lịch sử đơn
Phân quyền: nhân viên không được thay đổi tài khoản chủ cửa hàng
Upload: chưa cần, dùng ảnh URL do quản trị viên nhập
Ngân sách: chỉ dùng dịch vụ trong free tier; hỏi trước khi phát sinh phí

Đừng yêu cầu đồng thời chat thời gian thực, AI sinh ảnh, video và cổng thanh toán nếu mục tiêu ban đầu chỉ là quản lý đơn. Mỗi tích hợp thêm là một luồng cần kiểm tra và một nguồn chi phí có thể phát sinh.

Những lỗi setup thường gặp và cách xử lý

Triệu chứng	Kiểm tra đầu tiên
npm không chạy	Node.js, PATH và terminal mới
Wrangler chưa đăng nhập	Chạy login và whoami trong cùng môi trường
Không thấy tài nguyên Cloudflare	Tài khoản và quyền truy cập đúng account
Frontend gọi localhost sau deploy	Biến môi trường API ở thời điểm build
Gọi API được bằng terminal nhưng browser bị chặn	CORS của Worker với đúng origin frontend
Trang có giao diện nhưng dữ liệu biến mất khi tải lại	API ghi D1 thật hay chỉ lưu vào state trình duyệt

Khi nhờ AI sửa lỗi, gửi tên lệnh, thông báo lỗi đã che thông tin nhạy cảm và kết quả mong đợi. Đừng yêu cầu “sửa tất cả” rồi cho chạy lại migration trên database thật khi chưa biết nguyên nhân.

Checklist trước khi sang bài chia sẻ prompt

• Chạy được Node.js, npm và Git.
• Có thư mục dự án riêng và biết thư mục nào AI đang làm việc.
• Wrangler xác minh được tài khoản Cloudflare dự định dùng.
• Đã ghi chức năng, vai trò người dùng và phần không làm ở phiên bản đầu.
• Biết dữ liệu nào cần sao lưu, dịch vụ nào có thể phát sinh phí.
• Công cụ AI có khả năng thao tác thực tế hoặc bạn sẵn sàng chạy lệnh thủ công.

Đủ các mục trên, chuyển sang bài 2: prompt tạo web fullstack với Cloudflare Pages, Workers và D1. Bạn có thể sao chép toàn bộ prompt hoặc tải file văn bản, điền mô tả dự án rồi triển khai theo từng bước.