Deploy Laravel dan React ke VPS

{
"slug": "deploy-laravel-react-vps",
"category": "Cloud & VPS",
"excerpt": "Panduan lengkap untuk men-deploy aplikasi Laravel backend dan React frontend ke VPS Ubuntu, termasuk konfigurasi Nginx, SSL, dan optimasi produksi.",
"seo_title": "Deploy Laravel & React ke VPS – Panduan Praktis",
"seo_description": "Pelajari cara menginstal, mengkonfigurasi, dan mengamankan aplikasi Laravel serta React di VPS Ubuntu dengan Nginx, SSL, dan best practice produksi.",
"read_time": 7,
"tags": ["Laravel", "React", "VPS", "Nginx", "Docker", "CI/CD"],
"content": "# Deploy Laravel dan React ke VPS\n\n## Pendahuluan\nAplikasi modern sering memisahkan backend (Laravel) dan frontend (React). Tutorial ini menjelaskan cara men-deploy kedua komponen ke satu VPS berbasis Ubuntu 22.04, menggunakan Nginx sebagai reverse proxy, Supervisor untuk queue, serta Let's Encrypt untuk SSL. Diagram arsitektur singkat:\n\n\n[Client] <--HTTPS--> [Nginx] <---> [Laravel (PHP-FPM)]\n |\n +---> [React (static files)]\n\n\n## Prasyarat & Persiapan\n| Item | Deskripsi |\n|------|-----------|\n| VPS | Ubuntu 22.04, minimal 2 CPU, 4 GB RAM, 40 GB SSD |\n| Domain | A record mengarah ke IP VPS |\n| Akun | Akses root atau sudoer |\n| Software | git, curl, unzip, nginx, php8.2-fpm, composer, nodejs 18+, npm, certbot |\n| AI Tools (opsional) | Gunakan Notion AI (link) untuk menulis dokumentasi, atau Jasper (link) untuk copywriting marketing. |\n\n## Langkah Demi Langkah\n### Step 1 – Persiapan VPS\nbash\n# Update sistem\nsudo apt update && sudo apt upgrade -y\n\n# Install dependensi dasar\nsudo apt install -y git curl unzip nginx certbot python3-certbot-nginx\n\n### Step 2 – Instal PHP & Composer\nbash\nsudo apt install -y php8.2 php8.2-fpm php8.2-mbstring php8.2-xml php8.2-bcmath php8.2-json php8.2-curl php8.2-zip\n\n# Install Composer secara global\nphp -r \"copy('https://getcomposer.org/installer', 'composer-setup.php');\"\nphp composer-setup.php --install-dir=/usr/local/bin --filename=composer\nrm composer-setup.php\n\n### Step 3 – Instal Node.js & Build React\nbash\n# Menggunakan NodeSource\ncurl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -\nsudo apt install -y nodejs\n\n# Verifikasi\nnode -v && npm -v\n\n### Step 4 – Clone Repository\nbash\n# Direktori kerja\nmkdir -p ~/apps && cd ~/apps\n\n# Backend Laravel\ngit clone https://github.com/username/laravel-backend.git laravel\ncd laravel\ncomposer install --no-dev --optimize-autoloader\ncp .env.example .env\nphp artisan key:generate\n\n# Frontend React\ncd ..\ngit clone https://github.com/username/react-frontend.git react\ncd react\nnpm install\nnpm run build # hasil di /build\n\n### Step 5 – Konfigurasi Laravel\nbash\n# Sesuaikan .env (DB, APP_URL, dll.)\nnano .env\n\n# Migrasi & cache\nphp artisan migrate --force\nphp artisan config:cache\nphp artisan route:cache\nphp artisan view:cache\n\n### Step 6 – Setup Supervisor (optional, untuk queue)\nbash\nsudo apt install -y supervisor\n\n# /etc/supervisor/conf.d/laravel-queue.conf\ncat <<EOF | sudo tee /etc/supervisor/conf.d/laravel-queue.conf\n[program:laravel-queue]\nprocess_name=%(program_name)s_%(process_num)02d\ncommand=php /home/ubuntu/apps/laravel/artisan queue:work --sleep=3 --tries=3\nautostart=true\nautorestart=true\nuser=ubuntu\nnumprocs=1\nredirect_stderr=true\nstdout_logfile=/home/ubuntu/apps/laravel/storage/logs/queue.log\nEOF\n\nsudo supervisorctl reread && sudo supervisorctl update\n\n### Step 7 – Konfigurasi Nginx\nbash\n# /etc/nginx/sites-available/laravel-react.conf\ncat <<'EOF' | sudo tee /etc/nginx/sites-available/laravel-react.conf\nserver {\n listen 80;\n server_name example.com www.example.com;\n\n # Laravel root\n root /home/ubuntu/apps/laravel/public;\n index index.php index.html;\n\n # React static files (served from /react)\n location / {\n try_files $uri $uri/ /index.php?$query_string;\n }\n\n location /static/ {\n alias /home/ubuntu/apps/react/build/static/;\n expires 30d;\n access_log off;\n }\n\n location /favicon.ico {\n alias /home/ubuntu/apps/react/build/favicon.ico;\n }\n\n location /manifest.json {\n alias /home/ubuntu/apps/react/build/manifest.json;\n }\n\n location /service-worker.js {\n alias /home/ubuntu/apps/react/build/service-worker.js;\n }\n\n # PHP handling\n location ~ \\.php$ {\n include snippets/fastcgi-php.conf;\n fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;\n fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;\n include fastcgi_params;\n }\n\n # Security headers\n add_header X-Frame-Options \"SAMEORIGIN\";\n add_header X-Content-Type-Options \"nosniff\";\n add_header Referrer-Policy \"no-referrer-when-downgrade\";\n}\nEOF\n\nsudo ln -s /etc/nginx/sites-available/laravel-react.conf /etc/nginx/sites-enabled/\nsudo nginx -t && sudo systemctl reload nginx\n\n### Step 8 – Dapatkan SSL dengan Let's Encrypt\nbash\nsudo certbot --nginx -d example.com -d www.example.com --redirect --no-eff-email --agree-tos -m admin@example.com\n\n### Step 9 – Optimasi Production\nbash\n# Laravel cache\nphp artisan config:cache\nphp artisan route:cache\nphp artisan view:cache\n\n# Enable OPcache (default on Ubuntu) – pastikan di /etc/php/8.2/fpm/php.ini\nsudo sed -i 's/;opcache.enable=1/opcache.enable=1/' /etc/php/8.2/fpm/php.ini\nsudo systemctl restart php8.2-fpm\n\n# React – gunakan gzip & brotli (nginx module) untuk file static\nsudo apt install -y nginx-module-brotli\n# Tambahkan di http block: \n# brotli on; brotli_comp_level 6; brotli_types text/plain text/css application/javascript image/svg+xml;\n\n\n## Tips Optimasi & Keamanan\n- Fail2Ban: instal sudo apt install fail2ban untuk melindungi SSH.\n- UFW: hanya izinkan 22/tcp, 80/tcp, 443/tcp.\n- Database: gunakan managed DB atau set firewall agar hanya IP VPS yang dapat mengakses.\n- Backup: jadwalkan mysqldump dan rsync ke storage eksternal.\n- CI/CD: integrasikan repo dengan GitHub Actions yang menjalankan skrip deploy otomatis. Anda dapat memanfaatkan ChatGPT Plus (link) untuk men-generate workflow YAML.\n\n## Troubleshooting Error Umum\n| Gejala | Penyebab | Solusi |\n|--------|----------|--------|\n| 502 Bad Gateway | PHP-FPM tidak berjalan | sudo systemctl status php8.2-fpm → restart sudo systemctl restart php8.2-fpm |\n| 404 pada route React | Nginx tidak menemukan file index.html | Pastikan root mengarah ke react/build atau gunakan fallback try_files $uri /index.html; |\n| SSL error “certificate not trusted” | Certbot belum selesai atau DNS belum propagasi | Verifikasi DNS, jalankan kembali certbot renew --dry-run |\n| Queue tidak berjalan | Supervisor tidak memuat konfigurasi | sudo supervisorctl reread && sudo supervisorctl update |\n\n## Kesimpulan\nDengan mengikuti langkah di atas, Anda memiliki lingkungan produksi yang terisolasi, aman, dan siap melayani traffic real‑time untuk aplikasi Laravel + React. Proses dapat di‑otomatisasi lebih lanjut menggunakan pipeline CI/CD dan AI‑assisted tools seperti Notion AI atau Jasper untuk dokumentasi dan konten marketing.\n"
}