Cara Deploy Laravel 12 dan React Shadcn UI di VPS: Panduan Lengkap 2025

oleh

Memasuki era pengembangan aplikasi web modern, kombinasi Laravel 12 sebagai backend dan React dengan Shadcn UI sebagai frontend telah menjadi standar emas bagi para developer yang menginginkan performa tinggi serta antarmuka yang elegan. Namun, tantangan terbesar muncul saat aplikasi siap dipublikasikan: bagaimana cara deploy laravel 12 dan react shadcn ui di vps agar berjalan stabil, aman, dan cepat? Artikel ini akan mengupas tuntas langkah-langkah teknis mulai dari konfigurasi server hingga optimasi akhir.

Mengapa Memilih Laravel 12 dan React Shadcn UI?

Laravel 12 membawa peningkatan signifikan pada efisiensi dependency injection dan integrasi Vite yang lebih mulus. Di sisi lain, Shadcn UI bukan sekadar library komponen biasa; ia adalah koleksi komponen yang dapat Anda salin dan sesuaikan sepenuhnya, memberikan fleksibilitas luar biasa pada sisi React. Menguasai cara deploy laravel 12 dan react shadcn ui di vps akan memberikan Anda kontrol penuh atas infrastruktur aplikasi Anda dibandingkan menggunakan layanan PaaS (Platform as a Service) yang seringkali lebih mahal.

Langkah 1: Konfigurasi Dasar VPS (Ubuntu 24.04)

Langkah pertama dalam cara deploy laravel 12 dan react shadcn ui di vps adalah menyiapkan lingkungan server yang bersih. Kami menyarankan penggunaan Ubuntu 24.04 LTS untuk dukungan jangka panjang.

Setelah mendapatkan akses IP dan password dari provider VPS Anda (seperti DigitalOcean, Linode, atau Vultr), masuklah melalui SSH:

ssh root@ip_address_vps_anda

Segera lakukan update package untuk memastikan keamanan sistem:

sudo apt update && sudo apt upgrade -y

Disarankan juga untuk membuat user baru non-root demi keamanan:

adduser deployer
usermod -aG sudo deployer
su - deployer

Langkah 2: Instalasi LEMP Stack (PHP 8.4, Nginx, MySQL)

Laravel 12 membutuhkan versi PHP terbaru (minimal PHP 8.2, namun disarankan 8.3 atau 8.4 untuk fitur terbaik). Berikut cara menginstalnya di Ubuntu:

sudo add-apt-repository ppa:ondrej/php -y
sudo apt update
sudo apt install nginx mysql-server php8.4-fpm php8.4-mysql php8.4-xml php8.4-curl php8.4-mbstring php8.4-zip php8.4-bcmath php8.4-intl unzip -y

Pastikan Nginx dan PHP-FPM sudah berjalan otomatis saat server booting:

sudo systemctl enable nginx
sudo systemctl enable php8.4-fpm

Langkah 3: Konfigurasi Database dan User

Keamanan database adalah prioritas utama. Jalankan script pengaman MySQL:

sudo mysql_secure_installation

Setelah itu, masuk ke MySQL untuk membuat database bagi aplikasi Laravel 12 Anda:

sudo 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;

Langkah 4: Deploy Project Laravel 12 ke VPS

Sekarang kita masuk ke inti dari cara deploy laravel 12 dan react shadcn ui di vps. Gunakan Git untuk menarik kode dari repository (GitHub/GitLab):

cd /var/www
sudo chown -R deployer:deployer /var/www
git clone https://github.com/username/nama-repo.git my-app
cd my-app

Instal dependensi PHP menggunakan Composer:

composer install --no-dev --optimize-autoloader

Salin file .env dan atur konfigurasinya:

cp .env.example .env
nano .env

Sesuaikan bagian DB_DATABASE, DB_USERNAME, dan DB_PASSWORD dengan data yang telah dibuat di Langkah 3. Jangan lupa generate app key:

php artisan key:generate
php artisan migrate --force

Langkah 5: Build Frontend React dan Shadcn UI

Karena Shadcn UI berbasis Tailwind CSS dan React, kita perlu melakukan proses build pada sisi VPS (atau menggunakan CI/CD). Pastikan Node.js sudah terinstal:

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

Sekarang, instal dependensi NPM dan lakukan proses build:

npm install
npm run build

Catatan: Pastikan file components.json dari Shadcn UI sudah ada di repository Anda agar proses build berjalan lancar tanpa error pathing.

Langkah 6: Konfigurasi Nginx Virtual Host

Agar domain Anda dapat mengakses folder public Laravel, buat file konfigurasi Nginx:

sudo nano /etc/nginx/sites-available/my-app

Masukkan konfigurasi berikut:

server {
    listen 80;
    server_name domainanda.com;
    root /var/www/my-app/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.4-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

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

Aktifkan konfigurasi dan restart Nginx:

sudo ln -s /etc/nginx/sites-available/my-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

Langkah 7: Keamanan dengan SSL Let’s Encrypt

Aplikasi modern wajib menggunakan HTTPS. Gunakan Certbot untuk mendapatkan SSL gratis:

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d domainanda.com

Ikuti instruksi di layar, dan Certbot akan secara otomatis memperbarui konfigurasi Nginx Anda ke port 443 (HTTPS).

Optimasi Performa dan Monitoring

Setelah berhasil menerapkan cara deploy laravel 12 dan react shadcn ui di vps, jangan biarkan aplikasi berjalan dengan standar default. Lakukan optimasi berikut:

  • Caching Laravel: Jalankan php artisan config:cache, php artisan route:cache, dan php artisan view:cache.
  • Queue Worker: Jika aplikasi Anda menggunakan antrian (seperti kirim email), gunakan Supervisor untuk menjaga worker tetap berjalan.
  • OPcache: Pastikan OPcache aktif di php.ini untuk meningkatkan kecepatan eksekusi script PHP.
  • UFW Firewall: Pastikan hanya port 80, 443, dan 22 yang terbuka.
Komponen Rekomendasi Versi Fungsi Utama
PHP 8.3 / 8.4 Bahasa Pemrograman Backend
Node.js 20.x (LTS) Runtime untuk Build React/Vite
Nginx Terbaru Web Server & Reverse Proxy

Kesimpulan dan Langkah Berikutnya

Memahami cara deploy laravel 12 dan react shadcn ui di vps memang membutuhkan ketelitian, terutama pada bagian sinkronisasi antara backend PHP dan build frontend React. Dengan mengikuti panduan ini, Anda kini memiliki aplikasi yang berjalan di infrastruktur yang solid dan scalable.

Langkah selanjutnya adalah mempertimbangkan penggunaan CI/CD (seperti GitHub Actions) agar setiap kali Anda melakukan git push, server akan otomatis melakukan update tanpa perlu intervensi manual. Selamat mencoba dan semoga sukses dengan proyek Laravel 12 Anda!

Tinggalkan komentar