Mendeploy Supabase

Supabase adalah alternatif open-source populer untuk Firebase. Supabase menyediakan rangkaian alat seperti database Postgres, autentikasi, API, dan penyimpanan file—menjadikannya solusi backend yang kuat.

Zeabur menyederhanakan deployment stack yang kompleks ini. Dengan Zeabur, Anda dapat meluncurkan instance Supabase yang berfungsi penuh (termasuk Kong Gateway, Authentication, dan PostgreSQL) hanya dengan satu klik tanpa konfigurasi manual.

Apa yang akan Anda pelajari

Dalam tutorial ini, kami akan memandu Anda untuk:

1. Mendeploy stack layanan Supabase dari Zeabur Marketplace.
2. Mengakses Dashboard Supabase melalui Kong Gateway.
3. Mengambil API key Anda dan menghubungkan aplikasi Anda.

⚠️ Batasan penting:

Tidak ada Logs di UI: Fitur "Logs" di Supabase Studio tidak akan berfungsi (karena service Vector tidak ada). Anda harus mengecek log melalui dashboard Zeabur untuk tiap service. Tidak ada MCP: Server AI Model Context Protocol tidak disertakan dalam template ini.

---

Fase 1: Mendeploy Service

Langkah 1: Membuat Service Supabase

Zeabur menyediakan "one-click deployment" melalui marketplace template.

Opsi 1: Membuat instance Supabase dari halaman Project

1. Masuk ke Zeabur Dashboard.
2. Klik tombol "Add Service".
3. Pilih "Template" (Marketplace).
4. Cari Supabase.
5. Pilih template Supabase. Service Anda (termasuk PostgreSQL, minio, dan Kong) akan mulai ter-deploy segera.

Langkah 2: Mengakses Dashboard Supabase (Kong Gateway)

Berbeda dengan database standalone, Supabase di Zeabur menggunakan Kong Gateway untuk mengelola akses. Anda perlu mengambil kredensial untuk login ke UI.

1. Buka panel service Kong di dalam project Anda.
2. Di sana Anda akan menemukan Supabase Username dan Supabase Password.
3. Buka bagian Domains di sisi panel service Kong dan klik URL yang disediakan.
4. Gunakan kredensial dari langkah 2 untuk login ke Dashboard Supabase.

kong.png

---

Fase 2: Mengamankan Instance Anda (KRITIS)

⚠️ PERINGATAN: Template ini ter-deploy dengan API key default untuk keperluan demo. Anda HARUS membuat key baru sebelum digunakan untuk produksi, atau siapa pun yang mengetahui key default dapat mengakses database Anda.

Langkah 1: Generate key baru

1. Kunjungi Supabase JWT Generator.
2. Buat JWT_SECRET kustom dan gunakan tool tersebut untuk menghasilkan:
   • Key anon.
   • Key service_role.

Langkah 2: Update environment variable di Kong

1. Kembali ke service Kong di Zeabur.
2. Buka tab Variables.
3. Update nilai berikut dengan key baru Anda:
   • JWT_SECRET: Secret kustom Anda.
   • ANON_KEY: Key anon baru Anda.
   • SERVICE_ROLE_KEY: Key service_role baru Anda.

Langkah 3: Restart service

Untuk menerapkan perubahan keamanan ini, Anda harus me-restart stack:

1. Buka Project Settings → General.
2. Scroll ke Batch Actions.
3. Klik Restart All.

---

Fase 3: Konfigurasi (Auth & Email)

Secara default, Supabase tidak dapat mengirim email (magic link, reset password). Anda perlu mengonfigurasi provider SMTP. Kami merekomendasikan Resend, namun provider SMTP mana pun bisa.

Langkah 1: Konfigurasi SMTP (Email)

1. Buka service Auth di project Zeabur Anda.
2. Buka tab Variables lalu tambahkan:
   • GOTRUE_SMTP_HOST: smtp.resend.com (atau provider Anda)
   • GOTRUE_SMTP_PORT: 587
   • GOTRUE_SMTP_USER: resend (atau username Anda)
   • GOTRUE_SMTP_PASS: re_123... (API Key Anda)
   • GOTRUE_SMTP_ADMIN_EMAIL: noreply@yourdomain.com
   • GOTRUE_SITE_URL: https://your-project-domain.zeabur.app (tautan redirect untuk pengguna)
3. Restart service Auth untuk menerapkan perubahan.

Langkah 2: Konfigurasi OAuth (Google/Apple) - Opsional

Untuk mengaktifkan Google Login, tambahkan variable berikut ke service Auth:

• GOTRUE_EXTERNAL_GOOGLE_ENABLED: true
• GOTRUE_EXTERNAL_GOOGLE_CLIENT_ID: your-google-client-id
• GOTRUE_EXTERNAL_GOOGLE_SECRET: your-google-secret
• GOTRUE_EXTERNAL_GOOGLE_REDIRECT_URI: https://your-project.zeabur.app/auth/v1/callback

Catatan: Pastikan Anda mengganti your-project.zeabur.app dengan domain Anda yang sebenarnya.

Langkah 3: Test email (manual)

Setelah service restart, verifikasi konfigurasi dengan memicu signup secara manual via terminal:

curl -X POST "https://your-project.zeabur.app/auth/v1/signup" \
  -H "Content-Type: application/json" \
  -H "apikey: YOUR_ANON_KEY" \
  -d '{
    "email": "test@example.com",
    "password": "yourpassword"
  }'

Hasil yang diharapkan:

• Anda menerima respons JSON 200 OK.
• Email verifikasi masuk ke inbox test@example.com (cek spam).

Troubleshooting email

• Redirect URI Mismatch: Pastikan GOTRUE_SITE_URL sama persis dengan domain yang Anda deploy.
• SPF/DKIM: Jika memakai domain kustom, pastikan DNS record sesuai dengan persyaratan provider SMTP agar tidak ditolak.
• Delivery: Email awal sering masuk spam; lakukan "warm up" domain atau tandai sebagai "bukan spam".

---

Fase 4: Menghubungkan dengan Supabase

Prasyarat: Ambil API key Anda

Penting: Jangan menyalin key dari dashboard Supabase Studio, karena bisa menampilkan key default lama.

1. Buka service Kong di Zeabur → Variables.
2. Salin ANON_KEY dan URL domain Anda.

Opsi 1: Hubungkan frontend/app Anda

Cocok untuk: Menghubungkan project Lovable atau aplikasi web standar.

Untuk mengaktifkan komunikasi antara aplikasi frontend dan backend Supabase Anda, Anda perlu mengatur environment variable di codebase.

1. Buat atau buka file .env di root project Anda.

2. Tambahkan kredensial dari langkah Prasyarat:

   VITE_SUPABASE_URL=[your-project-url]
   VITE_SUPABASE_ANON_KEY=[your-anon-key]
   
   

Opsi 2: Sinkronisasi skema database (CLI)

Cocok untuk: Developer yang ingin mendorong perubahan database lokal ke instance produksi.

Anda dapat mendorong skema database lokal ke Supabase menggunakan connection string.

1. Ambil Connection String: Buka panel service PostgreSQL (bagian dari stack Supabase) di dashboard Zeabur.

2. Salin: Salin connection string PostgreSQL.

   PostgreSQL Connection String

3. Jalankan perintah: Jalankan perintah berikut di terminal (pastikan Supabase CLI sudah terpasang):

   supabase db push --db-url "[your-supabase-postgresql-connection-string]" --debug
   
   

---

Fase 4.5: Menghubungkan App Anda (Antar-Service)

Saat Anda mendeploy aplikasi Anda ke Zeabur berdampingan dengan Supabase, Anda harus menyuntikkan kredensial ke environment deployment.

Cara manual

1. Buka pengaturan App Service Anda di Zeabur.
2. Klik tombol Configurable (atau buka tab Variables).
3. Tambahkan variable berikut:
   • VITE_SUPABASE_URL: Tempel URL Project Anda.
   • VITE_SUPABASE_ANON_KEY: Tempel public key anon Anda.

Petunjuk: Pastikan file kredensial seperti .env ada di .gitignore untuk mencegah kebocoran secret.

---

Fase 5: Konfigurasi Lanjutan (Opsional)

Tambahkan variable berikut ke service tertentu untuk mengaktifkan fitur lanjutan.

1. Advanced Auth Hooks (Service Auth)

Tambahkan ini ke variable service Auth untuk memicu fungsi Postgres pada event tertentu:

• Custom Access Token Hook:
  • GOTRUE_HOOK_CUSTOM_ACCESS_TOKEN_ENABLED=true
  • GOTRUE_HOOK_CUSTOM_ACCESS_TOKEN_URI=pg-functions://postgres/public/custom_access_token_hook
• MFA Verification Hook:
  • GOTRUE_HOOK_MFA_VERIFICATION_ATTEMPT_ENABLED=true
  • GOTRUE_HOOK_MFA_VERIFICATION_ATTEMPT_URI=pg-functions://postgres/public/mfa_verification_attempt
• Password Verification Hook:
  • GOTRUE_HOOK_PASSWORD_VERIFICATION_ATTEMPT_ENABLED=true
  • GOTRUE_HOOK_PASSWORD_VERIFICATION_ATTEMPT_URI=pg-functions://postgres/public/password_verification_attempt

2. Asisten AI di Studio (Service Studio)

Aktifkan asisten SQL AI di dashboard dengan menambahkan ini ke variable service Studio:

• OPENAI_API_KEY=your-openai-api-key

3. Penyesuaian keamanan (Service Auth)

• GOTRUE_EXTERNAL_SKIP_NONCE_CHECK=true (Berguna untuk Google Sign In di mobile)
• GOTRUE_MAILER_SECURE_EMAIL_CHANGE_ENABLED=true (Wajibkan verifikasi email saat mengganti alamat email)