Vibe coding: hạ tầng miễn phí để AI Agent làm web chạy thật

Bạn đã nhờ Claude Code hoặc Codex làm xong một công cụ nhỏ. Nhưng công cụ mới chạy trên máy, còn bạn muốn đồng nghiệp mở bằng một đường link, dữ liệu không mất khi tắt máy và có thể cập nhật về sau.

Đây là lúc cần đến hạ tầng: nơi chạy ứng dụng, lưu dữ liệu và giữ mã nguồn. Tin vui là có thể bắt đầu bằng các gói miễn phí. Bạn giao việc cho agent; agent chuẩn bị code, kết nối và triển khai trong phạm vi quyền đã được cấp.

Bài viết này tập trung vào hạ tầng miễn phí cho vibe coding. Chi phí Claude Code/Codex là khoản riêng, phụ thuộc tài khoản và hạn mức của bạn.

Cập nhật hạn mức: 27/10/2026. Các màn hình trong bài lấy từ tài liệu chính thức; giao diện tài khoản của bạn có thể khác.

Đọc nhanh: Dùng Cloudflare cho web tĩnh hoặc app phù hợp Workers; Vercel cho triển khai web/app, đặc biệt Next.js cá nhân; Supabase khi cần PostgreSQL, đăng nhập và lưu file. GitHub giữ mã nguồn. Không cần dùng tất cả cùng lúc, và web PHP/MySQL đang chạy ổn có thể tiếp tục dùng hosting hiện tại.

Vibe coding là gì và người đi làm có thể làm gì?

Vibe coding thường được dùng để chỉ cách tạo phần mềm bằng việc mô tả nhu cầu cho AI, xem kết quả rồi yêu cầu sửa. Trong bài này, bạn giao Claude Code hoặc Codex thực hiện các bước tạo, chạy thử và hỗ trợ triển khai ứng dụng; bạn xác định bài toán và kiểm tra đầu ra.

Một nhân viên sales có thể làm công cụ tính báo giá. Người làm marketing có thể làm bộ tạo UTM. Người quản lý lớp học có thể làm bảng theo dõi bài tập. Nên bắt đầu bằng một việc nhỏ bạn hiểu rõ, để biết ứng dụng đang tính đúng hay sai.

Phân biệt agent, hosting, database và kho mã nguồn

Ví dụ công cụ tính báo giá có thể chỉ cần hosting. Khi muốn nhân viên đăng nhập, lưu báo giá và mở lại từ máy khác, mới cần thêm database và phân quyền.

Supabase có chức năng xử lý backend, nhưng không phải hosting PHP/WordPress kiểu Hostinger. Vercel cũng có lưu trữ file, nhưng database SQL thường được kết nối từ nhà cung cấp khác. Chọn theo việc cần làm sẽ dễ hơn việc cố dùng một công cụ cho mọi thứ.

Các nền tảng miễn phí cho vibe coding: chọn theo nhu cầu

Các hạn mức thuộc từng sản phẩm và phạm vi tài khoản/project khác nhau. Không cộng chúng thành một “gói hosting miễn phí”. Riêng 100.000 request/ngày hay 1 triệu lượt gọi Function cũng không tương đương số người dùng: một người có thể tạo nhiều request.

Nguồn: Workers · Pages · Direct Upload · D1 · D1 pricing · R2 · Vercel Hobby · Supabase · GitHub.

Chọn một trong ba cách kết hợp

Chọn Free để thử nghiệm, rồi tính chi phí khi vận hành thật. Website kinh doanh không phù hợp Vercel Hobby; công cụ chứa dữ liệu quan trọng cần tính thêm sao lưu, độ ổn định và công sức bảo trì. Không có lý do phải chuyển web PHP/MySQL hiện có chỉ vì một nền tảng mới có gói miễn phí.

Thực hành: giao agent tạo công cụ tính báo giá

Mục tiêu là có một ứng dụng chạy được trên máy, một link để xem thử và một bản code có thể cập nhật. Ví dụ đầu tiên không dùng dữ liệu khách hàng thật và chưa cần đăng nhập/database.

Bước 1: Giao Claude Code hoặc Codex tạo và kiểm thử

Mở agent trong một thư mục dự án riêng rồi gửi:

Tạo công cụ tính báo giá tiếng Việt trong thư mục hiện tại.

- Chỉ một file index.html, gồm HTML/CSS/JavaScript; không cần database hoặc dịch vụ ngoài.
- Nhập tên sản phẩm, số lượng, đơn giá, chiết khấu % và thuế %.
- Tính tiền hàng → trừ chiết khấu → tính thuế trên số tiền đã giảm → tổng thanh toán.
- Có nút sao chép báo giá, dùng tốt trên điện thoại.
- Kiểm tra dữ liệu trống, số âm, số 0 và trường hợp không hợp lệ.
- Tự chạy kiểm thử, sửa lỗi và cho tôi xem trước.
- Ví dụ bắt buộc: 2 × 100.000đ, giảm 10%, thuế 10% → tổng 198.000đ.
- Báo file đã tạo, kết quả kiểm tra và những gì chưa kiểm tra được.

Bạn kiểm tra: tổng 198.000đ, cách hiển thị tiền, nút sao chép và màn hình điện thoại. Agent báo “đã xong” vẫn cần đối chiếu với ví dụ bạn biết kết quả. Nếu có lỗi, gửi ảnh hoặc tình huống cụ thể để agent sửa.

Bước 2: Giao agent triển khai lên Cloudflare

Kiểm tra ứng dụng vừa tạo và triển khai lên Cloudflare bằng phương án phù hợp hạn mức miễn phí hiện tại. Ưu tiên cách tôi có thể cập nhật về sau.

Kiểm tra công cụ và đăng nhập hiện có. Tự chuẩn bị cấu hình, build, triển khai và mở URL kiểm tra khi đã đủ quyền. Nếu cần tôi đăng nhập/cấp quyền, chỉ rõ bước đó trên trang chính thức; không yêu cầu mật khẩu hay OTP qua chat. Không mua dịch vụ hoặc bật phát sinh phí khi chưa được đồng ý.

Báo URL, kết quả kiểm tra, cách cập nhật và giới hạn. Nếu chưa thể triển khai, chuẩn bị thư mục tĩnh hoàn chỉnh và nói rõ phần còn thiếu.

Agent có thể dùng CLI/API khi có công cụ và quyền. Nếu cần bạn thao tác một lần, nó nên chỉ đúng phần cần đăng nhập hoặc cấp quyền, thay vì đẩy toàn bộ quy trình về cho bạn.

Phương án chia sẻ nhanh: Cloudflare Drop cho tải thư mục/ZIP web tĩnh và tạo link xem thử tạm một giờ. Bấm Claim và đăng nhập để giữ lại theo quy trình trên màn hình. Không tải nguyên mã nguồn cần build hoặc website PHP lên và kỳ vọng nó tự chạy.

Ảnh 1. Cloudflare Drop: vùng tải thư mục hoặc ZIP website tĩnh. Màn hình từ tài liệu Cloudflare.

Ảnh 2. Kiểm tra link xem thử và chọn Claim để giữ lại. Nguồn: Cloudflare; không phải ảnh giả lập bằng AI.

Bước 3: Giao agent giữ code và chuẩn bị cập nhật

Lưu project này lên GitHub repo Private tên cong-cu-bao-gia.

Kiểm tra quyền hiện có, rà soát khóa bí mật/dữ liệu riêng tư và tạo .gitignore phù hợp trước khi đưa code lên. Nếu cần đăng nhập, hướng dẫn tôi hoàn tất trên trang chính thức.

Báo link repo và trạng thái Private. Chuẩn bị quy trình sửa → kiểm thử → xem trước → cập nhật website. Lưu hướng dẫn cập nhật và khôi phục trong README.

Ảnh 3. Màn hình tạo repository khi cần bạn kiểm tra hoặc thao tác thủ công. Nguồn: GitHub Docs. Repo Private không tự làm website đã triển khai trở thành riêng tư.

Bước 4: Khi cần lưu báo giá dùng chung, giao agent bổ sung Supabase

Bổ sung đăng nhập và lưu báo giá bằng Supabase vào app hiện tại.

- Kiểm tra kết nối hiện có và hạn mức Free; đề xuất bảng dữ liệu và quyền truy cập trước khi sửa.
- Chỉ dùng project thử nghiệm được tôi chọn. Không tự nâng gói trả phí.
- Kết nối qua công cụ/MCP phù hợp; nếu thiếu quyền, chuẩn bị cấu hình và hướng dẫn tôi đăng nhập.
- Mỗi người chỉ đọc/sửa báo giá được phép. Cấu hình và kiểm tra RLS; không đưa khóa quản trị lên trình duyệt hoặc GitHub.
- Dùng hai tài khoản thử để kiểm tra tạo, đọc, sửa, xóa và truy cập chéo.
- Kiểm tra báo giá vẫn còn sau khi tải lại trang và đăng nhập trên thiết bị khác.
- Báo kết quả, giới hạn, cách sao lưu và những phần chưa kiểm tra được.

RLS là quy tắc kiểm soát người dùng được truy cập những dòng dữ liệu nào. Người đọc không cần tự viết tất cả quy tắc, nhưng cần kiểm tra agent đã cấu hình đúng bằng hai tài khoản thử. Xem tài liệu Supabase và MCP chính thức.

Nếu chọn Vercel, giao agent làm gì?

Với app cá nhân phù hợp gói Hobby, có thể giao agent triển khai riêng phần ứng dụng và kết nối Supabase:

Kiểm tra app hiện tại có phù hợp Vercel Hobby và mục đích cá nhân phi thương mại không. Nếu không phù hợp, báo lý do và phương án trước khi triển khai.

Nếu phù hợp và đã đủ quyền, chuẩn bị cấu hình, biến môi trường, build và triển khai bản preview. Kết nối Supabase project tôi chọn, kiểm tra đăng nhập và lưu dữ liệu. Không công khai secret. Gửi URL preview và báo cáo kiểm tra để tôi duyệt trước khi đưa lên bản chính thức.

Ảnh 4. Tạo project trên Vercel; agent có thể thực hiện qua CLI/API khi có quyền. Nguồn: Vercel Docs.

Nếu app đã chạy bằng PHP/MySQL, cần đánh giá tương thích trước. Supabase dùng PostgreSQL; D1 dùng SQLite. Cả hai đều không phải nơi nhập nguyên database MySQL rồi mặc định chạy được. Cloudflare Containers hiện thuộc Workers Paid; PHP trên Vercel có cách đóng gói riêng, khác shared hosting.

Miễn phí thực sự đến đâu?

Tách ngân sách thành bốn phần: agent viết code, hạ tầng chạy app, API AI trong app và tên miền. Dùng Vercel/Cloudflare Free không có nghĩa các lần gọi model AI trong ứng dụng cũng miễn phí.

Với Supabase Free, theo dõi dung lượng database/file và việc project ít hoạt động có thể bị tạm dừng. Với R2, theo dõi cả dung lượng lẫn số thao tác. Với D1, hết hạn mức đọc/ghi ngày có thể làm truy vấn báo lỗi. Với Vercel Hobby, mục đích sử dụng và CPU/bộ nhớ cũng quan trọng như lưu lượng.

Một bản mẫu miễn phí có thể đủ để bạn quyết định công cụ có đáng dùng không. Khi nhiều người phụ thuộc vào nó mỗi ngày, hãy dự toán nâng gói và sao lưu trước khi có sự cố.

Những câu hỏi thường gặp

Có cần biết code để dùng Claude Code hoặc Codex không?

Bạn có thể giao việc bằng ngôn ngữ tự nhiên. Nhưng vẫn cần hiểu quy trình công việc, kiểm tra kết quả và biết ứng dụng lưu dữ liệu ở đâu. Với bài toán quan trọng, nên có người chuyên môn kiểm tra thêm.

Có bắt buộc dùng Vercel và Supabase cùng lúc không?

Không. Web tĩnh có thể chỉ cần hosting. App cần dữ liệu có thể dùng Cloudflare Workers + D1 hoặc hosting khác kết nối Supabase. Chọn theo kiến trúc và nhu cầu.

Lưu dữ liệu trong trình duyệt có được không?

Có thể đủ cho công cụ cá nhân đơn giản. Nhưng dữ liệu không tự đồng bộ nhiều thiết bị hoặc chia sẻ cho cả nhóm, và có thể mất khi dữ liệu trình duyệt bị xóa. Muốn lưu dùng chung cần thiết kế database phù hợp.

Có thể dùng Vercel Free cho website bán hàng không?

Gói Hobby chỉ dành cho cá nhân phi thương mại. Website kinh doanh cần xem gói phù hợp hoặc một nền tảng khác. Đừng chọn hạ tầng chỉ dựa trên chữ “Free”.

Agent làm thay được đến đâu?

Agent có thể tạo code, chạy lệnh, kiểm thử và triển khai khi có công cụ/quyền. Bạn vẫn cần xác định yêu cầu, đăng nhập hoặc cấp quyền khi cần và duyệt kết quả. Một prompt không tự cấp cho agent quyền truy cập mọi tài khoản.

Web PHP/MySQL đang chạy có nên chuyển sang các dịch vụ này?

Chỉ chuyển khi có lợi ích cụ thể. Với PHP/MySQL truyền thống, hosting đang có có thể đơn giản và kinh tế hơn; không cần đổi kiến trúc chỉ để tận dụng một hạn mức miễn phí.

Bắt đầu bằng một việc đang tốn thời gian

Chọn một công việc lặp lại mà bạn hiểu rõ. Giao agent tạo bản đầu tiên, yêu cầu nó kiểm thử rồi mở ra dùng bằng dữ liệu mẫu. Khi có ích, mới bổ sung lưu dữ liệu, đăng nhập hoặc chia sẻ cho nhóm.

Bạn không cần tự thao tác mọi màn hình. Điều cần làm là giao đúng việc, cấp đúng quyền và kiểm tra ứng dụng có giải quyết được công việc của mình hay không.