Konfigurasi Aplikasi dengan Backend CI 4 dan frontend React.js di VPS Ubuntu 24 Lts

Setiap kali Anda ingin membuat aplikasi baru dengan arsitektur yang sama, Anda tinggal mengikuti langkah ringkas ini:

1. Frontend React.js:

• Jalankan perintah build: yarn build (menghasilkan folder dist/).
• Upload folder dist/ ke VPS (misal: /var/www/app-baru/frontend/dist).
• Set .env React ke URL API: VITE_APP_API_URL=https://domain-anda.com/api.

2. Backend CodeIgniter 4:

• Upload folder backend CI4 ke VPS (misal: /var/www/app-baru/backend).
• Beri izin akses ke folder writable:

  bash
  sudo chown -R www-data:www-data /var/www/app-baru/backend/writable
  sudo chmod -R 775 /var/www/app-baru/backend/writable

• Sesuaikan konfigurasi DB MySQL di file /var/www/app-baru/backend/.env.

3. Template Konfigurasi Nginx VPS (Siap Copy-Paste):

nginx
server {
    listen 80;
    server_name app-baru.domain.com;
    return 301 https://$host$request_uri;
}
server {
    listen 443 ssl;
    server_name app-baru.domain.com;
    # SSL Certbot
    ssl_certificate /etc/letsencrypt/live/app-baru.domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/app-baru.domain.com/privkey.pem;
    # 1. FRONTEND: React.js
    location / {
        root /var/www/app-baru/frontend/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    # 2. BACKEND: CodeIgniter 4 REST API
    location /api {
        alias /var/www/app-baru/backend/public;
        index index.php;
        if (!-e $request_filename) {
            rewrite ^/api/(.*)$ /api/index.php/$1 last;
        }
        location ~ \.php {
            include fastcgi_params;
            fastcgi_param HTTP_AUTHORIZATION $http_authorization;
            fastcgi_param SCRIPT_FILENAME /var/www/app-baru/backend/public/index.php;
            fastcgi_pass unix:/run/php/php8.3-fpm.sock; # Sesuaikan versi PHP VPS
        }
    }
}

4. Reload Nginx:

bash
sudo nginx -t && sudo systemctl reload nginx

Dengan pola di atas, setiap proyek baru Anda dijamin akan berjalan mulus tanpa masalah routing, CORS, maupun kehilangan token JWT!

Read More