Cara Setup Laravel 12 dan React Shadcn UI di VPS Debian 12: Panduan Lengkap

Membangun aplikasi web yang modern, cepat, dan memiliki antarmuka pengguna (UI) yang elegan adalah impian setiap pengembang. Dalam ekosistem PHP, Laravel tetap menjadi pemimpin pasar, terutama dengan rilis terbaru Laravel 12 yang membawa banyak peningkatan performa dan fitur. Namun, tantangan sebenarnya seringkali muncul saat proses deployment. Artikel ini akan membahas secara mendalam tentang cara setup laravel 12 dan react shadcn ui di vps debian 12 dari nol hingga online.

Mengapa menggunakan Debian 12? Debian dikenal sebagai salah satu distribusi Linux paling stabil untuk server. Dikombinasikan dengan Laravel 12 yang kokoh dan fleksibilitas React serta keindahan Shadcn UI, Anda akan memiliki stack teknologi yang sangat kompetitif di tahun 2025. Mari kita mulai panduan teknis ini.

Daftar Isi

Persiapan VPS Debian 12
Instalasi Stack LEMP (Nginx, MariaDB, PHP 8.3+)
Konfigurasi Database MariaDB
Instalasi Composer dan Node.js
Setup Project Laravel 12
Integrasi React dan Inertia.js
Implementasi Shadcn UI
Konfigurasi Nginx untuk Laravel
Keamanan SSL dengan Certbot
Optimasi Performa Produksi

1. Persiapan VPS Debian 12

Langkah pertama dalam cara setup laravel 12 dan react shadcn ui di vps debian 12 adalah memastikan server Anda dalam kondisi up-to-date. Login ke VPS Anda menggunakan SSH:

ssh root@ip_address_vps_anda

Setelah berhasil login, jalankan perintah pembaruan repositori dan paket sistem:

apt update && apt upgrade -y

Sangat disarankan untuk membuat user non-root dengan hak akses sudo demi keamanan. Gunakan perintah berikut:

adduser username_anda usermod -aG sudo username_anda

2. Instalasi Stack LEMP (Nginx, MariaDB, PHP 8.3+)

Laravel 12 membutuhkan versi PHP terbaru (minimal PHP 8.2, namun disarankan 8.3 atau 8.4 untuk performa terbaik). Debian 12 secara default menyertakan PHP 8.2, namun kita akan menggunakan repositori Sury PHP agar mendapatkan versi terbaru.

Instalasi Nginx

Nginx adalah web server berperforma tinggi yang sangat efisien dalam menangani request konkuren. Instal dengan perintah:

apt install nginx -y

Instalasi PHP 8.3 dan Ekstensi

Tambahkan repositori PHP dan instal paket yang diperlukan Laravel:

apt install apt-transport-https lsb-release ca-certificates curl -y curl -sSLo /usr/share/keyrings/deb.sury.org-php.gpg https://packages.sury.org/php/apt.gpg sh -c 'echo "deb [signed-by=/usr/share/keyrings/deb.sury.org-php.gpg] https://packages.sury.org/php/ $(lsb_release -sc) main" > /etc/apt/sources.list.d/php.list' apt update apt install php8.3-fpm php8.3-mysql php8.3-xml php8.3-curl php8.3-mbstring php8.3-zip php8.3-bcmath php8.3-intl -y

3. Konfigurasi Database MariaDB

MariaDB adalah fork dari MySQL yang lebih cepat dan open-source. Instal MariaDB dengan perintah:

apt install mariadb-server -y

Setelah terinstal, jalankan script keamanan untuk mengatur password root database:

mysql_secure_installation

Buat database baru untuk proyek Laravel Anda:

mysql -u root -p CREATE DATABASE laravel_db; CREATE USER 'laravel_user'@'localhost' IDENTIFIED BY 'password_kuat_anda'; GRANT ALL PRIVILEGES ON laravel_db.* TO 'laravel_user'@'localhost'; FLUSH PRIVILEGES; EXIT;

4. Instalasi Composer dan Node.js

Composer diperlukan untuk mengelola dependensi PHP, sedangkan Node.js diperlukan untuk mengompilasi aset React dan Tailwind CSS (Shadcn UI).

Instalasi Composer

curl -sS https://getcomposer.org/installer | php mv composer.phar /usr/local/bin/composer

Instalasi Node.js (Version 20.x LTS)

curl -fsSL https://deb.nodesource.com/setup_20.x | bash - apt install -y nodejs

5. Setup Project Laravel 12

Arahkan ke direktori web server, biasanya di /var/www/, dan buat proyek Laravel baru:

cd /var/www/ composer create-project laravel/laravel:^12.0 nama-proyek-anda

Berikan izin akses (permission) yang tepat agar Nginx dapat membaca file:

chown -R www-data:www-data /var/www/nama-proyek-anda/storage chown -R www-data:www-data /var/www/nama-proyek-anda/bootstrap/cache chmod -R 775 /var/www/nama-proyek-anda/storage

Edit file .env untuk menghubungkan database yang telah dibuat sebelumnya:

nano .env

Sesuaikan bagian DB_DATABASE, DB_USERNAME, dan DB_PASSWORD.

6. Integrasi React dan Inertia.js

Dalam cara setup laravel 12 dan react shadcn ui di vps debian 12, kita akan menggunakan Laravel Breeze untuk mempercepat setup React dengan Inertia.js.

composer require laravel/breeze --dev php artisan breeze:install react

Pilih opsi sesuai kebutuhan (misalnya: dark mode, testing framework). Setelah itu, jalankan migrasi database dan instalasi npm:

php artisan migrate npm install npm run build

7. Implementasi Shadcn UI

Shadcn UI bukan sekadar library komponen, melainkan koleksi komponen yang bisa Anda copy-paste dan modifikasi. Ini sangat populer karena fleksibilitasnya.

Inisialisasi Shadcn UI di proyek Anda:

npx shadcn-ui@latest init

Ikuti konfigurasi interaktifnya. Pastikan Anda mengarahkan path ke direktori resources/js. Setelah inisialisasi, Anda bisa menambahkan komponen seperti Button, Card, atau Modal:

npx shadcn-ui@latest add button

Sekarang Anda bisa mengimpor komponen tersebut di dalam file React Anda (misal: resources/js/Pages/Welcome.jsx).

8. Konfigurasi Nginx untuk Laravel

Buat file konfigurasi server block baru untuk domain Anda:

nano /etc/nginx/sites-available/nama-proyek.conf

Masukkan konfigurasi berikut:

server {
    listen 80;
    server_name domain-anda.com;
    root /var/www/nama-proyek-anda/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";

    index index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ .php$ {
        fastcgi_pass unix:/var/run/php/php8.3-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /.(?!well-known).* {
        deny all;
    }
}

Aktifkan konfigurasi dan restart Nginx:

ln -s /etc/nginx/sites-available/nama-proyek.conf /etc/nginx/sites-enabled/ nginx -t systemctl restart nginx

9. Keamanan SSL dengan Certbot

Keamanan adalah prioritas utama. Gunakan Let’s Encrypt untuk mendapatkan sertifikat SSL gratis:

apt install certbot python3-certbot-nginx -y certbot --nginx -d domain-anda.com

Ikuti instruksi untuk mengarahkan trafik HTTP ke HTTPS secara otomatis.

10. Optimasi Performa Produksi

Setelah semua terpasang, jangan lupa melakukan optimasi agar aplikasi Laravel 12 Anda berjalan secepat kilat di VPS Debian 12:

Caching Config: php artisan config:cache
Caching Route: php artisan route:cache
Caching View: php artisan view:cache
Optimize Autoloader: composer install --optimize-autoloader --no-dev
Vite Build: Pastikan npm run build sudah dijalankan untuk meminimalkan ukuran file JS/CSS.

Penting untuk diingat bahwa Laravel 12 memiliki manajemen memory yang lebih baik, namun pastikan swap memory di VPS Anda sudah aktif jika RAM terbatas (misal hanya 1GB).

Kesimpulan

Menerapkan cara setup laravel 12 dan react shadcn ui di vps debian 12 memang memerlukan ketelitian, namun hasil akhirnya adalah aplikasi web yang sangat profesional dan scalable. Dengan mengikuti panduan ini, Anda telah berhasil mengonfigurasi server Linux yang aman, database yang optimal, serta frontend modern dengan React dan Shadcn UI.

Apakah Anda siap meluncurkan proyek berikutnya? Jangan lupa untuk selalu melakukan backup database secara rutin dan memantau log server untuk menjaga kesehatan aplikasi Anda.

Download Dokumentasi Laravel 12