Tutorial Deploy Laravel 12 ke Vercel Gratis 2026: Panduan Lengkap Step-by-Step

oleh

Mendeploy aplikasi web seringkali menjadi tantangan tersendiri bagi para developer, terutama ketika berhadapan dengan biaya server yang terus meningkat. Namun, di tahun 2026 ini, teknologi serverless semakin matang dan memungkinkan kita untuk menjalankan framework besar seperti Laravel tanpa biaya sepeser pun. Dalam artikel ini, kita akan membahas secara mendalam tentang tutorial deploy laravel 12 ke vercel gratis 2026 yang sangat cocok untuk proyek portofolio, MVP, maupun aplikasi skala kecil hingga menengah.

Mengapa Memilih Vercel untuk Laravel 12?

Vercel dikenal sebagai platform terbaik untuk frontend seperti Next.js, namun dengan bantuan community runtimes, kita bisa menjalankan PHP dan Laravel dengan sangat efisien. Mengikuti tutorial deploy laravel 12 ke vercel gratis 2026 memberikan Anda keuntungan berupa skalabilitas otomatis, integrasi CI/CD yang mulus, dan tentu saja, sertifikat SSL gratis selamanya.

Laravel 12 hadir dengan berbagai optimasi pada sisi containerization dan service providers yang membuatnya lebih ringan saat dijalankan di lingkungan serverless. Dengan menggunakan Vercel, Anda tidak perlu lagi dipusingkan dengan manajemen server (Nginx/Apache), update OS, atau konfigurasi firewall yang rumit.

Persiapan Sistem dan Prasyarat

Sebelum memulai proses deployment, pastikan lingkungan pengembangan lokal Anda sudah memenuhi standar terbaru tahun 2026. Berikut adalah hal-hal yang perlu Anda siapkan:

  • PHP 8.3 atau 8.4: Laravel 12 membutuhkan versi PHP terbaru untuk fitur keamanan dan performa maksimal.
  • Composer: Dependency manager untuk mengelola paket-paket Laravel.
  • Node.js & NPM: Diperlukan untuk kompilasi aset menggunakan Vite.
  • Akun GitHub: Sebagai jembatan otomatisasi ke Vercel.
  • Akun Vercel: Daftar menggunakan akun GitHub Anda untuk mempermudah sinkronisasi.

Langkah 1: Instalasi Laravel 12 Terbaru

Mari kita mulai dengan membuat proyek Laravel baru. Buka terminal Anda dan jalankan perintah berikut:

composer create-project laravel/laravel:^12.0 my-vercel-app

Setelah proses instalasi selesai, masuk ke direktori proyek tersebut:

cd my-vercel-app

Pastikan aplikasi berjalan dengan baik di lokal dengan menjalankan php artisan serve. Jika halaman sambutan Laravel muncul, berarti Anda siap untuk tahap berikutnya dalam tutorial deploy laravel 12 ke vercel gratis 2026 ini.

Langkah 2: Konfigurasi Struktur Folder untuk Vercel

Vercel secara default mencari file di folder api atau public untuk dieksekusi sebagai serverless functions. Karena Laravel menggunakan folder public/index.php sebagai entry point, kita perlu melakukan sedikit modifikasi.

Buatlah sebuah folder baru bernama api di root direktori proyek Anda. Di dalam folder api tersebut, buat file bernama index.php. Isi file tersebut dengan kode berikut:

Penting: File ini berfungsi untuk mengarahkan semua request dari Vercel ke bootstrap Laravel. 

<?php
require __DIR__ . '/../public/index.php';

Langkah sederhana ini sangat krusial agar Vercel dapat mengenali struktur routing Laravel dengan benar tanpa mengubah struktur inti framework.

Langkah 3: Membuat File vercel.json

Ini adalah bagian terpenting dari tutorial deploy laravel 12 ke vercel gratis 2026. File vercel.json memberitahu Vercel bagaimana cara memproses file PHP kita.

Buat file vercel.json di root direktori dan masukkan konfigurasi berikut:

{
  "version": 2,
  "functions": {
    "api/index.php": {
      "runtime": "[email protected]"
    }
  },
  "routes": [
    {
      "src": "/(.*)",
      "dest": "api/index.php"
    }
  ],
  "env": {
    "APP_ENV": "production",
    "APP_DEBUG": "false",
    "APP_URL": "https://your-app-name.vercel.app",
    "APP_CONFIG_CACHE": "/tmp/config.php",
    "APP_EVENTS_CACHE": "/tmp/events.php",
    "APP_PACKAGES_CACHE": "/tmp/packages.php",
    "APP_ROUTES_CACHE": "/tmp/routes.php",
    "VIEW_COMPILED_PATH": "/tmp",
    "CACHE_DRIVER": "array",
    "LOG_CHANNEL": "stderr",
    "SESSION_DRIVER": "cookie"
  }
}

Perhatikan bagian /tmp. Karena sistem file Vercel bersifat read-only, kita harus mengarahkan semua cache Laravel ke folder /tmp yang bersifat writable di lingkungan serverless.

Langkah 4: Menghubungkan Database Cloud (Neon/Supabase)

Vercel tidak menyediakan database SQL bawaan secara gratis yang persisten. Oleh karena itu, kita perlu menggunakan layanan pihak ketiga. Di tahun 2026, Neon (PostgreSQL) atau Supabase adalah pilihan terbaik untuk database serverless.

  • Daftar di Neon.tech.
  • Buat proyek baru dan salin Connection String yang diberikan.
  • Buka file .env di lokal dan sesuaikan konfigurasinya:
DB_CONNECTION=pgsql
DB_HOST=ep-example-123456.aws.neon.tech
DB_PORT=5432
DB_DATABASE=neondb
DB_USERNAME=alex
DB_PASSWORD=yourpassword
DB_SSLMODE=require

Jangan lupa untuk menjalankan migrasi di lokal terlebih dahulu untuk memastikan koneksi berhasil sebelum di-deploy ke Vercel.

Langkah 5: Push Proyek ke GitHub

Vercel bekerja paling baik dengan alur kerja Git. Buat repository baru di GitHub, lalu jalankan perintah berikut di terminal Anda:

git init
git add .
git commit -m "Initial commit for Laravel 12 on Vercel"
git remote add origin https://github.com/username/repo-name.git
git branch -M main
git push -u origin main

Pastikan file .env tidak ikut ter-upload (sudah ada di .gitignore secara default) karena kita akan memasukkan variabel lingkungan secara manual di dashboard Vercel demi keamanan.

Langkah 6: Proses Deployment di Dashboard Vercel

Sekarang saatnya melakukan sihir sesungguhnya dalam tutorial deploy laravel 12 ke vercel gratis 2026:

  1. Buka Vercel Dashboard.
  2. Import repository GitHub yang baru saja Anda buat.
  3. Pada bagian Environment Variables, masukkan semua key dari file .env Anda (APP_KEY, DB_CONNECTION, dll).
  4. Klik tombol Deploy.
  5. Tunggu sekitar 1-2 menit hingga proses build selesai.

Jika berhasil, Vercel akan memberikan URL unik untuk mengakses aplikasi Laravel 12 Anda secara live!

Troubleshooting dan Solusi Error Umum

Meskipun Anda mengikuti tutorial deploy laravel 12 ke vercel gratis 2026 dengan teliti, masalah teknis bisa saja muncul. Berikut adalah beberapa solusi untuk error yang sering ditemui:

1. Error 500: Internal Server Error

Biasanya disebabkan oleh APP_KEY yang belum diatur di Environment Variables Vercel. Pastikan Anda sudah menjalankan php artisan key:generate --show di lokal dan menyalin kodenya ke Vercel.

2. Folder /storage Tidak Writable

Laravel secara default menulis log dan cache ke folder storage. Di Vercel, Anda harus memastikan konfigurasi di vercel.json sudah mengarahkan cache ke /tmp seperti yang dijelaskan pada Langkah 3.

3. Mix/Vite Manifest Not Found

Jika Anda menggunakan Laravel Vite, pastikan Anda menjalankan npm run build sebelum push ke GitHub, atau tambahkan perintah build tersebut di pengaturan Vercel (Build Command: npm run build && php artisan metadata:cache).

Tips Optimasi Performa Laravel di Serverless

Menjalankan Laravel di lingkungan serverless seperti Vercel membutuhkan strategi optimasi yang berbeda dibanding VPS tradisional. Berikut adalah tips pro untuk Anda:

  • Gunakan CDN untuk Aset Statis: Vercel secara otomatis menangani ini, namun pastikan file CSS dan JS Anda sudah diminifikasi.
  • Optimasi Autoloader: Gunakan perintah composer install --optimize-autoloader --no-dev saat proses deployment untuk mempercepat loading class.
  • Pilih Region yang Tepat: Pilih region Vercel yang paling dekat dengan lokasi database Anda (misalnya Singapore jika menggunakan region Asia) untuk meminimalkan latensi database.
  • Gunakan Cache Driver yang Tepat: Hindari file cache driver. Gunakan cookie atau database, atau lebih baik lagi, layanan Redis eksternal seperti Upstash.

Kesimpulan dan Langkah Selanjutnya

Selamat! Anda telah berhasil menyelesaikan tutorial deploy laravel 12 ke vercel gratis 2026. Kini aplikasi Laravel Anda sudah berjalan di infrastruktur kelas dunia secara gratis. Keberhasilan deployment ini membuktikan bahwa Laravel 12 sangat fleksibel untuk berbagai jenis arsitektur modern.

Sebagai langkah selanjutnya, Anda bisa mencoba menambahkan custom domain, mengatur automated testing dengan GitHub Actions, atau mengeksplorasi fitur-fitur baru Laravel 12 lainnya. Selalu pantau penggunaan limit gratis Vercel agar aplikasi Anda tetap berjalan optimal.

Ringkasan Poin Penting:

  • Gunakan file api/index.php sebagai bridge.
  • Konfigurasi vercel.json dengan runtime PHP yang tepat.
  • Arahkan folder cache ke /tmp.
  • Gunakan database cloud eksternal seperti Neon.

Semoga panduan ini bermanfaat bagi perjalanan development Anda di tahun 2026!

Tinggalkan komentar