danyakmallun
ProjectsExperienceBlog
Back to Writing
•Development

Cara Deploy Laravel 12 di Vercel with Supabase

Dany Akmallun Ni'am
Dany Akmallun Ni'ammas mas jawa
Cara Deploy Laravel 12 di Vercel with Supabase

Cara Deploy Laravel di Vercel with Supabase

GM!

Berbeda dengan ekosistem Next.js, men-deploy Laravel ke Vercel memerlukan konfigurasi yang sedikit lebih kompleks. Ditambah lagi, sangat jarang ada penyedia hosting Laravel yang menawarkan paket gratis secara cuma-cuma. Akibatnya, banyak proyek akhirnya hanya tertahan di localhost. Namun, jangan khawatir... ada trik khusus agar Laravel bisa berjalan mulus di Vercel. Kali ini, saya akan membagikan pengalaman saya ketika melakukan deployment Laravel di Vercel menggunakan database Supabase.

Namun, karena Laravel memiliki sifat stateless dan Vercel berbasis serverless, ada beberapa trik khusus agar Laravel berjalan mulus di Vercel. Mari kita bedah...

Persiapan Amunisi

Sebelum mulai, pastikan Anda sudah memiliki hal-hal berikut:

  1. Akun GitHub: Untuk menyimpan repositori (wajib).
  2. Akun Vercel: Disarankan login menggunakan GitHub.
  3. Akun Supabase: Sebagai database PostgreSQL.
  4. Kopi ☕: Opsional.

Langkah 1: Setup Database Supabase

Karena Vercel berjalan di lingkungan serverless, alamat IP server akan berubah-ubah. Untuk menghindari masalah koneksi, kita wajib menggunakan Connection Pooler.

  1. Buat proyek baru di Supabase.
  2. Navigasi ke menu Settings > Database.
  3. Cari bagian Connection Pooler.
  4. Aktifkan toggle "Use connection pooler" (Wajib!).
  5. Pastikan Pool Mode disetel ke Session.
  6. Catat kredensialnya (Gunakan Port 6543).

Catatan Penting: Jangan gunakan Direct Connection (Port 5432). Banyak platform serverless mengalami masalah resolusi IPv6. Gunakan selalu Port 6543.

Langkah 2: Konfigurasi Laravel untuk Vercel

Agar Laravel dapat berjalan di infrastruktur Vercel, kita perlu menambahkan beberapa file konfigurasi khusus.

1. Membuat vercel.json

Buat file ini di root directory proyek Anda. File ini bertindak sebagai instruksi bagi Vercel untuk menjalankan PHP.

json
{ "version": 2, "outputDirectory": "public", "framework": null, "functions": { "api/index.php": { "runtime": "vercel-php@0.7.4" } }, "routes": [ { "src": "/build/(.*)", "dest": "/public/build/$1" }, { "src": "/(images|assets|css|js)/(.*)", "dest": "/public/$1/$2" }, { "src": "/(.*)", "primary": true, "dest": "/api/index.php" } ], "env": { "APP_ENV": "production", "APP_DEBUG": "false", "APP_CONFIG_CACHE": "/tmp/config.php", "CACHE_STORE": "array", "SESSION_DRIVER": "cookie" } }

2. Membuat Entry Point api/index.php

Vercel membutuhkan file handler di dalam folder api. Buat folder tersebut dan isi dengan file index.php:

php
<?php // Meneruskan request ke file index utama Laravel require __DIR__ . '/../public/index.php';

3. Konfigurasi .vercelignore

Agar proses deploy lebih cepat, abaikan file yang tidak diperlukan:

text
.env /node_modules /tests /storage/logs README.md

4. Penyesuaian .gitignore

Secara bawaan, Laravel mengabaikan folder public/build. Namun, jika Anda melakukan kompilasi aset (Vite) di lokal, folder ini harus ikut diunggah. Hapus atau beri komentar pada baris berikut di .gitignore:

gitignore
# /public/build <-- Matikan ignore agar aset ikut ter-upload

5. Memaksa Protokol HTTPS

Terkadang terjadi mixed content error di mana Vercel menggunakan HTTPS tetapi Laravel menganggapnya HTTP. Tambahkan kode berikut di app/Providers/AppServiceProvider.php:

php
public function boot(): void { if ($this->app->environment('production')) { \Illuminate\Support\Facades\URL::forceScheme('https'); } }

Langkah 3: Build & Deploy

Sekarang saatnya meluncurkan aplikasi Anda ke internet.

  1. Build Aset: Jalankan npm run build di terminal lokal Anda.
  2. Push ke GitHub: Lakukan commit dan push seluruh perubahan.
  3. Import di Vercel: Buka dashboard Vercel, pilih New Project, dan arahkan ke repositori Anda.
  4. Environment Variables: Masukkan variabel berikut di bagian Environment Variables sebelum klik Deploy:
KeyKeterangan
APP_KEYSalin dari .env lokal Anda (format base64:...)
DB_CONNECTIONpgsql
DB_HOSTHost dari Supabase (Connection Pooler)
DB_PORT6543
DB_DATABASEpostgres
DB_USERNAMEUsername database Anda
DB_PASSWORDPassword database Anda

Pro Tip: Jika muncul error prepared statement does not exist, tambahkan konfigurasi ini di config/database.php pada bagian pgsql:

php
'options' => [ PDO::ATTR_EMULATE_PREPARES => true, ],

Langkah 4: Migrasi Database

Karena Vercel tidak menyediakan akses terminal SSH untuk menjalankan php artisan migrate, cara termudah adalah melakukannya dari komputer lokal Anda:

  1. Buka file .env di lokal secara sementara.
  2. Ganti kredensial database lokal dengan kredensial Supabase.
  3. Jalankan perintah php artisan migrate dari terminal laptop Anda.
  4. Setelah selesai, kembalikan isi .env lokal ke pengaturan semula.

Langkah 5: Penanganan File Upload

Penyimpanan di Vercel bersifat ephemeral (sementara). File yang diunggah ke folder storage akan hilang secara otomatis. Solusinya, kita gunakan Supabase Storage sebagai penggantinya.

1. Setup di Supabase

  • Buka menu Storage, buat bucket baru (misalnya: uploads).
  • Pastikan statusnya adalah Public.

2. Install Driver S3

Laravel dapat berkomunikasi dengan Supabase Storage menggunakan protokol S3. Jalankan:

bash
composer require league/flysystem-aws-s3-v3 "^3.0"

3. Konfigurasi Env untuk Storage

Tambahkan variabel berikut di Vercel Dashboard agar Laravel tahu di mana harus menyimpan file:

  • FILESYSTEM_DISK = s3
  • AWS_ACCESS_KEY_ID = (Cek di Project Settings > API)
  • AWS_SECRET_ACCESS_KEY = (Cek di Project Settings > API)
  • AWS_DEFAULT_REGION = ap-southeast-1 (atau region Supabase Anda)
  • AWS_BUCKET = uploads
  • AWS_URL = (URL publik bucket Anda)
  • AWS_ENDPOINT = (Endpoint S3 dari Supabase)

Troubleshooting & Tips

  • CSS/JS Tidak Muncul? Pastikan Anda sudah menjalankan npm run build dan folder public/build tidak ter-ignore oleh Git.
  • Error 500? Periksa Function Logs di dashboard Vercel untuk melihat pesan error PHP yang lebih detail.
  • Session Bermasalah? Pastikan SESSION_DRIVER diatur ke cookie karena serverless tidak mendukung session berbasis file secara stabil.

Penutup

Sekarang aplikasi Laravel 12 Anda sudah mengudara secara gratis dengan performa yang mumpuni. Memanfaatkan infrastruktur serverless memang butuh sedikit penyesuaian, tapi hasilnya sangat sepadan.

Bagikan artikel ini