Supabase là gì? Hướng dẫn cài đặt và sử dụng

Supabase là gì?

Supabase là một nền tảng backend-as-a-service (BaaS) mã nguồn mở, giúp lập trình viên xây dựng ứng dụng hiện đại mà không cần lo lắng về việc tự triển khai backend phức tạp. Được ví như “Firebase của mã nguồn mở”, Supabase cung cấp các tính năng quan trọng như database, authentication, realtime, storage, và các serverless functions, tất cả đều có thể triển khai tự host hoặc dùng dịch vụ cloud.

Các thành phần chính của Supabase

• PostgreSQL Database: Cung cấp cơ sở dữ liệu mạnh mẽ, quen thuộc, dễ mở rộng.
• Authentication: Quản lý người dùng, đăng ký, đăng nhập, xác thực qua email/social.
• Realtime: Theo dõi thay đổi dữ liệu, nhận update realtime qua WebSocket.
• Storage: Lưu trữ và quản lý file như hình ảnh, video, tài liệu.
• Edge Functions: Serverless functions cho phép chạy code backend gần user.

Supabase nổi bật với triết lý “không lock-in”, minh bạch mã nguồn, dễ tích hợp với stack frontend (React, Vue, Next.js, v.v.), đồng thời cho phép tự triển khai trên server cá nhân nếu cần bảo mật riêng tư hoặc tiết kiệm chi phí.

Lợi ích khi sử dụng Supabase

Ưu điểm nổi bật

• Mã nguồn mở hoàn toàn: Có thể kiểm soát, audit, tùy biến hệ thống.
• Dễ sử dụng: UI quản trị trực quan, API auto-gen rõ ràng.
• Self-host hoặc Cloud: Có thể deploy trên hạ tầng riêng hoặc dùng dịch vụ Supabase Cloud.
• Phù hợp với nhiều use-case: App web, mobile, backend automation.
• Hỗ trợ realtime và authentication out-of-the-box.

Khi nào nên chọn Supabase?

• Khi bạn cần xây dựng MVP hoặc prototype nhanh chóng.
• Khi muốn kiểm soát toàn bộ dữ liệu (tự host).
• Khi không muốn phụ thuộc vào nền tảng đóng như Firebase.
• Khi stack backend ưu tiên PostgreSQL.

Tính linh hoạt

Supabase hỗ trợ cả việc host trên cloud và tự triển khai (self-host) bằng docker, phù hợp với team/startup vừa và nhỏ, hoặc cá nhân thích chủ động về data. Ngoài ra, cộng đồng phát triển mạnh mẽ, liên tục cập nhật tính năng mới.

Cách tạo tài khoản và project Supabase

Đăng ký và tạo workspace

Truy cập https://supabase.com/ > chọn “Start your project”

Đăng ký tài khoản bằng email hoặc Github.

Sau khi đăng nhập, tạo workspace (không bắt buộc, giúp quản lý nhiều project).

Cấu hình project đầu tiên

1. Chọn New Project.
2. Điền tên project, chọn region (ưu tiên gần nơi user sử dụng).
3. Thiết lập mật khẩu cho database (lưu ý bảo mật, nên lưu lại ở nơi an toàn).

Các thiết lập ban đầu cần lưu ý

• Project Reference: Mỗi project sẽ có mã riêng, dùng khi kết nối từ frontend.
• API Keys: Bao gồm anon key (cho client) và service key (cho server, cần bảo mật).
• Cấu hình CORS: Đảm bảo cho phép domain frontend truy cập API Supabase.
• Lưu lại thông tin kết nối: Supabase sẽ cung cấp endpoint, key, connection string… cho bạn.

Hướng dẫn cài đặt Supabase cho dự án frontend

Cài đặt thư viện supabase-js

Supabase cung cấp SDK Javascript chính thức để dễ dàng kết nối từ frontend (React, Next.js, Vue, v.v.).
Cài đặt bằng npm hoặc yarn:

npm install @supabase/supabase-js
# hoặc
yarn add @supabase/supabase-js

Kết nối project frontend với Supabase

Bạn cần 2 thông tin: Supabase URL và Anon Key (tìm thấy trong dashboard project).

Tạo một file supabaseClient.js (hoặc đặt ở nơi dùng chung toàn app):

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'https://your-project-id.supabase.co'
const supabaseKey = 'public-anon-key'
export const supabase = createClient(supabaseUrl, supabaseKey)

Lưu ý: Không commit key này lên public repo! Dùng biến môi trường khi có thể.

Cấu hình biến môi trường và security

• Tạo file .env.local (với Next.js, Vite, v.v.):

NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

• Trong code:

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

• Lưu ý bảo mật: Chỉ để lộ anon key, không để lộ service key ra client.

Quản lý Database (Postgres) trên Supabase

Giao diện quản lý database

Supabase cung cấp UI trực quan cho PostgreSQL ngay trong dashboard.
Bạn có thể:

• Tạo/xoá bảng
• Thêm/sửa dữ liệu thủ công
• Xem schema, index, foreign key dễ dàng

Tạo bảng, quản lý schema

1. Vào tab “Table Editor” trong dashboard Supabase
2. Chọn “Create a new table”, điền tên bảng, cột, kiểu dữ liệu
3. Đặt primary key (thường là UUID hoặc serial id)
4. Có thể viết trực tiếp SQL migration nếu muốn tuỳ biến nâng cao

Ví dụ: Tạo bảng todos

• id: uuid (primary key)
• title: text
• is_complete: boolean
• user_id: uuid (foreign key tới bảng users)

Nhập/xuất dữ liệu đơn giản

• Import CSV: Upload file để nhập dữ liệu vào bảng.
• Export: Tải dữ liệu dưới dạng CSV, dễ backup hoặc migrate.
• Có thể chạy query SQL trực tiếp để xử lý dữ liệu phức tạp.

Authentication với Supabase

Đăng ký, đăng nhập user

Supabase hỗ trợ authentication “out-of-the-box” với API đơn giản:

// Đăng ký user mới
const { user, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'your-password'
})

// Đăng nhập user
const { user, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'your-password'
})

Xác thực qua email, social login

• Hỗ trợ xác thực qua email/password, magic link, Google, Github, v.v.
• Chỉ cần cấu hình provider trong dashboard, lấy client id/secret từ Google, Github…

Quản lý session và bảo mật

• Supabase SDK tự quản lý token (JWT) và session user trên client
• Có thể lấy thông tin user đang đăng nhập qua supabase.auth.getUser()
• Đăng xuất bằng:

await supabase.auth.signOut()

• Lưu ý: Cần bảo mật key, set rule phù hợp cho các bảng database (Row Level Security – RLS).

Realtime, Storage và Functions

Sử dụng realtime database

Supabase hỗ trợ realtime trên PostgreSQL thông qua WebSocket.
Bạn có thể lắng nghe thay đổi dữ liệu (insert/update/delete) trực tiếp trên bảng.

Ví dụ: Theo dõi thay đổi bảng todos:

const channel = supabase
  .channel('public:todos')
  .on('postgres_changes', { event: '*', schema: 'public', table: 'todos' }, (payload) => {
    console.log('Realtime update:', payload)
  })
  .subscribe()

Khi có thay đổi (thêm/xoá/sửa), callback sẽ được gọi giúp UI cập nhật tức thì.

Lưu trữ file, upload/download

Supabase Storage là giải pháp lưu file (ảnh, video, tài liệu) an toàn, dễ dùng.

Ví dụ: Upload file

const { data, error } = await supabase
  .storage
  .from('avatars')
  .upload('public/avatar1.png', fileInput.files[0])

• Có thể public/private bucket, tạo link truy cập file, kiểm soát quyền truy cập dựa theo user.

Edge Functions (tương tự cloud functions)

Supabase Edge Functions cho phép viết hàm serverless chạy gần user, giải quyết các nghiệp vụ backend nhẹ nhàng mà không cần deploy server riêng.

• Viết bằng TypeScript hoặc JavaScript.
• Triển khai trực tiếp từ CLI.
• Có thể gọi từ frontend qua HTTP endpoint.

Ví dụ thực tế: Xây dựng app Todo cơ bản

Tạo database bảng Todo

1. Vào “Table Editor” -> Tạo bảng todos với các trường:
   • id: uuid (primary key)
   • title: text
   • is_complete: boolean
   • user_id: uuid (liên kết tới bảng users)

CRUD Todo với Supabase

Thêm mới Todo:

const { data, error } = await supabase
  .from('todos')
  .insert([{ title: 'Làm bài tập Supabase', is_complete: false, user_id }])

Lấy danh sách Todo:

const { data, error } = await supabase
  .from('todos')
  .select('*')
  .eq('user_id', user.id)

Cập nhật trạng thái Todo:

await supabase
  .from('todos')
  .update({ is_complete: true })
  .eq('id', todoId)

Xoá Todo:

await supabase
  .from('todos')
  .delete()
  .eq('id', todoId)

Hiển thị realtime, xác thực user

• Khi có sự kiện CRUD, có thể lắng nghe và cập nhật UI tự động với Realtime.
• Mỗi Todo gắn user_id để phân quyền từng người dùng.

Cài đặt Supabase bằng Docker (Self-host)

1. Yêu cầu hệ thống

Trước khi bắt đầu, hãy đảm bảo bạn đã cài đặt:

• Git: Để clone repository của Supabase.
• Docker và Docker Compose: Để chạy các container của Supabase.

Trên Ubuntu/Debian, bạn có thể cài đặt bằng lệnh:

sudo apt update && sudo apt install git docker.io docker-compose

2. Clone repository Supabase

Sử dụng Git để clone repository chính thức của Supabase:

git clone --depth 1 https://github.com/supabase/supabase

Sau khi clone, bạn sẽ có thư mục supabase/ chứa toàn bộ mã nguồn và cấu hình Docker.

3. Cấu hình môi trường

Di chuyển vào thư mục Docker và sao chép file cấu hình mẫu:

cd supabase/docker
cp .env.example .env

Mở file .env và cập nhật các biến môi trường quan trọng:

• POSTGRES_PASSWORD: Mật khẩu cho PostgreSQL.
• JWT_SECRET: Chuỗi bí mật để ký JWT.
• ANON_KEY và SERVICE_ROLE_KEY: Khóa API cho ứng dụng.

Bạn có thể sử dụng công cụ tạo JWT của Supabase để tạo các khóa này.

4. Khởi động Supabase bằng Docker Compose

Chạy lệnh sau để tải và khởi động các dịch vụ của Supabase:

docker compose up -d

Lệnh này sẽ khởi động các dịch vụ như:

• PostgreSQL: Cơ sở dữ liệu chính.
• Auth: Dịch vụ xác thực người dùng.
• Storage: Quản lý lưu trữ tệp.
• Realtime: Cập nhật dữ liệu theo thời gian thực.
• Studio: Giao diện quản trị Supabase.

5. Truy cập Supabase Studio

Sau khi khởi động, bạn có thể truy cập Supabase Studio tại địa chỉ:

http://localhost:3000

Đăng nhập bằng thông tin mặc định (nên thay đổi ngay sau lần đăng nhập đầu tiên):

• Username: supabase
• Password: this_password_is_insecure_and_should_be_updated

6. Kết nối đến PostgreSQL

Supabase sử dụng Supavisor làm connection pooler. Bạn có thể kết nối đến PostgreSQL bằng lệnh:

psql 'postgres://postgres.your-tenant-id:your-super-secret-and-long-postgres-password@localhost:5432/postgres'

Hoặc sử dụng port 6543 cho kết nối qua pooler:

psql 'postgres://postgres.your-tenant-id:your-super-secret-and-long-postgres-password@localhost:6543/postgres'

Thay thế your-tenant-id và your-super-secret-and-long-postgres-password bằng thông tin tương ứng trong file .env.

7. Bảo mật và cập nhật

• Thay đổi thông tin đăng nhập mặc định: Ngay sau khi cài đặt, hãy cập nhật username và password để đảm bảo an toàn.
• Cập nhật dịch vụ: Để cập nhật các dịch vụ Supabase, chạy:

docker compose pull
docker compose up -d

Sử dụng HTTPS: Để triển khai Supabase với HTTPS, bạn có thể cấu hình reverse proxy như Nginx hoặc sử dụng dịch vụ như Traefik.

FAQ: Các câu hỏi thường gặp về Supabase

So sánh với Firebase

Tài liệu, nguồn tham khảo và cộng đồng Supabase

Link tài liệu chính thức

• Supabase Documentation: Tài liệu chi tiết chính thức, đầy đủ ví dụ, API và hướng dẫn từng bước.
• Supabase GitHub: Xem mã nguồn, đóng góp, theo dõi roadmap và release mới.

Kênh cộng đồng, Slack/Discord

• Discord chính thức: Supabase Discord – Nơi giao lưu, hỏi đáp trực tiếp với dev quốc tế và team Supabase.
• Twitter/X: Theo dõi @supabase để cập nhật tin tức, cập nhật mới nhanh nhất.
• Forum: Supabase Community – Chia sẻ vấn đề, hỏi đáp và học hỏi kinh nghiệm thực chiến.

Các repo, template hữu ích

• awesome-supabase: Tổng hợp resource, template, ví dụ thực tế, tool cho Supabase.
• supabase/examples: Các project mẫu với React, Next.js, Vue, Svelte, Flutter, v.v.
• supabase-community: Thư viện mở rộng do cộng đồng đóng góp.