Deploy Next.js + Supabase ke Cloudflare Workers dengan Biaya 0 Rupiah (Hanya Modal Domain)
Panduan lengkap membangun dan mendeploy aplikasi Next.js dengan database Supabase menggunakan Cloudflare Workers tanpa perlu VPS.tags: - Next.js - Cloudflare Workers - Supabase - PostgreSQL - Serverless - Deployment
###Deploy Next.js + Supabase ke Cloudflare Workers dengan Biaya 0 Rupiah (Hanya Modal Domain)
Selama bertahun-tahun, ketika ingin membuat aplikasi web kita selalu berpikir seperti ini: Client->VPS(Nginx,Node.js / PHP,Database)
#Artinya kita harus menyewa VPS, menginstal web server, mengatur SSL, melakukan deployment melalui SSH, hingga mengelola server secara manual.
Namun sekarang semuanya sudah berubah.
Dengan teknologi **Serverless**, kita dapat membuat aplikasi full-stack tanpa perlu memiliki server sendiri.
Pada artikel ini kita akan membuat arsitektur seperti berikut.
``` Git Push │ ▼ GitHub Repository │ Auto Deploy via Cloudflare │ ▼ Cloudflare Workers (Next.js) │ ▼ Supabase PostgreSQL Database ```
Hasil akhirnya:
- ✅ Tidak perlu VPS - ✅ Tidak perlu Nginx - ✅ Tidak perlu PM2 - ✅ Tidak perlu SSH - ✅ Deploy otomatis dari GitHub - ✅ Database PostgreSQL - ✅ Hanya membayar domain (sekitar Rp3.000/tahun jika promo)
---
# Kenapa Menggunakan Cloudflare Workers?
Cloudflare Workers merupakan platform **Edge Computing** yang memungkinkan aplikasi dijalankan langsung di jaringan Cloudflare tanpa harus menyediakan server sendiri.
Setiap kali pengguna mengakses website, aplikasi akan dijalankan pada lokasi Cloudflare terdekat sehingga waktu respons menjadi lebih cepat.
Keuntungan lainnya adalah kita tidak perlu memikirkan:
- Update sistem operasi - Konfigurasi Nginx - Firewall - SSL - Auto Scaling
Semuanya sudah ditangani oleh Cloudflare.
---
# Kenapa Menggunakan Supabase?
Cloudflare Workers hanya menjalankan aplikasi.
Sedangkan data tetap membutuhkan tempat penyimpanan.
Di sinilah Supabase berperan.
Supabase menyediakan:
- PostgreSQL Database - Authentication - Storage - Dashboard Database - REST API - Realtime
Sehingga kita tidak perlu mengelola database sendiri.
---
# Arsitektur Sistem
``` Browser │ ▼ Cloudflare Workers │ ▼ Next.js │ ▼ Supabase PostgreSQL ```
Perlu dipahami bahwa **database tidak berada di Cloudflare**.
Cloudflare hanya menjalankan aplikasi Next.js.
Database tetap berada di layanan Supabase.
---
# Bagaimana Saat Development?
Saat proses pengembangan, aplikasi tetap dijalankan di komputer lokal.
``` Laptop │ npm run dev │ ▼ Next.js │ Internet │ ▼ Supabase ```
Artinya walaupun aplikasi berjalan di localhost, data tetap tersimpan di Supabase.
Kita tidak perlu menginstal PostgreSQL di komputer.
---
# Bagaimana Saat Production?
Setelah project selesai, cukup lakukan push ke GitHub.
``` git add . git commit -m "Update Blog" git push ```
Cloudflare akan melakukan proses berikut secara otomatis:
1. Mengambil source code dari GitHub 2. Menginstall dependency 3. Melakukan build Next.js 4. Deploy ke Cloudflare Workers
Tidak perlu lagi menjalankan:
- git pull - npm install - npm run build - restart service
Semuanya dilakukan otomatis.
---
# Environment Variable
Saat development kita biasanya menggunakan file:
``` .env.local ```
Contohnya:
```env DATABASE_URL=postgres://... NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=xxxxxxxx ```
Ketika aplikasi dideploy ke Cloudflare, file `.env.local` **tidak ikut diupload**.
Sebagai gantinya, kita cukup membuat Environment Variable pada dashboard Cloudflare dengan nama yang sama.
Cloudflare akan membacanya secara otomatis saat aplikasi dijalankan.
---
# Apakah Database Perlu Dipindahkan ke Cloudflare?
Tidak.
Inilah salah satu kesalahan yang sering dipahami oleh pemula.
Cloudflare tidak harus memiliki database.
Cloudflare hanya menjalankan aplikasi.
``` Cloudflare Workers │ ├── Query Data ├── Login User ├── CRUD Artikel └── Return Response │ ▼ Supabase PostgreSQL ```
Semua data tetap berada di Supabase.
---
# Workflow Development
Seluruh proses pengembangan menjadi jauh lebih sederhana.
``` VS Code │ ▼ npm run dev │ ▼ Supabase │ ▼ Git Commit │ ▼ GitHub │ ▼ Cloudflare Deploy │ ▼ Production ```
Developer cukup fokus membuat fitur tanpa harus mengelola server.
---
# Biaya yang Dibutuhkan
Untuk portfolio maupun blog pribadi, biaya yang diperlukan hampir nol.
| Layanan | Biaya | |---------|-------| | Next.js | Gratis | | GitHub | Gratis | | Cloudflare Workers | Gratis (Free Tier) | | Supabase | Gratis (Free Tier) | | SSL | Gratis | | Domain | ± Rp3.000 (saat promo) |
Dengan kombinasi tersebut kita sudah memiliki infrastruktur modern yang dapat digunakan untuk membangun aplikasi full-stack.
---
# Kelebihan Pendekatan Ini
- Tidak perlu VPS - Deploy otomatis dari GitHub - PostgreSQL yang dikelola Supabase - Mudah dikembangkan - Cocok untuk portfolio - Skalabilitas tinggi - Infrastruktur modern - Biaya operasional sangat rendah
---
# Penutup
Ekosistem pengembangan web telah berubah cukup signifikan.
Jika sebelumnya kita terbiasa mengelola VPS, memasang Nginx, melakukan SSH, hingga restart service setiap selesai deploy, kini proses tersebut dapat disederhanakan menggunakan layanan serverless.
Dengan kombinasi **Next.js**, **Supabase**, dan **Cloudflare Workers**, kita dapat membangun aplikasi full-stack modern yang mudah dikembangkan, mudah dideploy, serta memiliki biaya operasional yang sangat rendah.
Untuk kebutuhan portfolio, blog pribadi, landing page, hingga aplikasi CRUD sederhana, stack ini sudah lebih dari cukup dan menjadi salah satu pilihan yang populer di kalangan developer modern.
Semoga artikel ini membantu Anda memahami bahwa membangun aplikasi full-stack tidak selalu harus dimulai dengan menyewa VPS. Dengan memanfaatkan layanan gratis yang tersedia saat ini, kita sudah dapat membuat aplikasi yang cepat, aman, dan siap digunakan di lingkungan production.