Supabase Storage Giúp Lưu Trữ Media Dễ Dàng Cho Ứng Dụng Của Bạn

Tại sao nên sử dụng Supabase Storage cho ứng dụng của bạn

Trong bối cảnh ứng dụng web và di động ngày càng phát triển, việc lưu trữ và quản lý file media (hình ảnh, video, tài liệu) trở thành một phần không thể thiếu. Nhiều nhà phát triển vẫn quen với việc tự host hoặc dùng các dịch vụ lưu trữ truyền thống, nhưng Supabase Storage mang đến một giải pháp đơn giản, bảo mật và tích hợp chặt chẽ với cơ sở dữ liệu Postgres. Điều này giúp tiết kiệm thời gian, giảm độ phức tạp và tăng khả năng mở rộng cho dự án của bạn.

Đặc điểm nổi bật của Supabase Storage

Supabase Storage được xây dựng dựa trên hệ sinh thái của Supabase, cho phép bạn lưu trữ file trực tiếp trong project của mình mà không cần chuyển sang một nhà cung cấp khác. Dưới đây là một số tính năng chính:

- Tích hợp sẵn với Supabase Auth: Mỗi file có thể được gán quyền truy cập dựa trên user, giúp kiểm soát ai có thể xem hoặc tải file. - Hỗ trợ CDN: File được phân phối nhanh chóng đến người dùng trên toàn cầu thông qua CDN của Supabase. - Direct upload: Cho phép client upload file trực tiếp lên Supabase Storage mà không cần thông qua server, giảm tải cho backend. - Quản lý bucket và folder: Tổ chức file một cách có hệ thống, dễ dàng tìm kiếm và quản lý. - Bảo mật cao: Mọi request đều được ký và xác thực, đảm bảo chỉ những user được cấp quyền mới có thể truy cập file.

Hướng dẫn tích hợp Supabase Storage vào ứng dụng

Bước 1: Khởi tạo project và cài đặt thư viện

Để bắt đầu, bạn cần có một project Supabase. Sau khi đăng nhập vào dashboard, tạo một project mới và lấy URL và anon public key từ mục Settings > API.

Tiếp theo, cài đặt các thư viện cần thiết trong project của bạn:

npm install @supabase/supabase-js

Bước 2: Khởi tạo client Supabase

Trong file khởi tạo (ví dụ supabaseClient.js), thêm đoạn code sau:

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

const supabaseUrl = 'https://your-project.supabase.co'
const supabaseAnonKey = 'your-anon-public-key'


export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Bước 3: Tạo bucket và thiết lập quyền truy cập

Truy cập vào dashboard Supabase, chọn Storage, sau đó tạo một bucket mới (ví dụ: avatars). Bucket này sẽ chứa toàn bộ file media của bạn.

Tiếp theo, thiết lập Row Level Security (RLS) để kiểm soát quyền truy cập. Supabase cung cấp sẵn các policy, bạn có thể tạo policy cho phép user upload và xem file của chính họ:

-- Cho phép user upload file vào bucket của họ
CREATE POLICY "Users can upload own files" ON storage.objects
FOR INSERT WITH CHECK (
  bucket_id = 'avatars' AND
  auth.uid()::text = user_id
);

-- Cho phép user xem file của chính họ
CREATE POLICY "Users can view own files" ON storage.objects
FOR SELECT USING (
  bucket_id = 'avatars' AND
  (user_id = auth.uid()::text OR user_id IS NULL)
);

Bước 4: Upload file từ client

Để upload file, bạn sử dụng hàm upload của Supabase Storage. Ví dụ, upload avatar cho user:

async function uploadAvatar(userId, file) {
  const filePath = ${userId}/${file.name}
  const { data, error } = await supabase
    .storage
    .from('avatars')
    .upload(filePath, file, {
      upsert: false,
      contentType: file.type,
      metadata: { userId }
    })

if (error) {
    console.error('Upload failed:', error)
    return null
  }


return data
}

Bước 5: Lấy URL và hiển thị file

Sau khi upload, bạn có thể lấy URL của file và hiển thị trong ứng dụng:

async function getAvatarUrl(userId) {
  const { data, error } = await supabase
    .storage
    .from('avatars')
    .getPublicUrl(${userId}/avatar.png)

if (error) {
    console.error('Get URL failed:', error)
    return null
  }


return data.publicURL
}

Bước 6: Xóa file khi cần

Để xóa file, sử dụng hàm remove:

async function deleteAvatar(userId, fileName) {
  const { error } = await supabase
    .storage
    .from('avatars')
    .remove([${userId}/${fileName}])

if (error) {
    console.error('Delete failed:', error)
    return false
  }


return true
}

Lưu ý và best practices

- Quản lý quyền cẩn thận: Luôn thiết lập RLS để tránh việc user truy cập file của nhau. - Sử dụng metadata: Lưu thông tin bổ sung (như user ID, loại file) vào metadata để dễ dàng quản lý và tìm kiếm. - Tối ưu kích thước file: Nén hình ảnh trước khi upload để tiết kiệm dung lượng và tăng tốc độ tải. - Backup định kỳ: Dù Supabase có độ tin cậy cao, bạn nên có kế hoạch backup dữ liệu quan trọng.

Kết luận

Supabase Storage cung cấp một giải pháp toàn diện, dễ sử dụng cho việc lưu trữ và quản lý file media trong ứng dụng. Với khả năng tích hợp sẵn với Auth và Database, cùng với bảo mật mạnh mẽ và hỗ trợ CDN, đây là lựa chọn đáng cân nhắc cho các dự án từ nhỏ đến lớn. Bằng cách làm theo hướng dẫn trên, bạn có thể nhanh chóng triển khai tính năng upload và quản lý file, giúp ứng dụng của mình trở nên chuyên nghiệp và thân thiện hơn với người dùng.