🗄️
Database (Postgres)
Nơi lưu dữ liệu. Dạng bảng hàng cột có quan hệ, mạnh cho dữ liệu thật.
◆ Dành cho người làm app bằng vibe coding
Đưa app của bạn lên Supabase
Khi app đã có giao diện, bước tiếp theo là cho nó một hậu trường thật: nơi lưu dữ liệu và cho người dùng đăng nhập. Supabase là một lựa chọn rất hợp với người mới. Trang này giúp bạn hiểu Supabase là gì và cách đưa app lên đó, theo cách dễ nhất.
Nhớ một điều: Supabase là hậu trường (backend). Giao diện của bạn vẫn nằm ở nơi khác. Hai bên nối nhau bằng một đường link và một chiếc khóa.
Giao diện appchạy trên Cloudflare, Vercel...
Frontend
↓
nối bằng URL + khóa
↑
Dự án Supabasehậu trường của app
Backend
🗄️Database
🔐Auth
📁Storage
Giới thiệu
Supabase là gì?
Hiểu ngắn gọn: Supabase là một bộ backend đóng gói sẵn, xây trên database Postgres, dùng được ngay mà không phải tự dựng máy chủ.
◆ Một backend gói sẵn, mã nguồn mở
Thường được gọi là "giải pháp thay cho Firebase nhưng dùng SQL". Bạn có ngay nhiều thứ trong một dự án:
- Database Postgres (kiểu SQL, dữ liệu quan hệ).
- Đăng nhập (Auth) dựng sẵn, nhiều cách.
- Lưu file (Storage) cho ảnh, video.
- Realtime, Edge Function và API tự sinh.
🙌 Vì sao hợp với người vibe coding
Bạn tập trung mô tả điều mình muốn, phần hạ tầng để Supabase lo.
- Cắm vào là chạy, không phải tự dựng server.
- Tài liệu rõ ràng, cộng đồng lớn.
- Các công cụ AI rất "rành" Supabase nên hỗ trợ bạn tốt.
- Mã nguồn mở, sau này muốn tự host vẫn được.
Các viên gạch
Trong Supabase có những gì?
Không cần dùng hết ngay. Hầu hết app cho người mới chỉ cần database và đăng nhập là đã chạy thật.
🔐
Auth
Đăng nhập dựng sẵn. Email, mật khẩu, magic link, đăng nhập Google và nhiều cách khác.
📁
Storage
Lưu file. Ảnh, video, tài liệu, tách riêng với database.
⚡
Realtime
Cập nhật tức thì. Dữ liệu mới hiện ngay cho mọi người, hợp với app cộng tác.
🛰️
Edge Function
Code chạy phía server. Dùng cho logic riêng, gửi email, gọi AI một cách an toàn.
🔌
API tự sinh
Tạo bảng là có API. Supabase tự tạo cửa giao tiếp để app đọc và ghi dữ liệu.
Tránh hiểu nhầm
"Deploy lên Supabase" thực ra là gì?
Bạn không đẩy giao diện lên Supabase. Bạn dựng phần hậu trường ở Supabase, rồi nối giao diện vào. Đây là bức tranh đúng.
Nằm ở hosting
Giao diện (Frontend)
Phần người dùng nhìn thấy và bấm. Vẫn deploy ở nơi chuyên chứa giao diện.
- Cloudflare Pages, Vercel, Netlify...
- Là đường link người dùng mở.
⇄
URL dự án
+ anon key
+ anon key
Nằm ở Supabase
Hậu trường (Backend)
Phần lo dữ liệu và đăng nhập. Đây mới là chỗ bạn dựng trên Supabase.
- Database, Auth, Storage, Function.
- Không chứa giao diện app.
Phần chính
Các bước đưa app lên Supabase
Đây là trình tự chung, mô tả mỗi bước làm gì và vì sao. Giao diện Supabase có thể đổi theo thời gian, nên hãy nắm ý chính.
1
Tạo dự án Supabase
Mở tài khoản, tạo một project mới. Chọn vùng máy chủ gần người dùng của bạn và đặt mật khẩu database.
Vì sao: vùng gần giúp app phản hồi nhanh hơn.2
Thiết kế bảng dữ liệu
Tạo các bảng app cần, ví dụ bảng người dùng, bảng công việc. Mỗi bảng có các cột rõ ràng.
Vì sao: dữ liệu có cấu trúc thì app mới lưu và tìm đúng.3
Bật RLS và đặt quyền
Bật Row Level Security cho mỗi bảng và viết quy tắc: mỗi người chỉ đọc và sửa dữ liệu của mình.
Vì sao: không bật là bất kỳ ai cũng có thể lấy sạch dữ liệu.4
Bật cách đăng nhập
Chọn phương thức cho người dùng vào app: email, magic link, hoặc đăng nhập Google.
Vì sao: có đăng nhập thì mới biết dữ liệu là của ai.5
Lấy đường link dự án và anon key
Supabase cấp cho bạn một URL dự án và một anon key. Đây là hai thứ để giao diện app kết nối vào.
Vì sao: đây là "địa chỉ" và "chìa khóa" để app gọi tới backend.6
Nối app vào Supabase
Trong app, dùng thư viện kết nối của Supabase, điền URL và anon key. Sau bước này app đã đọc ghi được dữ liệu thật.
Vì sao: đây là lúc giao diện và hậu trường bắt tay nhau.7
Viết Edge Function (tùy chọn)
Nếu cần xử lý riêng như gửi email hay gọi AI, viết một Edge Function chạy phía server.
Vì sao: giữ logic nhạy cảm ở server, không lộ ra giao diện.8
Kiểm tra thật
Đăng nhập thử, thêm vài dữ liệu, tải lại trang xem có còn không, thử bằng tài khoản khác xem RLS có chặn đúng.
Vì sao: chạy được mới tính, đừng tin là xong khi chưa thử.9
Đưa giao diện lên hosting
Deploy frontend lên Cloudflare, Vercel hoặc tương tự. Nhớ điền cùng URL và anon key vào phần cấu hình của hosting.
Vì sao: chạy trên máy mình khác với chạy thật cho người khác.
Bảo mật khi deploy
Hai chiếc khóa, đừng dùng nhầm
Supabase cho bạn vài loại khóa. Hiểu đúng cái nào để ở đâu là tránh được hầu hết rủi ro lộ dữ liệu.
An toàn để ở giao diện
🔓 anon key (khóa công khai)
Dùng cho giao diện app. Nó đã bị RLS giới hạn, nên kể cả người dùng thấy cũng chỉ làm được đúng quyền cho phép.
Tuyệt đối giữ kín
🔐 service key (khóa bí mật)
Mở mọi cửa, bỏ qua RLS. Chỉ dùng ở phía server hoặc Edge Function. Không bao giờ để trong giao diện hay đẩy lên GitHub.
Quy tắc vàng: Để khóa trong
environment variable, không viết thẳng vào code.
Thêm file .env vào .gitignore để không vô tình đẩy khóa lên GitHub. Trên hosting, khai báo lại các biến này trong phần cấu hình.
Góc vibe coding
Nhờ AI đưa app lên Supabase
AI làm phần lặp đi lặp lại rất nhanh. Việc của bạn là giao đúng, giữ khóa an toàn và kiểm tra lại.
🗣️
Giao việc rõ
Nói cho AI app cần bảng gì, cột gì, ai được làm gì. Mô tả càng rõ, AI tạo bảng và quy tắc càng đúng.
🙅
Tự tay với khóa
Đừng dán service key hay mật khẩu database vào prompt. Tự bạn điền khóa vào environment variable.
✅
Kiểm tra lại
Tự bật RLS và thử bằng tài khoản khác. Đừng tin "AI nói xong rồi" khi chưa thử thật.
Ví dụ cách giao việc cho AI
"Hãy nối app này với Supabase. Tạo bảng cho công việc gồm tiêu đề, trạng thái và chủ sở hữu. Bật RLS để mỗi người chỉ thấy công việc của mình.
Dùng URL và anon key tôi đã đặt trong environment variable, đừng viết khóa thẳng vào code."
Phòng trước cho đỡ khổ
Lỗi thường gặp khi đưa app lên Supabase
Hầu hết người mới vấp đúng vài chỗ này. Biết trước là tránh được.
🛡️
Quên bật RLS
Dữ liệu để mở, ai cũng đọc được hết. Đây là lỗi bảo mật nặng và rất hay gặp.
Cách sửa: bật RLS cho mọi bảng và viết quy tắc theo từng người.
🔑
Nhầm anon và service key
Để service key trong giao diện là mở toang mọi dữ liệu cho bất kỳ ai.
Cách sửa: giao diện chỉ dùng anon key; service key chỉ ở phía server.
🧩
Quên khai báo biến trên hosting
Chạy trên máy mình thì ổn, nhưng deploy lên là lỗi vì thiếu URL và khóa.
Cách sửa: khai báo lại các environment variable trong cấu hình hosting.
🌍
Chọn vùng máy chủ quá xa
Người dùng ở Việt Nam mà chọn vùng xa thì app phản hồi chậm.
Cách sửa: chọn vùng gần người dùng nhất ngay khi tạo dự án.
Đưa app lên Supabase không khó. Khó là ở chỗ hiểu đúng app của mình đang nằm ở đâu.
Khi bạn nắm được Supabase lo hậu trường, giao diện ở nơi khác, hai bên nối nhau bằng link và khóa, cộng thêm việc bật RLS và giữ khóa an toàn, bạn đã có thể tự tin cho app chạy thật với người dùng.
Phong Ho - AI Business