Cara Instalasi Umami di Vercel dan Supabase (100% Berhasil)

Monday, 9 Dec 2024

Kenapa Umami?

Dulu pakai Google Analytics (GA), tapi performa website jadi lambat, dan datanya nggak 100% aman. Umami jadi alternatif karena self-hosted, nggak mengganggu kecepatan website, dan fiturnya nggak kalah lengkap.
Tutorial ini pakai Next.js sebagai aplikasi fullstack dan Supabase untuk database. Keduanya gratis dan cukup untuk tracking semua websitemu.
 
 
Persiapan Awal:
  1. Akun Vercel (https://vercel.com/)
  1. Akun Github (https://github.com/)
  1. Akun Supabase (https://supabase.com/)
  1. Yarn Classic: Tutorial ini pakai versi 1.22.17 (https://classic.yarnpkg.com/en/docs/install)
 

Langkah 1: Fork dan Edit Repo Umami

  1. Fork repo Umami https://github.com/umami-software/umami
      2. notion image
  1. Clone repo yang di-fork:
  1. Edit db/postgresql/schema.prisma
      • Tambahkan:
      • Hasil akhirnya:
 
Jangan jalankan yarn install atau yarn build dulu ya!
 

Langkah 2: Setup Database di Supabase

  1. Login ke Supabase, klik New Project.
      2. notion image
  1. Isi Project Name dan Database Password (simpan password-nya).
      2. notion image
  1. Setelah setup selesai, klik Connect dan salin Connection URI
      2. notion image
      notion image
 

Langkah 3: Instalasi Lokal & Migrasi Database

  1. Buat file .env di root directory. Tambahkan 2 variable, DATABASE_URL dan DIRECT_DATABASE_URL.
      • Isi DATABASE_URL dengan connection URI yang telah kamu salin tadi dari supabase. Ubah [YOUR-PASSWORD] dengan password yang kamu simpan ketika membuat database tadi.
          • Kemudian tambahkan di belakang connection URI ?pgbouncer=true&connection_limit=1
          Sehingga akan menjadi seperti berikut DATABASE_URL="postgresql://postgres.fkmthmrnsraeeigcznwq:[YOUR-PASSWORD]@aws-0-us-east-1.pooler.supabase.com:6543/postgres?pgbouncer=true&connection_limit=1"
      • Isi DIRECT_DATABASE_URL dengan connection URI. Ganti port-nya dari 65432 menjadi 5432.
          • Sehingga akan menjadi seperti berikut DIRECT_DATABASE_URL="postgresql://postgres.fkmthmrnsraeeigcznwq:[YOUR-PASSWORD]@aws-0-us-east-1.pooler.supabase.com:5432/postgres"
           
      Sehingga isi dari file .env akan menjadi seperti di bawah ini. Ingat, jangan lupa ganti [YOUR-PASSWORD]!
  1. Jalankan
      2. Ini akan melakukan migrasi database dan membuat akun admin (admin:umami)
  1. Cek tabel di Supabase melalui Table Editor untuk memastikan migrasi berhasil.
      2. notion image
      notion image
 

Langkah 4: Jalankan Umami Lokal

  1. Jalankan
  1. Buka http://localhost:3000 dan login pakai admin/umami.
Jika kamu bisa login sampai tahap ini, artinya kamu sudah berhasil setup Umami sepenuhnya. Langkah selanjutnya hanya tinggal deploy ke Vercel.

Langkah 5: Deploy ke Vercel

  1. Commit dan push terlebih dahulu kode yang berubah pada file db/postgresql/schema.prisma
  1. Login ke Vercel, klik Add New Project, lalu import repo Umami
      2. notion image
      notion image
  1. Atur konfigurasi seperti berikut.
      • Build Command: yarn build
      • Install Command: yarn install
      • Tambahkan Environment Variables sesuai file .env.
      notion image
 
Klik Deploy.
Tunggu sampai proses selesai dan Umami siap dipakai untuk menambahkan analytic pada website-website mu.

Catatan Akhir

Ganti password admin setelah deploy.
Selamat mencoba!