Blog

Konfigurasi Laravel di Subdirektori dengan VestaCP dan Nginx

Panduan konfigurasi laravel di subdirektori dengan nginx ini saya tulis berdasarkan contoh kasus ketika develop web aplikasi yang terpisah antara backend dan frontend.

Konfigurasi laravel di subdirektori cukup mudah dan lancar ketika dilakukan di localhost laptop, namun ada kendala ketika diupload di VPS dimana hosting panel defaul VestaCP menggunakan proxy ke apache sebagai render php, bukan php-fpm.

Konsep

Konsep web aplikasi ini dipisahkan yaitu

  • backend (Laravel) beralamat di websaya.com/backend
  • frontend (Vue JS) beralamat di websaya.com

Tahapan konfigurasi server

Buat direktori

Buat direktori untuk kedua aplikasi yaitu public_html/backend dan public_html/frontend. Untuk tutorial instalasi frontend akan saya bahasi di artikel lain, saat ini kita fokus ke pembahasan instalasi backend.

Masuk ke direktori backend kemudian clone atau pull aplikasi backend (misal dari gihub) kemudian composer install.

Lanjut konfigurasi path, storage, database.

Install PHP-FPM

Secara default VestaCP tidak menyertakan instalasi php-fpm, apalagi untuk Laravel 8 minimal menggunakan php versi 7.4 sedangkan default VestaCP hanya menyertakan php 7.2.

Untuk instalasi php tidak saya bahas disini karena cukup panjang, anda bisa mengikuti panduan pada laman digitalocean.

Jika sukses anda bisa melakukan ujicoba dengan menjalankan service php-fpm, contoh sudo service php7.4-fpm restart.

Namun jika php-fpm error seperti kasus yang saya alami yaitu tidak ada file www.conf anda bisa membuat file tersebut dengan cara sudo nano /etc/php/7.4/fpm/pool.d/www.conf isinya apa? panjang anda bisa copy dari web server localhost yg sudah jalan atau googling.

Kemudian edit file /etc/php/7.4/fpm/php.ini ubah nilai cgi.fix_pathinfo = 0

Konfigurasi Nginx

Sebelum konfigurasi nginx pastikan dulu ceklis ini sudah selesai

  • Direktori penyimpanan file backend yg sudah terdapat file laravel
  • Install php fpm versi 7.4 dan dipastikan berjalan

Ok ini file konfigurasi nginx, pastikan anda memahaminya tidak asal copas, karena ada baris yang harus diubah sesuai domain atau ip address server.

Contoh kasus disini adalah alamat web backend yang diharapkan websaya.com/backend

File konfigurasi nginx berlokasi di /home/ahmad/web/conf/websaya.com.nginx.ssl.conf

Edit dengan perintah sudo nano -l /home/ahmad/web/conf/websaya.com.nginx.ssl.conf

Jika selesai tekan Ctrl + x pilih Y untuk menyimpan.

server {
    listen      1xx.2xx.5x.1xx:443 ssl;
    server_name websaya.com www.websaya.com;
    ssl_certificate      /home/ahmad/conf/web/ssl.websaya.com.pem;
    ssl_certificate_key  /home/ahmad/conf/web/ssl.websaya.com.key;
    error_log  /var/log/apache2/domains/websaya.com.error.log error;
    
    #proxy ke aplikasi frontend
    location / {
        proxy_pass http://1xx.2xx.5x.1xx:3015;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    } 

    #intinya dibawah ini konfigurasi sub direktori
    location ^~ /backend {
        alias /home/ahmad/web/websaya.com/public_html/backend/public;
        index index.php;
        try_files $uri $uri/ @backend;
        
        location ~ \.php$ {
            include fastcgi_params;
            fastcgi_intercept_errors on;
            fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
            fastcgi_param SCRIPT_FILENAME /home/ahmad/web/websaya.com/public_html/backend/public/index.php;
        }
    
        location ~* ^.+\.(jpeg|jpg|png|gif|bmp|ico|svg|tif|tiff|css|js|htm|html|ttf|otf|webp|woff|txt|csv|rtf|doc|docx|xls|xlsx|ppt|pptx|odf|odp|ods|odt|pdf|psd|ai|eot|eps|ps|zip|tar|tgz|gz|rar|bz2|7z|aac|m4a|mp3|mp4|ogg|wav|wma|3gp|avi|flv|m4v|mkv|mov|mpeg|mpg|wmv|exe|iso|dmg|swf)$ {
            root /home/ahmad/web/websaya.com/public_html/backend/public;
            try_files $uri @backend;
        }   
    }

    location @backend {
        rewrite ^/backend/(.*)$ /backend/index.php?/$1 last;
    }

    location /error/ {
        alias   /home/ahmad/web/websaya.com/document_errors/;
    }

    location @fallback {
        proxy_pass      https://1xx.2xx.5x.1xx:8443;
    }

    location ~ /\.ht    {return 404;}
    location ~ /\.svn/  {return 404;}
    location ~ /\.git/  {return 404;}
    location ~ /\.hg/   {return 404;}
    location ~ /\.bzr/  {return 404;}

    include /home/ahmad/conf/web/snginx.websaya.com.conf*;
}

Test konfigurasi nginx dengan perintah sudo nginx -t, jika tidak ada ero lanjut restart service

  • sudo service nginx restart
  • sudo service php7.4-fpm restart

Jangan lupa pointing domain anda ke ip server VPS, setalah selesai silahkan dicoba akses alamat web backend.

Ok sudah selesai untuk turorial Konfigurasi Laravel di Subdirektori dengan VestaCP dan Nginx.

Tinggalkan Balasan